Slot Architecture Explorer

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.

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

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.

primer-checkout

Slot	Default Content
`main`	`primer-main`

primer-main

Slot	Default Content
`payments`	vault-manager + payment methods
`checkout-complete`	`primer-checkout-complete`

primer-vault-manager

Slot	Default Content
`vault-empty-state`	built-in vault UI
`submit-button`	`primer-vault-payment-submit`

primer-show-other-payments

Slot	Default Content
`show-other-payments-toggle-button`	`primer-collapsable`
`other-payments`	`primer-payment-method`(s)

primer-card-form

Slot	Default Content
`card-form-content`	built-in card form UI

primer-vault-cvv-input

Slot	Default Content
`label`	`<primer-input-label>CVV</primer-input-label>`

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.

Custom main layout

Override the entire checkout content with your own UI:

<primer-checkout client-token="...">
  <div slot="main">
    <!-- Your custom checkout UI -->
  </div>
</primer-checkout>

Custom card form layout

Rearrange the card form fields with your own layout:

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

Custom vault submit button

Replace the default vault submit button:

<primer-vault-manager>
  <button slot="submit-button" type="submit">
    Pay with saved card
  </button>
</primer-vault-manager>

Custom success screen

Show a custom message after successful payment:

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

Using slots

Learn how to use slots to customize layout

Layout with event handling

Build fully custom checkout experiences

Design tokens explorer

Explore CSS variables and styling

Checkout

Slot Architecture Explorer — Web

Using Slots in Your Code

Slot Reference

Code Examples

See also

Using slots

Layout with event handling

Design tokens explorer

​Using Slots in Your Code

​Slot Reference

​Code Examples

​See also

Using slots

Layout with event handling

Design tokens explorer

Using Slots in Your Code

Slot Reference

Code Examples

See also