HCL Commerce Version 9.1.9.0 or later

Using the Multiple Payment option

The multiple payment option allows the shopper to select multiple payment methods for a given cart amount for all React Stores. In this document, the multiple payment option for Sapphire React Store is used as an example.

Procedure

  1. The shopper enters their login credentials for the Sapphire login page. They will see the home page for the store.
  2. They add the desired items in the cart and click on the cart icon at the top-right side of the screen.
  3. They click the View full cart button. A shipping cart page opens.
  4. They click the Checkout button.
  5. The shopper then selects the shipping address and shipping methods.
    Note: The shopper can also use the multiple shipment option with multiple payment order. Refer to Multiple Shipment for Sapphire store for more details.
  6. They click the Continue to Payment button. This redirect s them to the Payment Details screen.
  7. The shopper enables the Use multiple payment methods switch given beside the Payment Details menu. This will show a prompt to add at least one payment method.
    Note: The Review Order button will be disabled till the shopper adds at least one payment method.
  8. They click the Add a payment method button.
  9. They select a payment method. For example, the Cash on delivery method.
  10. They enter the amount to be paid in cash during the delivery in the Amount to pay option.
  11. They select the billing address or enter a new address by clicking the Create a New Address button.
  12. They click theDone button. This will add the payment method as Payment Method 1 and the mode of payment will also be displayed, as shown in the below example
    Note: Here the total cart value is $727.50 and the amount paid by Cash on delivery mode is $200. Note that the Review Order button is not activated because the total cart amount is not covered by the payment methods, as prompted in the message displayed below the button.
  13. The shopper clicks the Add another payment method button. The Payment Method page appears, where they must select the desired payment methods for the remaining amount.
  14. They add another payment method and select the desired billing address or enter a new delivery address. For example, a credit card is selected as another mode of payment in the image shown below.
    Note:
    • The Review Order button is activated as the entire billing amount ($727.50 in this example) is covered in the payment methods.
    • The number of payment methods that can be entered is set to three by default. However, the shopper can customize the number of payment methods by using the order.ts file present in stoe-web\src\configs path of the source code.
    • The payment method details will only be saved if they click the Review Order button as shown in the below image.
    • If a shopper wants to edit the payment method, then the credit card details must be entered again. The payment method details that need to be re-entered, will be highlighted in a red box.
  15. They click the Review order button to review the order details.
  16. They click the Place Order to confirm the order.