> ## Documentation Index
> Fetch the complete documentation index at: https://docs.marzipan.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout

> The checkout component displays the checkout page.

### Code

```javascript theme={null}
<marzipan-checkout>
    <div slot="stripe-card-element" id="stripe-card-element">
    </div>
    <div slot="express-checkout-element" id="express-checkout-element">
    </div>
</marzipan-checkout>
```

<Info>
  The `stripe-card-element` and `express-checkout-element` slots are required for the checkout component to work.
</Info>

### Props

Props should be passed as attributes to the component element.

<ResponseField name="show-forgot-password-link" type="boolean">
  Whether to show the forgot password link.

  Defaults to `false`
</ResponseField>

<ResponseField name="sign-in-message" type="string">
  The message to display to prompt the user to sign in.

  Defaults to `Checkout faster by signing in and using saved details`
</ResponseField>

<ResponseField name="return-to-cart" type="string">
  The slug of the page to return to when the user clicks the cart icon.

  Defaults to `/cart`
</ResponseField>

### 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](/web-components/customisation#background-colours-1).

#### 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](/web-components/customisation#logo).

#### 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](/web-components/customisation#phone-field).

#### 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](/web-components/customisation#referral-sources).

#### 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:

<ResponseField name="--marzipan-spinner">
  The spinner element.
</ResponseField>

<ResponseField name="--cart-icon-link">
  The cart icon link element.
</ResponseField>

<ResponseField name="--checkout-button">
  The primary action button, normally the "continue" button.
</ResponseField>

<ResponseField name="--checkout-sidebar">
  The sidebar element.
</ResponseField>

<ResponseField name="--checkout-image">
  The product image element.
</ResponseField>

<ResponseField name="--checkout-image-container">
  The containing `<div>` around a product image.
</ResponseField>

<ResponseField name="--checkout-logo">
  The logo element.
</ResponseField>

<ResponseField name="--discount-button">
  The discount button element.
</ResponseField>

<ResponseField name="--highlighted-item">
  The highlighted breadcrumb item element.
</ResponseField>

<ResponseField name="--input">
  The input element.
</ResponseField>

<ResponseField name="--input-checkbox">
  The input checkbox element.
</ResponseField>

<ResponseField name="--link">
  An `<a>` element used for links.
</ResponseField>

<ResponseField name="--option-button">
  The unselected option(s) of a radio group.

  For example the "ship" and "pickup" delivery options
</ResponseField>

<ResponseField name="--option-button-active">
  The selected option of a radio group.

  For example the "ship" and "pickup" delivery options
</ResponseField>

<ResponseField name="--select">
  The select element.
</ResponseField>

<ResponseField name="--shipping-option">
  The options for the selected shipping method
</ResponseField>