Skip to main content

​
Code

The stripe-card-element and express-checkout-element slots are required for the checkout component to work.

​
Props

Props should be passed as attributes to the component element.
​
boolean
Whether to show the forgot password link.Defaults to false
​
string
The message to display to prompt the user to sign in.Defaults to Checkout faster by signing in and using saved details
​
string
The slug of the page to return to when the user clicks the cart icon.Defaults to /cart

​
Features

​
Background Colours

The checkout uses a split-panel layout. You can set separate background colours for the order summary (left) and checkout form (right) from your web component settings. Control how your store logo appears at the top of the checkout, including its position (left, centre, right) and height. Configured in web component settings.

​
Phone Number Requirement

You can require customers to enter a phone number during checkout. This is useful for delivery notifications and fulfilment providers that need a contact number. Toggle this in web component settings.

​
Referral Sources

Ask customers “How did you hear about us?” during checkout. You can configure the list of options, add follow-up questions, and auto-tag customers based on their response. This data feeds into your Attribution insights. Set up in web component settings.

​
Rewards Redemption

If you have a rewards programme enabled, customers can apply their accumulated points for a discount during checkout. The points redemption interface appears automatically for customers with available points.

​
PayFast Payments

If PayFast is configured as a payment gateway, the checkout component supports PayFast’s payment flow alongside Stripe and PayPal.

​
Styling

The following parts are available to style the checkout component:
​
The spinner element.
​
The cart icon link element.
​
The primary action button, normally the “continue” button.
​
The sidebar element.
​
The product image element.
​
The containing <div> around a product image.
The logo element.
​
The discount button element.
​
The highlighted breadcrumb item element.
​
The input element.
​
The input checkbox element.
​
An <a> element used for links.
​
The unselected option(s) of a radio group.For example the “ship” and “pickup” delivery options
​
The selected option of a radio group.For example the “ship” and “pickup” delivery options
​
The select element.
​
The options for the selected shipping method