Accelerated Checkout​

Merchants can enable payment service providers that offer remote checkout options, such as Apple Pay or Google Pay. This feature can make the checkout process quicker and simpler for customers. Fast checkout buttons can be displayed either on the storefront or at the first step of checkout, allowing customers to use one of these remote checkouts.

By default, accelerated checkout buttons are supported during checkout. However, you can also choose to include these buttons on the storefront.

In this tutorial, you will learn how to support accelerated checkout buttons on your storefront.

Resources​

To display additional checkout buttons in your theme, you will use the following Handlebars objects:

• additional_checkout_buttons
  Returns true if any enabled payment provider for the store offers off-site checkout, otherwise returns false.
• content_for_additional_checkout_buttons
  Generates the HTML for the parent container, which contains a button for each payment provider that offers remote checkout.

Implementing Accelerated Checkout Buttons in Your Theme​

You can add accelerated checkout buttons anywhere in your theme. It is recommended to place these buttons near the checkout input on your cart template, within a section of the template, or in the cart drawer.

Consider adding the quick checkout button near the checkout input in your cart form, allowing customers to select between the regular checkout and fast checkout options.

Your code should perform the following actions:

1. Check if any payment provider offering off-site checkout is enabled for the store using the additional_checkout_buttons object.
2. If additional_checkout_buttons is true, display the payment provider buttons on the cart page using the content_for_additional_checkout_buttons object.

{{#if additional_checkout_buttons}}
  {{{content_for_additional_checkout_buttons}}}
{{/if}}

Accelerated Checkout Buttons at Checkout​

You can display accelerated checkout buttons to customers on your storefront and during checkout.

Aligning Checkout Buttons​

By default, quick checkout buttons are aligned upright within their container. However, you can change the alignment using CSS.

The button container has the attribute data-shopline="payment-button" and styles applied with display: flex. You can select the container using the data attribute. To control the button alignment, you can use one of the following options for the flex-direction style:

• column: Vertical alignment.
• row: Horizontal alignment.

Example:

[data-shopline="payment-button"] {
  flex-direction: row;
}