​
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.

Boolean props have a leading dot. This is to allow the boolean props to 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