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

export const PRIMER_CHECKOUT_HIERARCHY_WITH_VAULT = [{
  name: 'primer-checkout',
  slots: ['main'],
  children: [{
    name: 'primer-main',
    goesInto: 'main',
    slots: ['payments', 'checkout-complete'],
    children: [{
      name: 'primer-vault-manager',
      goesInto: 'payments',
      slots: ['vault-empty-state', 'submit-button']
    }, {
      name: 'primer-show-other-payments',
      goesInto: 'payments',
      slots: ['show-other-payments-toggle-button', 'other-payments'],
      children: [{
        name: 'primer-payment-method',
        goesInto: 'other-payments',
        note: '× N'
      }]
    }, {
      name: 'primer-error-message-container',
      goesInto: 'payments'
    }, {
      name: 'primer-checkout-complete',
      goesInto: 'checkout-complete'
    }]
  }]
}];

export const PRIMER_CHECKOUT_HIERARCHY = [{
  name: 'primer-checkout',
  slots: ['main'],
  children: [{
    name: 'primer-main',
    goesInto: 'main',
    slots: ['payments', 'checkout-complete'],
    children: [{
      name: 'primer-vault-manager',
      goesInto: 'payments'
    }, {
      name: 'primer-show-other-payments',
      goesInto: 'payments',
      slots: ['other-payments'],
      children: [{
        name: 'primer-payment-method',
        goesInto: 'other-payments',
        note: '× N'
      }]
    }, {
      name: 'primer-error-message-container',
      goesInto: 'payments'
    }, {
      name: 'primer-checkout-complete',
      goesInto: 'checkout-complete'
    }]
  }]
}];

export const ComponentTree = ({nodes, showLegend = true}) => {
  const renderNode = (node, depth = 0, isLast = true, prefix = '') => {
    const connector = depth === 0 ? '' : isLast ? '\u2514\u2500\u2500' : '\u251c\u2500\u2500';
    const childPrefix = prefix + (depth === 0 ? '' : isLast ? '    ' : '\u2502   ');
    const hasSlots = node.slots && node.slots.length > 0;
    const goesInto = node.goesInto;
    return <div key={node.name + depth} style={{
      fontFamily: 'var(--font-mono, monospace)',
      fontSize: '14px',
      lineHeight: '2'
    }}>
        <div style={{
      display: 'flex',
      alignItems: 'center',
      whiteSpace: 'nowrap'
    }}>
          <span className="component-tree-connector">{prefix}{connector}</span>
          {depth > 0 && <span style={{
      width: '8px'
    }} />}
          <span className="component-tree-name">{node.name}</span>
          {goesInto && <span className="component-tree-goes-into">
              {'\u2192'} {goesInto}
            </span>}
          {hasSlots && node.slots.map(slotName => <span key={slotName} className="component-tree-slot">
              slot: {slotName}
            </span>)}
          {node.note && <span className="component-tree-note">
              {node.note}
            </span>}
        </div>
        {node.children && node.children.map((child, i) => renderNode(child, depth + 1, i === node.children.length - 1, childPrefix))}
      </div>;
  };
  return <div className="component-tree-container">
      <div>
        {nodes.map((node, i) => renderNode(node, 0, i === nodes.length - 1, ''))}
      </div>
      {showLegend && <div className="component-tree-legend">
          <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '6px'
  }}>
            <span className="component-tree-slot">
              slot: name
            </span>
            <span>Exposes a customizable slot</span>
          </div>
          <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '6px'
  }}>
            <span className="component-tree-goes-into">
              {'\u2192'} name
            </span>
            <span>Default content, replaced when you customize the slot</span>
          </div>
        </div>}
    </div>;
};

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

## Component hierarchy

<Tabs>
  <Tab title="Without vault">
    <ComponentTree nodes={PRIMER_CHECKOUT_HIERARCHY} />
  </Tab>

  <Tab title="With vault">
    <ComponentTree nodes={PRIMER_CHECKOUT_HIERARCHY_WITH_VAULT} />
  </Tab>
</Tabs>

***

## Core components

| Component                                                                  | Description                                                                                                                  |
| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| [`<primer-checkout>`](/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>`](/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>`](/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>`](/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>`](/sdk/primer-checkout-web/components/primer-vault-manager)                       | Displays and manages saved (vaulted) payment methods for returning customers.                             |
| [`<primer-show-other-payments>`](/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>`](/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>`](/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>`](/sdk/primer-checkout-web/components/primer-card-form/primer-input-card-expiry)          | Secure hosted input for expiration date (MM/YY).                                                       |
| [`<primer-input-cvv>`](/sdk/primer-checkout-web/components/primer-card-form/primer-input-cvv)                          | Secure hosted input for card security code.                                                            |
| [`<primer-input-cardholder-name>`](/sdk/primer-checkout-web/components/primer-card-form/primer-input-card-holder-name) | Input field for cardholder name.                                                                       |
| [`<primer-card-form-submit>`](/sdk/primer-checkout-web/components/primer-card-form/primer-card-form-submit)            | Submit button with built-in loading and disabled states.                                               |
| [`<primer-input-label>`](/sdk/primer-checkout-web/components/primer-card-form/primer-input-label)                      | Label component for card inputs.                                                                       |
| [`<primer-input-wrapper>`](/sdk/primer-checkout-web/components/primer-card-form/primer-input-wrapper)                  | Wrapper for styling and layout of card inputs.                                                         |
| [`<primer-billing-address>`](/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>`](/sdk/primer-checkout-web/components/primer-error-message-container) | Displays payment error messages after failed transactions. |

***

## Configuration & events

| Reference                                                       | Description                                                                                                                     |
| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| [SDK Options](/sdk/primer-checkout-web/sdk-options-reference)   | Complete reference of all configuration options (`locale`, `card`, `vault`, `applePay`, etc.)                                   |
| [Events Reference](/sdk/primer-checkout-web/events-reference)   | All events (`primer:ready`, `primer:state-change`, `primer:payment-success`, `primer:payment-failure`) and SDK instance methods |
| [Styling Variables](/sdk/primer-checkout-web/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>`](/sdk/primer-checkout-web/components/primer-checkout)                    |
| Build a custom card form       | [`<primer-card-form>`](/sdk/primer-checkout-web/components/primer-card-form/primer-card-form) |
| Display saved payment methods  | [`<primer-vault-manager>`](/sdk/primer-checkout-web/components/primer-vault-manager)          |
| Handle payment success/failure | [Events Reference](/sdk/primer-checkout-web/events-reference)                                 |
| Customize appearance           | [Styling Variables](/sdk/primer-checkout-web/styling-variables)                               |
| Configure SDK behavior         | [SDK Options](/sdk/primer-checkout-web/sdk-options-reference)                                 |