Main component

Optional container providing layout slots and automatic state management.

<primer-main>

Optional container that provides structured slots for payment methods and checkout completion. Handles state transitions (loading, success, error) automatically.

Quick reference

Parent	<primer-checkout> (in main slot)
Slots	payments, checkout-complete
CSS Variables	--primer-space-small

---

Examples

Default (all methods)

<primer-checkout client-token="your-token">
  <primer-main slot="main"></primer-main>
</primer-checkout>

Renders all available payment methods automatically.

Custom payment methods

<primer-checkout client-token="your-token">
  <primer-main slot="main">
    <div slot="payments">
      <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
      <primer-payment-method type="PAYPAL"></primer-payment-method>
      <primer-error-message-container></primer-error-message-container>
    </div>
  </primer-main>
</primer-checkout>

Custom success screen

<primer-checkout client-token="your-token">
  <primer-main slot="main">
    <div slot="checkout-complete">
      <h2>Thank you for your order!</h2>
      <p>Your payment has been processed.</p>
      <a href="/orders">View Orders</a>
    </div>
  </primer-main>
</primer-checkout>

Both slots

<primer-checkout client-token="your-token">
  <primer-main slot="main">
    <div slot="payments">
      <h2>Choose payment method</h2>
      <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
    </div>
    <div slot="checkout-complete">
      <h2>Order confirmed!</h2>
    </div>
  </primer-main>
</primer-checkout>

---

Slots

Slot	Description	Default
payments	Payment method area	All available methods
checkout-complete	Success screen	Default success component

---

Events

<primer-main> does not emit its own events. It subscribes to parent events internally to manage slot visibility. When bypassing <primer-main>, you handle these events yourself.

Relevant parent events

Event	Emitted by	How <primer-main> uses it
primer:state-change	<primer-checkout>	Switches between payments and checkout-complete slots based on isSuccessful
primer:methods-update	<primer-checkout>	Populates the payments slot with available methods (when slot is not customized)

When you bypass <primer-main>

If you use a custom <div slot="main"> instead of <primer-main>, you must handle these events directly:

const checkout = document.querySelector('primer-checkout');

checkout.addEventListener('primer:state-change', (event) => {
  const { isSuccessful, isProcessing } = event.detail;

  if (isSuccessful) {
    document.getElementById('payment-form').hidden = true;
    document.getElementById('success-screen').hidden = false;
  }
});

---

CSS properties

Property	Description	Default
--primer-space-small	Gap between payment methods	8px

---

States

This component automatically manages visibility based on checkout state:

State	Description	Visible Slot
Loading	SDK initializing	Loading indicator
Ready	Payment methods available	payments slot
Processing	Payment in progress	payments slot (with loading overlay)
Success	Payment completed	checkout-complete slot
Error	SDK initialization failed	Error message

---

Usage guidelines

Do

• Use for structured customization with automatic state handling
• Include <primer-error-message-container> when customizing payments slot
• Provide custom success screen via checkout-complete slot

Don’t

• Don’t use if you need full control over state — use custom main slot on <primer-checkout> instead
• Don’t handle error states here — managed by <primer-checkout>

---

Alternative: full customization

For complete control, bypass <primer-main>:

<primer-checkout client-token="your-token">
  <div slot="main">
    <!-- Your implementation -->
    <!-- Must handle state via primer:state-change event -->
  </div>
</primer-checkout>

---

Content guidelines

Success screen text

Do	Don’t
”Thank you for your order!"	"Payment successful” (too technical)
“Your payment has been processed"	"Transaction complete”

Section headings

Do	Don’t
”Choose payment method"	"SELECT YOUR PAYMENT METHOD”
Use sentence case	Use all caps

---

See also

primer-checkout

Parent component

Layout customization

Slot usage guide

Error handling

Error display patterns