spz-checkout#

#When to use

spz-checkout handles the cart-to-checkout transition. When the user clicks the checkout button, it fetches cart data and calls the buy-now API, then redirects to the checkout page.

#Supported layout

• container

#Example

<spz-checkout layout="container" cart="spz-cart">
  <button role="checkout">Checkout</button>
</spz-checkout>

#With order note

<textarea id="order-note" placeholder="Order notes..."></textarea>
<spz-checkout layout="container" cart="spz-cart" note-id="order-note">
  <button role="checkout">Checkout</button>
</spz-checkout>

#Attributes

#DOM role convention

#Behavior

1. On click of the [role="checkout"] button, the component fetches cart data from the element specified by cart.
2. A loading state is shown on the button.
3. The buy-now API is called with the cart token and optional order note.
4. On success, the browser redirects to the checkout URL.
5. On failure, a toast message is displayed and the page reloads.

#Notes

• This component does not expose custom actions.
• This component does not emit custom events.
• The [role="checkout"] child element is required for the component to function.