Checkout

An end-user can place orders on the storefront either by logging-in on the website or as a guest. Login is not required for guest checkout.

Login or Guest

Guest Checkout

The guest checkout requires the user to provide an e-mail address to proceed with placing an order on the storefront. Additionally, the following selections are offered to the user to opt for newsletter subscription to receive updates on the latest promotions, exclusive offers and new launches on the website:

• Email
• SMS
• Post

The guest checkout is performed with the following API operation:

Login

Login requires the user to provide an e-mail address and a password to proceed with placing an order on the storefront.

Login is performed with the following API operation:

Delivery

For product delivery, the storefront provides an option for the user to choose from ‘accept delivery’ or ‘collect from the nearest store’.

Shipping Method - Deliver

• Shipping Method Selection

  • By default, the country is populated based on the user’s IP location.

  • Additionally, the user should be able to change the country by clicking on change and selecting different country from dropdown.

  • The system then fetches the list of shipping methods by calling the following API operation:

    Operation	Endpoint	Response
    Get List of Shipping Methods	/api/v2/commerce/checkout/{basketId}/shipping-methods?countryCode={2_LetterCountryCode}&postcode={postCode}	Returns the list of shipping methods divided by ‘type’ - ‘standard’ [2] – to be displayed under ‘deliver’, ‘pickup’ [4] – to be displayed under ‘collect’

  • If there are no ‘pickup’ type shipping methods, the option is not displayed and by default ‘deliver’ is selected to display the shipping methods.

  • The user can select ‘Deliver’ or ‘Collect’ which have both different journey.

• Address Book / Address Form (based on User Type)

  • The following API operation is called when the user is NOT a guest:

    Operation	Endpoint	Response
    Fetch Address Book	/api/v2/commerce/address/{userId}	Returns the list of all addresses in user's address book.

  • A guest user on storefront is required to enter a new address.

• Address Selection & updation

  • Show ‘Default shipping’ address selected by default.

  • Show the address book of the user.

  • Allow user to create new address.

  • When user is entering a new address, we need to integrate PostCode Locator / Loqate plugin using which we can find address based on post code.

  • The user can select the ‘same billing address’ and not enter a separate billing address, else the user can also enter a separate billing address as well.

  • The following API operation is called for updating the selected address:

    Operation	Endpoint	Response
    Update Address Selection	/api/v2/commerce/checkout/{basketId}/address	Returns true or false depending upon successful update.

    Parameters passed as input are:

    • BillingAddress model
    • ShippingAddress model

  • Shipment Plans

    • The storefront makes a call to OMS Shipment API Endpoint to get the shipment plans. This is typically useful for end users to know when can they expect the items to be delivered to them. The following API operation is called to fetch shipment plans:

      Operation	Endpoint	Response
      Fetch Shipment Plans	{{oms_api_base_url}}/api/v1/oms/shipment/plans	Response can potentially contain multiple delivery plans – 1 plan delivering 2 items on 1 specific day and another delivery plan delivering other remaining item on 2nd day

    • After this step, the user is taken to the Payment Method Selection.

Shipping Method - Collect

• When the user selects ‘Collect’, the system displays the shipping methods supporting ‘Pickup’ [type = 4].

• If the ‘shippingCode’ of selected shipping method = ‘CNC’, then the system displays the post code entry box for ‘click on collect’.

• Post Code for Click & Collect

  • User enters the postcode for click and collect and clicks on ‘Find Stores’.

  • The following API operation is called to fetch the list of nearby stores:

    Operation	Endpoint	Response
    Fetch Stores List	{{oms_api_base_url}}/api/v1/oms/store/clickandcollect	Returns the list of stores with details like stores, distance and available in.

  • The field StoreId should be populated in the order as well when the user has selected that particular store.

• Stores List & Selection

  • The storefront displays the list of stores sorted by the distance provided.
  • On user's selection of a specific store, the storefront displays the store address with opening hours.
  • The user can then click on ‘Collect from this store’. The shipping method for the order should be updated as per selection along with the specific ‘storeId’.
  • In case of Click n Collect, there is no ‘Shipping Address’, so on next step, the storefront prompts the user to enter their ‘Billing Address’.

Payment

Available Payment Methods

• The business can configure payment methods at country & currency level.

• After the address selection, the following API operation is called to fetch the payment methods:

  Operation	Endpoint	Response
  Fetch Payment Methods	/api/v2/commerce/checkout/payment-methods?country={countryCode}&currency={currencyCode}	Returns the list of payment methods with details like display name, description, display order, settings, basic settings.

Payment Method Selection

• When user confirms the payment method selection, the storefront makes an API call to create an order on the CommerceHub with the complete checkout model:

  Operation	Endpoint	Response
  Create order on CH	/api/v2/commerce/checkout/{basketId}/convert	Generates a new order to return the order details or an error message, in case of failed validations.

• The response for the above API wil basically generate a new order and return the order details or will return an error message if any of the validations failed.

• There are lot of validations in the API and this call may return an error message as well with the updated Basket Model, so the respective error message should be displayed to the user.

• If the response is success, then the respective action for the specific payment method should be taken, it would be one of the following actions

  • StandardFormInput [10] = payment information is captured on the website through form.
  • Redirect to 3rd Party [15] = redirect the user to payment gateway website.
  • Button Display [20] = simply display a button clicking on which the user will be redirected to website.

• We may have to create separate react plugins for different payment gateways. quite possibly, a lot of them may already exist.

• If it’s a ‘Redirect to 3rd Party’ the API returns 2 URLs – ‘TestUrl’, ‘ProductionUrl’ and depending upon the value of ‘UseSandbox’, respective URLs are used. If the value = true, use ‘TestUrl’ else ‘ProductionUrl’

Payment Processor Response Handler

• This is the page where the payment gateway redirects the user after validating the payment method.

• We should have a separate notification url specific to each payment gateway to handle the specific response parameters from each payment gateway.

• The url could be /payment-notification/{{gateway-name}}.

• The storefront calls the following API for processing payment transaction:

  Operation	Endpoint	Response
  Payment Response	/api/v2/commerce/checkout/{orderId}/payment-response	Updates the status of payment transaction on CommerceHub.

• The user is redirected to /thank-you (thank you page) link when both conditions are met

  • Response from payment gateway is successful
  • The paid amount is equal to the order amount. This may be different when the user is using 2 payment methods to make the payment and doing split payment.

• if either of the above condition fails, redirect the user to ‘payment’ section to retry the payment (with error message displayed) or make the remaining payment.

Order Confirmation

Display a ‘Thank you’ message along with the order details – line items, shipping address.