Skip to main content

​
Code

<marzipan-checkout>
    <div slot="stripe-card-element" id="stripe-card-element">
    </div>
    <div slot="express-checkout-element" id="express-checkout-element">
    </div>
</marzipan-checkout>
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.
​
show-forgot-password-link
boolean
Whether to show the forgot password link.Defaults to false
​
sign-in-message
string
The message to display to prompt the user to sign in.Defaults to Checkout faster by signing in and using saved details
​
return-to-cart
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:
​
--marzipan-spinner
The spinner element.
​
--cart-icon-link
The cart icon link element.
​
--checkout-button
The primary action button, normally the “continue” button.
​
--checkout-sidebar
The sidebar element.
​
--checkout-image
The product image element.
​
--checkout-image-container
The containing <div> around a product image.
The logo element.
​
--discount-button
The discount button element.
​
--highlighted-item
The highlighted breadcrumb item element.
​
--input
The input element.
​
--input-checkbox
The input checkbox element.
​
--link
An <a> element used for links.
​
--option-button
The unselected option(s) of a radio group.For example the “ship” and “pickup” delivery options
​
--option-button-active
The selected option of a radio group.For example the “ship” and “pickup” delivery options
​
--select
The select element.
​
--shipping-option
The options for the selected shipping method