> ## 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.

# SDK reference overview

> Complete reference of all Primer Checkout Web SDK components, events, and configuration options

This reference documents all components, events, and configuration options in the Primer Checkout Web SDK.

## Component hierarchy

> [tab] Without vault
>
> slot: name
>
> Exposes a customizable slot
>
> → name
>
> Default content, replaced when you customize the slot

> [tab] With vault
>
> slot: name
>
> Exposes a customizable slot
>
> → name
>
> Default content, replaced when you customize the slot

***

## Core components

| Component | Description |
| - | - |
| [`<primer-checkout>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-checkout) | **Root component**. Initializes the SDK, provides checkout context, and wraps all other components. This is the entry point. |
| [`<primer-main>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-main) | Optional state manager that handles checkout states (loading, success, error) and provides layout slots. |

***

## Payment method components

| Component | Description |
| - | - |
| [`<primer-payment-method>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-payment-method) | Renders a specific payment method (card, PayPal, Apple Pay, etc.) based on the `type` attribute. |
| [`<primer-payment-method-container>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-payment-method-container) | Container for filtering and organizing multiple payment methods using `include` and `exclude` attributes. |
| [`<primer-vault-manager>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-vault-manager) | Displays and manages saved (vaulted) payment methods for returning customers. |
| [`<primer-show-other-payments>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-show-other-payments) | Toggle button to show/hide additional payment methods. |

***

## Card form components

| Component | Description |
| - | - |
| [`<primer-card-form>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-card-form) | Container that provides context for card inputs. All card input components must be nested inside this. |
| [`<primer-input-card-number>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-card-number) | Secure hosted input for card number with automatic card network detection. |
| [`<primer-input-card-expiry>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-card-expiry) | Secure hosted input for expiration date (MM/YY). |
| [`<primer-input-cvv>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-cvv) | Secure hosted input for card security code. |
| [`<primer-input-card-holder-name>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-card-holder-name) | Input field for cardholder name. |
| [`<primer-card-form-submit>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-card-form-submit) | Submit button with built-in loading and disabled states. |
| [`<primer-input-label>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-label) | Label component for card inputs. |
| [`<primer-input-wrapper>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-input-wrapper) | Wrapper for styling and layout of card inputs. |
| [`<primer-billing-address>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-billing-address) | Collects billing address information for card payments. |

***

## Utility components

| Component | Description |
| - | - |
| [`<primer-error-message-container>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-error-message-container) | Displays payment error messages after failed transactions. |

***

## Configuration & events

| Reference | Description |
| - | - |
| [SDK Options](https://primer.io/docs/sdk/primer-checkout-web/sdk-options-reference.md) | Complete reference of all configuration options (`locale`, `card`, `vault`, `applePay`, etc.) |
| [Events Reference](https://primer.io/docs/sdk/primer-checkout-web/events-reference.md) | All events (`primer:ready`, `primer:state-change`, `primer:payment-success`, `primer:payment-failure`) and SDK instance methods |
| [Styling Variables](https://primer.io/docs/sdk/primer-checkout-web/styling-variables.md) | CSS variables for theming (`--primer-color-brand`, `--primer-radius-medium`, etc.) |

***

## Quick links by task

| I want to... | See |
| - | - |
| Set up checkout | [`<primer-checkout>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-checkout) |
| Build a custom card form | [`<primer-card-form>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-card-form) |
| Display saved payment methods | [`<primer-vault-manager>`](https://primer.io/docs/sdk/primer-checkout-web/components/primer-vault-manager) |
| Handle payment success/failure | [Events Reference](https://primer.io/docs/sdk/primer-checkout-web/events-reference.md) |
| Customize appearance | [Styling Variables](https://primer.io/docs/sdk/primer-checkout-web/styling-variables.md) |
| Configure SDK behavior | [SDK Options](https://primer.io/docs/sdk/primer-checkout-web/sdk-options-reference.md) |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.