Commerce Checkout renderings

Abstract

Use Commerce Checkout renderings to build billing, shipping and confirmation pages for checkout.

The Commerce Checkout group in the SXA toolbox contains a number of renderings that you can use to create pages to manage the checkout process.

The order of the pages in the Content Editor dictates the checkout page sequence. It determines which page is displayed as the first step of the checkout process, and which page is displayed when the customer clicks a button to move forwards or backwards in the process (for example, the Back to Delivery or Continue to Confirmation button).

checkout_pages_in_sequence.png

This topic describes the following renderings in the Commerce Checkout group in the SXA Toolbox:

You use the Start Checkout rendering to initiate the checkout process. The Checkout page must only contain the Start Checkout rendering, which does not have a visible output on the live site.

In the Experience Editor, the Start Checkout rendering looks similar to this:

Checkout_Start_Checkout.png

The Checkout Step provider determines which page to redirect the customer to. In the associated data item, you can configure the message that is displayed in the rendering.

Result

On the live storefront, the Start Checkout rendering redirects the customer to the first visible step of the checkout process.

Note

If the cart is empty, the customer is redirected to the Shopping Cart page.

You use the Step Indicator rendering to indicate progress through the steps of the checkout process.

Checkout_StepIndicator_Live.png

The following steps are defined by default:

  • Cart

  • Delivery

  • Billing

  • Review

The order of the steps in the Step Indicator is determined by the configuration of the Step Name and Labels fields on the associated data item:

Checkout_step_indicator.png

The Step Name in the left column is the HTML Identifier of the step and the right column contains the text label that appears in the user interface.

As the customer moves through the checkout process, the current step is highlighted. On each checkout page, the current step is set in the Control Properties dialog box for the Step Indicator rendering:

Checkout_ControlProperties_CurrentStep.png

In the Current Step field, enter the name of the step as it appears in the associated data item.

You use the Delivery rendering to let the customer specify where and how items are shipped. By default, delivery is the first visible step in the checkout process.  When you add the rendering to a page in the Experience Editor, it looks similar to this:

Checkout_Delivery_preferences.png

Result

On the live storefront, after the customer selects a shipping method, enters an address, and clicks View shipping options, the Delivery rendering looks like this:

Checkout_delivery_shippingoptions.png

The options that the customer can select depend on the content of the cart. The following delivery options are available in the SXA Storefront solution, and you can customize them:

  • Ship items – all items will be delivered to a single shipping address specified by the customer. When a valid address is entered, the following shipping options are available:

    • Ground

    • Next Day Air

    • Standard

    • Standard Overnight

  • Ship items individually – lets the customer specify a different shipping address and shipping option for each item in the cart.

  • Digital – if the customer orders a digital item, the customer must enter an email address for delivery.

When all items have a shipping address and delivery option, the Continue to billing button is enabled, and the customer can move to the next step of the checkout process.

In the Experience Editor, fields and buttons in the rendering are disabled.

On the live storefront, the customer can use the buttons to move backwards and forwards between steps in the checkout process. Delivery information that has been entered is saved when the customer clicks Continue to billing, and is retained if the customer then leaves the checkout process to continue shopping. By default, when the customer clicks the Continue Shopping button, the Home page is displayed. This is determined by the Checkout Step provider.

You use the Billing rendering to let the customer specify payment information. The customer selects a billing option and enters billing information. Relevant fields are displayed, depending on the customer's selections.

Checkout_billing.png

The rendering currently supports the following payment options:

  • Federated payment via Braintree third-party payment control service

  • Gift card payment

The customer can apply a gift card amount to an order, and they can pay the current balance by credit card.

For the billing address, there are the following options:

  • Same as shipping address – only available if the Single shipment for all items option is selected on the delivery page. If multiple shipping addresses have been specified, the customer must select from the registered addresses or enter a new one

  • Select from registered addresses – all billing and shipping addresses that have been previously used for the account are displayed.

  • Use another address – enter a new address.

The rendering uses the Braintree federated payment control to accept credit card payment. The customer enters the credit card information and then clicks Validate Payment to validate the amount.

To add a gift card payment, the customer expands the Apply gift card section, enters the gift card number, and presses Get Balance. If the gift card is valid, the balance is displayed. The customer can then apply the full amount of the order as a payment, or enter a smaller amount to be applied.

Note

If you intend to apply a gift card for part of the payment and then pay the balance using your credit card, you must enter the gift card first. The current remaining amount is applied to the credit card when you enter the credit card information, and you cannot change the credit card amount afterwards.

In the Experience Editor, fields and buttons in the rendering are disabled.

On the live storefront, once the payment information has been entered, the Continue to confirmation button is enabled, and the customer can move on to the next step of the checkout process.

The customer can use the buttons to move backwards and forwards between steps in the checkout process. Billing information that has been entered is remembered by Braintree. If the customer returns to checkout and the shopping cart and delivery information have not changed, the card information entered earlier can be used. However, if the shopping cart or delivery information have changed, the customer must reenter the card information.

You use the Review rendering to let the customer review and confirm the order after the billing and delivery steps are completed. The Review rendering summarizes the order, enabling the customer to review the current order and confirm the purchase.

In the Experience Editor, the rendering looks like this:

Checkout_Review.png

On the live storefront, the rendering looks like this:

Checkout_ReviewLive.png

If the customer wants to place the order, the customer clicks Confirm order. By default, Confirm order brings the customer to the Order Confirmation page.

You use the Control Properties dialog box for the Review rendering to set the Edit shipping address and Edit billing address links.

Checkout_Review_ControlProps_Links.png

Note

If a visitor tries to bypass the client-side validation, for example, by directly accessing the URL for the page with the Confirm rendering and then submitting the order, then the Commerce engine will reject the order and an error will be displayed.

You use the Order Confirmation rendering to confirm that the customer order has been submitted.

In the Experience Editor, the rendering displays placeholder data for the order number and order status:

Checkout_OrderConfirmation.png