HCL Commerce Version 9.1.19.0 or later

One page checkout

The One Page Checkout streamlines the shopping experience for both B2B and B2C customers by consolidating all the steps required to complete a purchase onto a single, scrollable page. This efficient layout reduces friction in the checkout process, making it quicker and easier for customers to place orders.

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. All the stores are listed on this page. Double-click on the Ruby store. The Store Properties tab displays.
    4. Navigate to the Configurations window and select optional integrations and functions to enable one page checkout for the Next.js store.
    5. Click the checkbox to Enable One Page Checkout (when the store is served by Next.js).
    A screen capture of the enable one page checkout
    1. Click the Save button.
    The One Page Checkout feature is enabled for both guest and registered users in the Next.js store.
  2. Open the Next.js store landing page and enter your login credentials.
  3. Add the desired 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.
    • Product Details

      Each cart item includes item details, delivery type, quantity and price.

      To view product attributes, click Show attributes. Attributes include style, finish, assembly and material.
    • 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:

          • To add a new address:
            1. Click the + Add New Address button.

              The Add New Address page opens.

            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.
    • Pickup Details

      Choose one of the two pickup options:

      • I'll pick it up.
        • First Name
        • Last Name
        • Email Address
        • Phone Number
      • Someone else will pick it up.
        • Pickup person’s Full Name
        • Pickup person’s Email
        • Buyer’s Full Name
        Note: All fields are mandatory.
    • 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.
      • 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.