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

> What Primer Checkout supports out of the box, and platform availability across Web, iOS and Android.

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.

![Primer Documentation showcase of primer checkout components visual](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) — 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

[Primer Checkout Overview](https://www.youtube.com/embed/fafXux4KPxo)

## 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>**Basic checkout**</td>
      <td>Get started with a minimal checkout implementation using default styling</td>

      <td>
        [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-basic)
      </td>
    </tr>

    <tr>
      <td>**Custom form layout**</td>
      <td>Build a custom payment form layout with reordered components and custom styling</td>

      <td>
        [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-custom-form)
      </td>
    </tr>

    <tr>
      <td>**Custom sectioned layout**</td>
      <td>Organize payment methods into sections (Card, Quick Checkout, Alternative Methods)</td>

      <td>
        [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-custom-layout)
      </td>
    </tr>

    <tr>
      <td>**Themed checkout**</td>
      <td>Explore different visual themes using CSS variables</td>

      <td>
        [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-themes)
      </td>
    </tr>

    <tr>
      <td>**Vaulted payment methods**</td>
      <td>Save and reuse payment methods with Primer's vaulting functionality</td>

      <td>
        [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/primer-io/examples/tree/main/examples/primer-checkout-vaulted)
      </td>
    </tr>
  </tbody>
</table>

## Prerequisites

Before you start, ensure you have completed these prerequisites:

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

## See also

> [card] [Installation](https://primer.io/docs/checkout/primer-checkout/installation.md)
>
> Add Primer Checkout to your project

> [card] [First Payment](https://primer.io/docs/checkout/primer-checkout/first-payment.md)
>
> Accept your first payment

> [card] [Core Concepts](https://primer.io/docs/checkout/primer-checkout/core-concepts.md)
>
> Understand how components work together

> [card] [Customization](https://primer.io/docs/checkout/primer-checkout/build-your-ui/styling-customization.md)
>
> Match the checkout to your brand


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