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.
This reference documents all components, events, and configuration options in the Primer Checkout Web SDK.
Component hierarchy
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. |
| 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 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 |
