Skip to main content
Explore how Primer Checkout components are organized and which slots are available for customization. Click on components to see their details, or browse the slot reference table for a complete overview.

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