Component Hierarchy
- Without vault
- With vault
Cprimer-checkout
└── Mprimer-mainslot: main
├── ◇primer-payment-methodslot: payments
├── Fprimer-card-formslot: card-form-content
│ ├── #primer-input-card-number
│ ├── #primer-input-card-expiry
│ ├── #primer-input-cvv
│ ├── #primer-input-cardholder-name
│ └── →primer-card-form-submit
├── !primer-error-message-container
└── →primer-checkout-completeslot: checkout-complete
CRoot
MLayout
PContainer
FCard form
#Input fields
→Actions / errors
◇Payment method
Core Components
| Component | Description |
|---|---|
<primer-checkout> | Root component. Initializes the SDK, provides checkout context, and wraps all other components. This is the entry point. |
<primer-main> | Optional state manager that handles checkout states (loading, success, error) and provides layout slots. |
Payment Method Components
| Component | Description |
|---|---|
<primer-payment-method> | Renders a specific payment method (card, PayPal, Apple Pay, etc.) based on the type attribute. |
<primer-payment-method-container> | Container for filtering and organizing multiple payment methods using include and exclude attributes. |
<primer-vault-manager> | Displays and manages saved (vaulted) payment methods for returning customers. |
<primer-show-other-payments> | Toggle button to show/hide additional payment methods. |
Card Form Components
| Component | Description |
|---|---|
<primer-card-form> | Container that provides context for card inputs. All card input components must be nested inside this. |
<primer-input-card-number> | Secure hosted input for card number with automatic card network detection. |
<primer-input-card-expiry> | Secure hosted input for expiration date (MM/YY). |
<primer-input-cvv> | Secure hosted input for card security code. |
<primer-input-cardholder-name> | Input field for cardholder name. |
<primer-card-form-submit> | Submit button with built-in loading and disabled states. |
<primer-input-label> | Label component for card inputs. |
<primer-input-wrapper> | Wrapper for styling and layout of card inputs. |
<primer-billing-address> | Collects billing address information for card payments. |
Utility Components
| Component | Description |
|---|---|
<primer-error-message-container> | Displays payment error messages after failed transactions. |
Configuration & Events
| Reference | Description |
|---|---|
| SDK Options | Complete reference of all configuration options (locale, card, vault, applePay, etc.) |
| Events & Callbacks | All events (primer:ready, primer:state-change, primer:payment-success) and callbacks (onPaymentSuccess, onPaymentFailure) |
| Styling Variables | CSS variables for theming (--primer-color-brand, --primer-radius-medium, etc.) |
Quick Links by Task
| I want to… | See |
|---|---|
| Set up checkout | <primer-checkout> |
| Build a custom card form | <primer-card-form> |
| Display saved payment methods | <primer-vault-manager> |
| Handle payment success/failure | Events & Callbacks |
| Customize appearance | Styling Variables |
| Configure SDK behavior | SDK Options |