6. Checkout screen

[4seer]

6.1. Checkout start screen use-case: User clicks “Checkout button” from the Cart Screen and gets to Checkout screen. The default shipping address, payment method and delivery method is displayed. The delivery price is added and affect the Summary.

6.2. Checkout change shipping address: User clicks “Change” in the shipping address tile on the Checkout Screen. List of shipping addresses is displayed.

6.3. Add new shipping address in the checkout use-case: User clicks “+” button on the shipping address list screen in the checkout. The Add Shipping Address Form appears. User fills in the form, fields are validated to be at least 3 chars long. User clicks “Save Address”. The shipping address is added to local database. User is redirected to back to list of shipping addresses.

6.4. Change shipping address in the checkout use-case: User clicks “Use as shipping address” checkbox in the list of shipping addresses in the checkout. The new shipping address is set for the order. User is redirected to checkout start screen.

6.5. Edit shipping address in the checkout use-case: User clicks “Edit” link in the shipping address tile in the checkout. User is redirected to form to edit details on shipping address. The fields are validated to be at least 3 chars long. User edits fields, clicks save, shipping address is updated in local database. User is redirected back to list of shipping addresses in the checkout.

6.6. Checkout change payment method use-case: User clicks “Change” in the payment method tile. List of available payment methods is displayed. User clicks on “Use as default payment method” and changes default payment method and for the current checkout process.

6.7. Add payment method in checkout use-case: Use click “+” button in the list of payment methods. The form to add new card is displayed. User adds card information with validation and clicks “Add Card”. The card is added to local database and set as payment method for the checkout process. User is redirected to checkout start screen.

6.8. Change delivery method in the checkout use-case: User clicks on one of the delivery methods available in the “Delivery Method” section of the screen. The delivery price changes and affects summary.

6.9. Submit order use-case: User clicks “Submit order” in the checkout start page. Request to server is made and the card is used to pay and returns success/error. The order is submitted to the backend too. If the payment was successful user is redirected to success screen. If an error appears user stays on the checkout start page with an error message “Payment was not processed.” (answer from the backend).

Product cart and checkout discussion

E-commerce App Use-Case Description

Within this task you need to do the following:

1. Pull all data from local database and render it on the screen.

2. At this time mock remote repository calls for fetching data from a local JSON file. The data structure and method names should be taken from WooCommerce REST API docs.