Documentation Index Fetch the complete documentation index at: https://primer.io/docs/llms.txt
Use this file to discover all available pages before exploring further.
<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-completeCSS 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 paymentsPayment method area All available methods checkout-completeSuccess 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-smallGap 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 slotProcessing Payment in progress payments slot (with loading overlay)Success Payment completed checkout-complete slotError SDK initialization failed Error message
Usage guidelines
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
