Component hierarchy
- Without vault
- With vault
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-card-holder-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 Reference | All events (primer:ready, primer:state-change, primer:payment-success, primer:payment-failure) and SDK instance methods |
| 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 Reference |
| Customize appearance | Styling Variables |
| Configure SDK behavior | SDK Options |