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
falsestring
The message to display to prompt the user to sign in.Defaults to
Checkout faster by signing in and using saved detailsstring
The slug of the page to return to when the user clicks the cart icon.Defaults to
/cartstring
The message shown to guests explaining they can create an account later.Defaults to
You can create an account once you have orderedstring
The path the “continue shopping” button goes to from the order confirmation.Defaults to
/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.Logo
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.Custom Questions
If you’ve set up custom checkout fields, they’re asked on the details step and stored against the order and the customer. A returning customer’s previous answers are filled in for them.A required custom question hides the Apple Pay and Google Pay shortcut at the top of checkout in any market where it applies, since the question can only be answered on the checkout page itself. Both are still offered at the payment step.
Order Confirmation
Once an order is placed, the checkout renders the confirmation in the same split layout as the checkout itself: the receipt on one side and an order summary on the other. It can also carry:- Rewards - a band showing what the order earned, when rewards are switched on. Its colours and corners are set in web component settings.
- Create an account - guests are offered a single password field that turns the order they just placed into an account. See below.
- How did you hear about us? - asked here when the order has no answer yet, if you’ve turned it on. See Referral Sources.
Create an Account
Guest checkout already attaches the order to a customer record, but without a password the shopper can’t sign in to see it. The confirmation page offers a password field to finish the job. Everything else is already on the order, so nothing is retyped. A verification code is emailed straight away, and the account area stays closed until it’s entered. The wording is editable in web component settings.The block doesn’t appear for a shopper who checked out signed in, or whose email address already has an account.
Gifting
With gifting turned on, the delivery step opens by asking who the order is for. Choosing someone else collects their delivery address and then asks whether the order is a gift, which adds a step for the message, the recipient’s details, the date to deliver after and the date to tell them. Every heading, option and note on those steps is editable in web component settings. See Gift orders for how the dates behave.Gift Vouchers
A gift voucher code is entered in the same box as a discount code. Marzipan recognises a voucher by its checksum, applies it as stored value, and charges the card the difference.Where a voucher covers a repeating order in full, checkout still asks for a card for the deliveries after the first one, since nothing is being charged today and the renewals would otherwise have nothing to bill. The wording of that explanation is yours to set.
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
The confirmation container.
The receipt column.
The order summary column.
The confirmation heading.
The order number element.
The contact details block.
The delivery details block.
The container around the confirmation’s actions.
The “continue shopping” button.
The order summary container.
The order summary heading.
A line item in the order summary.
The order summary total.
The create-account form.
The create-account heading.
The create-account button.
The “how did you hear about us?” block.
The referral prompt’s form.
The referral prompt’s heading.
The referral prompt’s button.
The discount code label.
A form label element.