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

# Slot Architecture Explorer — Web

> Explore the component hierarchy and available slots in Primer Checkout for Web.

Default Checkout Layout

primer-checkout
root

slot: main
→ primer-main
✎ overridable

primer-main
layout

slot: payments
→ vault + payment methods
✎ overridable

primer-vault-manager
container

slot: vault-empty-state
→ built-in vault UI
✎ overridable

slot: submit-button
→ primer-vault-payment-submit
✎ overridable

primer-show-other-payments
container

slot: show-other-payments-toggle-button
→ primer-collapsable
✎ overridable

slot: other-payments
→ primer-payment-method(s)

primer-payment-method
× N

Renders one of the following based on `managerType`:

primer-card-form
CARD

slot: card-form-content
→ built-in card form
✎ overridable

input-card-number
input-card-expiry
input-cvv
input-card-holder-name
card-form-submit
billing-address

primer-google-pay
NATIVE

primer-apple-pay
NATIVE

primer-paypal
NATIVE

primer-klarna
KLARNA

primer-redirect-payment
REDIRECT

primer-error-message-container
errors

slot: checkout-complete
→ primer-checkout-state (complete)
✎ overridable

Your success screen — shown after payment completes

slot: checkout-error
→ primer-checkout-state (failure)
✎ overridable

Your initialization-error screen — shown when the SDK fails to initialize

Utility component (not in default layout)

primer-payment-method-container
utility

Filters and renders `primer-payment-method` instances by type.
Use in custom layouts with `include` / `exclude` props.

⚡ Conditional rendering

Component

Utility / placeholder

slot
Named slot

✎ overridable
Merchant can replace

Component Details

***

## Using Slots in Your Code

Slots are the primary mechanism for customizing layout in Primer Checkout. Each slot is a named placeholder where you can insert your own content.

```html theme={"dark"}
<primer-checkout client-token="your-client-token">
  <div slot="main">
    <!-- This content replaces the default main slot -->
    <primer-main>
      <div slot="payments">
        <!-- Custom payment methods layout -->
      </div>
    </primer-main>
  </div>
</primer-checkout>
```

> [!TIP]
>
> If you don't provide content for a slot, the component uses its default content. This lets you customize only the parts you need.

***

## Slot Reference

A complete reference of all named slots available in Primer Checkout components.

> [accordion] primer-checkout
>
> | Slot | Default Content |
> | - | - |
> | `main` | `primer-main` |

> [accordion] primer-main
>
> | Slot | Default Content |
> | - | - |
> | `payments` | vault-manager + payment methods |
> | `checkout-complete` | `primer-checkout-state` (`type="complete"`) |
> | `checkout-error` | `primer-checkout-state` (`type="failure"`) |

> [accordion] primer-vault-manager
>
> | Slot | Default Content |
> | - | - |
> | `vault-empty-state` | built-in vault UI |
> | `submit-button` | `primer-vault-payment-submit` |

> [accordion] primer-show-other-payments
>
> | Slot | Default Content |
> | - | - |
> | `show-other-payments-toggle-button` | `primer-collapsable` |
> | `other-payments` | `primer-payment-method`(s) |

> [accordion] primer-card-form
>
> | Slot | Default Content |
> | - | - |
> | `card-form-content` | built-in card form UI |

> [accordion] primer-vault-cvv-input
>
> | Slot | Default Content |
> | - | - |
> | `label` | `<primer-input-label>CVV</primer-input-label>` |

> [accordion] primer-input-wrapper
>
> | Slot | Default Content |
> | - | - |
> | `label` | `primer-input-label` |
> | `input` | hosted input element |
> | `error` | `primer-input-error` |

***

## Code Examples

Common patterns for customizing slots in Primer Checkout.

> [accordion] Custom main layout
>
> Override the entire checkout content with your own UI:
>
> ```html theme={"dark"}
> <primer-checkout client-token="...">
>   <div slot="main">
>     <!-- Your custom checkout UI -->
>   </div>
> </primer-checkout>
> ```

> [accordion] Custom card form layout
>
> Rearrange the card form fields with your own layout:
>
> ```html theme={"dark"}
> <primer-card-form>
>   <div slot="card-form-content" class="my-layout">
>     <primer-input-card-number></primer-input-card-number>
>     <div class="row">
>       <primer-input-card-expiry></primer-input-card-expiry>
>       <primer-input-cvv></primer-input-cvv>
>     </div>
>     <primer-card-form-submit>Pay Now</primer-card-form-submit>
>   </div>
> </primer-card-form>
> ```

> [accordion] Custom vault submit button
>
> Replace the default vault submit button:
>
> ```html theme={"dark"}
> <primer-vault-manager>
>   <button slot="submit-button" type="submit">
>     Pay with saved card
>   </button>
> </primer-vault-manager>
> ```

> [accordion] Custom success screen
>
> Show a custom message after successful payment:
>
> ```html theme={"dark"}
> <primer-checkout client-token="...">
>   <primer-main slot="main">
>     <div slot="checkout-complete">
>       <h1>Thank you for your order!</h1>
>       <p>Order confirmation sent to your email.</p>
>     </div>
>   </primer-main>
> </primer-checkout>
> ```

> [accordion] Custom initialization error screen
>
> Show a custom message when the SDK fails to initialize:
>
> ```html theme={"dark"}
> <primer-checkout client-token="...">
>   <primer-main slot="main">
>     <div slot="checkout-error">
>       <h1>We could not load the checkout</h1>
>       <p>Please try again later or contact support.</p>
>     </div>
>   </primer-main>
> </primer-checkout>
> ```

***

## See also

> [card] [Using slots](https://primer.io/docs/checkout/primer-checkout/build-your-ui/layout-customization.md)
>
> Learn how to use slots to customize layout

> [card] [Layout with event handling](https://primer.io/docs/checkout/primer-checkout/build-your-ui/advanced-layout-customization.md)
>
> Build fully custom checkout experiences

> [card] [Design tokens explorer](https://primer.io/docs/checkout/primer-checkout/build-your-ui/design-tokens-explorer.md)
>
> Explore CSS variables and styling


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.