Skip to main content

​
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.
SlotDefault Content
mainprimer-main
SlotDefault Content
paymentsvault-manager + payment methods
checkout-completeprimer-checkout-complete
SlotDefault Content
vault-empty-statebuilt-in vault UI
submit-buttonprimer-vault-payment-submit
SlotDefault Content
show-other-payments-toggle-buttonprimer-collapsable
other-paymentsprimer-payment-method(s)
SlotDefault Content
card-form-contentbuilt-in card form UI
SlotDefault Content
label<primer-input-label>CVV</primer-input-label>
SlotDefault Content
labelprimer-input-label
inputhosted input element
errorprimer-input-error

​
Code Examples

Common patterns for customizing slots in Primer Checkout.
Override the entire checkout content with your own UI:
<primer-checkout client-token="...">
  <div slot="main">
    <!-- Your custom checkout UI -->
  </div>
</primer-checkout>
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>
Replace the default vault submit button:
<primer-vault-manager>
  <button slot="submit-button" type="submit">
    Pay with saved card
  </button>
</primer-vault-manager>
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>

​
See also

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