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

​
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