Skip to main content

​
<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)
Slotspayments, 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

SlotDescriptionDefault
paymentsPayment method areaAll available methods
checkout-completeSuccess screenDefault 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

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

PropertyDescriptionDefault
--primer-space-smallGap between payment methods8px

​
States

This component automatically manages visibility based on checkout state:
StateDescriptionVisible Slot
LoadingSDK initializingLoading indicator
ReadyPayment methods availablepayments slot
ProcessingPayment in progresspayments slot (with loading overlay)
SuccessPayment completedcheckout-complete slot
ErrorSDK initialization failedError 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

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

​
Section headings

DoDon’t
”Choose payment method""SELECT YOUR PAYMENT METHOD”
Use sentence caseUse all caps