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

# Primer Checkout

> A complete payment experience for your app

Primer Checkout is a drop-in payment UI that handles the complexity of accepting payments while giving you full control over the experience. Add it to your app in minutes, customize it to match your brand, and scale to new payment methods without rewriting your integration.

<img alt="Primer Documentation showcase of primer checkout components visual" src="https://goat-assets.production.core.primer.io/marketing/checkout/external-docs/primer-checkout/primer-checkout-card.png" />

## What you can do

* Accept any payment methods through a single integration
* Use a prebuilt, conversion-optimized UI or customize every component
* Handle security and compliance without extra work
* Add or remove payment methods without changing your frontend code

## Key capabilities

| Capability             | What It Means                                                 |
| ---------------------- | ------------------------------------------------------------- |
| **Single integration** | Add any payment method without writing payment-specific code  |
| **Prebuilt UI**        | Conversion-optimized components that work out of the box      |
| **Full customization** | Control styling, layout, and behavior through configuration   |
| **Security built-in**  | PCI compliance handled for you with secure hosted inputs      |
| **Multi-platform**     | Web (any framework), Android (Jetpack Compose), iOS (SwiftUI) |

## Design principles

### Works out of the box

Drop in a checkout component and you have a working payment form. No configuration required for the default experience. Primer handles validation, error display, 3DS challenges, redirects, and loading states automatically.

### Customizable without complexity

Change the look and feel through styling tokens. Rearrange components with layout customization. Add event handlers when you need custom behavior. Each layer of customization is optional — use only what you need.

### Stable integration

Your integration interacts with a stable public API. Internal changes stay internal — your code won't break when you update the SDK.

### Payment logic stays with Primer

You focus on the user experience. Primer handles the payment method logic, processor communication, and edge cases. Add new payment methods from the Dashboard without touching your frontend code.

### Platform availability

Primer Checkout is available on Web, iOS, and Android.

* The Web SDK is production-ready.
* iOS and Android are currently in beta (v3.0.0-beta, as of March 2026) — reach out to your Primer contact before integrating.
* React Native is supported via the existing SDK. Support for the new Primer Checkout experience is planned for later in 2026.

## How it works

1. Install the Primer Checkout SDK for your platform
2. Configure your checkout and payment methods
3. Embed the checkout in your application and start accepting payments

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/fafXux4KPxo" title="Primer Checkout Overview" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Explore StackBlitz examples

The examples below are for the Web SDK. iOS and Android examples are available in the platform-specific docs.

Try Primer Checkout directly in your browser with these interactive, editable examples:

<table>
  <thead>
    <tr>
      <th width="200">Example</th>
      <th>Description</th>

      <th width="150" />
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style={{ verticalAlign: 'middle' }}><strong>Basic checkout</strong></td>
      <td style={{ verticalAlign: 'middle' }}>Get started with a minimal checkout implementation using default styling</td>

      <td style={{ verticalAlign: 'middle' }}>
        <a href="https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-basic" target="_blank">
          <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" noZoom />
        </a>
      </td>
    </tr>

    <tr>
      <td style={{ verticalAlign: 'middle' }}><strong>Custom form layout</strong></td>
      <td style={{ verticalAlign: 'middle' }}>Build a custom payment form layout with reordered components and custom styling</td>

      <td style={{ verticalAlign: 'middle' }}>
        <a href="https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-custom-form" target="_blank">
          <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" noZoom />
        </a>
      </td>
    </tr>

    <tr>
      <td style={{ verticalAlign: 'middle' }}><strong>Custom sectioned layout</strong></td>
      <td style={{ verticalAlign: 'middle' }}>Organize payment methods into sections (Card, Quick Checkout, Alternative Methods)</td>

      <td style={{ verticalAlign: 'middle' }}>
        <a href="https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-custom-layout" target="_blank">
          <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" noZoom />
        </a>
      </td>
    </tr>

    <tr>
      <td style={{ verticalAlign: 'middle' }}><strong>Themed checkout</strong></td>
      <td style={{ verticalAlign: 'middle' }}>Explore different visual themes using CSS variables</td>

      <td style={{ verticalAlign: 'middle' }}>
        <a href="https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-themes" target="_blank">
          <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" noZoom />
        </a>
      </td>
    </tr>

    <tr>
      <td style={{ verticalAlign: 'middle' }}><strong>Vaulted payment methods</strong></td>
      <td style={{ verticalAlign: 'middle' }}>Save and reuse payment methods with Primer's vaulting functionality</td>

      <td style={{ verticalAlign: 'middle' }}>
        <a href="https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-vaulted" target="_blank">
          <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" noZoom />
        </a>
      </td>
    </tr>
  </tbody>
</table>

## Prerequisites

Before you start, ensure you have completed these prerequisites:

1. You're [ready to process payments](/get-started/overview)
2. [Checkout is configured](/checkout/checkout-builder) in your Primer Dashboard

## See also

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/checkout/primer-checkout/installation">
    Add Primer Checkout to your project
  </Card>

  <Card title="First Payment" icon="credit-card" href="/checkout/primer-checkout/first-payment">
    Accept your first payment
  </Card>

  <Card title="Core Concepts" icon="lightbulb" href="/checkout/primer-checkout/core-concepts">
    Understand how components work together
  </Card>

  <Card title="Customization" icon="palette" href="/checkout/primer-checkout/build-your-ui/styling-customization">
    Match the checkout to your brand
  </Card>
</CardGroup>