HCL Commerce Version 9.1.19.0 or later

One page checkout

The One page checkout consolidates all purchase steps onto a single, scrollable page for B2B and B2C customers.

Procedure

  1. Enable One Page Checkout
    1. Open Management Center Tools.
    2. From the left navigation menu, navigate to, Business Tools > Store Management > Manage Stores > Ruby > Configuration.
    3. Double-click on the Ruby store to display Store Properties.
    4. In the Configurations window, select the Enable One Page Checkout (when the store is served by Next.js).
    5. Click the Save button.

    A screen capture of the enable one page checkout

    The One Page Checkout feature is enabled for both guest and registered users in the Ruby store.
  2. Open the Ruby store landing page and enter login credentials.
  3. Add items to the cart, and click the View full cart button.
    A shopping cart page opens.
  4. From the shopping cart page, click the Checkout button.
  5. The One page checkout page opens, displaying all required order sections on a single, scrollable page.
    Note: The content is organized using accordion menus for easier navigation and a cleaner user experience.
    1. Shipping details
      Click Edit in the Shipping Details section to change the shipping address or method.
      • To ship to a single address:
        1. Click Edit and fill in the required fields marked with a * symbol. Enter the address details.
        2. Select a Shipping Address and Shipping Method.
        3. Click Save and select this address.
          Remember: The Cancel button closes the section without saving your changes.
        4. Select a Shipping Method.
          • To ship to multiple addresses: Toggle Ship to multiple addresses if you want different items delivered to different addresses. For more details, see Multiple Shipment for the Next.js store.
          • To add a new address:
            1. Click the + Add New Address button.
            2. Enter the address details. Fill in the required fields marked with a * symbol.
            3. Click Save and select this address. A successful message is displayed on the screen.
              Remember: The Cancel button closes the section without saving your changes.
            4. Select a Shipping Method.
    2. Pickup details
      • Choose one of the two pickup options:
        • I'll pick it up: Enter the full name, email address and phone number.
        • Someone else will pick it up: Enter the full name of the pickup person and the full name of the buyer.
    3. Payment details and billing address
      Click Edit to modify payment method or billing information.
      • If you want to make the payment using a single payment method, select the payment method, Billing Address, and Shipping Method.
      • After selecting payment details, click the Save button to review the order details.
      • If you want to cancel, click Cancel.
    4. Multiple payment methods
      You can enable the toggle button to Use multiple payment methods if you want to use different payment methods. See Multiple Payment for the Next.js Store for more details.
    Note:
    • Ensure all required fields (marked with *) are completed.
    • If any required information is missing, an error message appears: Please correct any errors and fill out required fields marked with a * symbol.
  6. Click Place Order to complete the order.
    Once the order is placed, the order successful message is displayed on the screen.