Commerce Checkout renderings
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. This topic describes the renderings accessible from the Commerce Checkout section in the Toolbox.
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).
Start Checkout rendering
You use the Start Checkout rendering to enable the customer to initiate the checkout process. At this point, customers are directed to the Checkout page. This 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:
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.
On the live storefront, the Start Checkout rendering redirects the customer to the first visible step of the checkout process.
If the cart is empty, the customer is redirected to the Shopping Cart page.
Step Indicator rendering
You use the Step Indicator to show progress through the steps of the checkout process.
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:
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:
In the Current Step field, enter the name of the step as it appears in the associated data item.
Delivery rendering
You use the Delivery rendering to enable the customer to 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:
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:
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.
Billing rendering
You use the Billing rendering to enable 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.
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.
To allow online payment during checkout, the Storefront site template includes integration with BrainTree. Contact BrainTree to negotiate an agreement and obtain the necessary merchant ID. Developer accounts are available for storefront development and testing, You can create a custom commerce component to integrate the payment provider of your choice.
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.
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.
Review rendering
You use the Review rendering to enable the customer to review and confirm the order. This occurs after the billing and delivery steps have been 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:
On the live storefront, the rendering looks like this:
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.
Configuration
In the Control Properties dialog box, you can configure the following properties for the Review rendering.
Property |
Use |
---|---|
Billing Page Url |
Configure the Edit billing address link. |
Delivery Page Url |
Configure the Edit shipping address link. |
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.
Order Confirmation rendering
You use the Order Confirmation 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: