> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser Checkout

> Pay at any website's checkout using a secure card number and a browser-automation agent.

Card permissions work anywhere cards are accepted. When your agent needs to buy from a website that does not have an API, it can drive a real browser session and fill in the checkout form with secure card numbers.

This guide explains the end-to-end flow: saving a card, giving a card permission, and using a browser automation tool like <a href="https://docs.stagehand.dev/" target="_blank">Stagehand</a> or <a href="https://browser-use.com/" target="_blank">Browser Use</a> to complete the purchase.

<Info>For supported merchants (Amazon, Shopify stores, US only), use [Fast Checkout](/agents/payment-flows/worldstore/inventory) instead — it is a single API call with no browser needed.</Info>

## How it works

The key idea: **the agent never sees the user's real card.** It receives a scoped card permission — limited by amount, merchant, and duration — and pays using a secure one-time card number. If the card is compromised or the agent misbehaves, the blast radius is contained.

## Prerequisites

* A saved and verified card. See the [Cards setup guide](/agents/cards-quickstart).
* An active card permission (order intent). See [Give Card Permission](/agents/payment-methods/cards/create-card-permissions).
* A browser automation tool: <a href="https://docs.stagehand.dev/" target="_blank">Stagehand</a> or <a href="https://browser-use.com/" target="_blank">Browser Use</a>.

## Steps

<Steps>
  <Step title="Save a card and set up a card permission">
    The user saves their card via Crossmint's PCI-compliant UI. The card is verified for agentic use, and a card permission is created with spending rules (amount, merchant, duration). The user approves via passkey.

    For the full setup, see:

    1. [Save a Card](/agents/payment-methods/cards/save-card)
    2. [Verify a Card](/agents/payment-methods/cards/enroll-card)
    3. [Give Card Permission](/agents/payment-methods/cards/create-card-permissions)
  </Step>

  <Step title="Retrieve secure card numbers">
    When the agent is ready to make a purchase, it fetches the secure card numbers scoped to the specific merchant:

    ```typescript theme={null}
    const BASE_URL = "https://staging.crossmint.com/api/unstable";

    const response = await fetch(
        `${BASE_URL}/order-intents/${orderIntentId}/credentials`,
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-API-KEY": CROSSMINT_API_KEY,
                Authorization: `Bearer ${jwt}`,
            },
            body: JSON.stringify({
                merchant: {
                    name: "Example Store",
                    url: "https://www.example-store.com",
                    countryCode: "US",
                },
            }),
        }
    );

    const { card } = await response.json();
    // card.number, card.expirationMonth, card.expirationYear, card.cvc
    ```

    Each credential fetch returns a fresh, merchant-scoped secure card number. If leaked, it cannot be reused at a different merchant.

    See [Retrieve Secure Card Numbers](/agents/payment-methods/cards/retrieve-card-permissions) for the full API reference.
  </Step>

  <Step title="Navigate the checkout with a browser automation tool">
    There are several ways to drive a checkout session, and the right one depends on your use case — direct DOM control, LLM-driven autonomous browsing, or your own framework. **In every case the integration with Crossmint is the same:** you fetch a fresh, merchant-scoped secure card number with the snippet above and feed those credentials into whichever tool runs the browser.

    <CodeGroup>
      ```typescript Stagehand theme={null}
      import { Stagehand } from "@browserbasehq/stagehand";

      const stagehand = new Stagehand({ env: "BROWSERBASE" });
      await stagehand.init();

      const page = stagehand.page;
      await page.goto("https://www.example-store.com/checkout");

      await page.act(`Fill in the checkout form with:
      - Card number: ${card.number}
      - Expiration: ${card.expirationMonth}/${card.expirationYear}
      - CVC: ${card.cvc}`);

      await page.act("Submit the order");
      await page.observe("Wait for the order confirmation page");

      await stagehand.close();
      ```

      ```python Browser Use theme={null}
      from browser_use import Agent
      from langchain_openai import ChatOpenAI

      agent = Agent(
          task=f"""Go to https://www.example-store.com/checkout and complete the purchase.
          Use these card details:
          - Card number: {card_number}
          - Expiration: {exp_month}/{exp_year}
          - CVC: {cvc}""",
          llm=ChatOpenAI(model="gpt-5.5"),
      )

      result = await agent.run()
      ```
    </CodeGroup>
  </Step>
</Steps>

## When to use Browser Checkout vs Fast Checkout

|                        | Browser Checkout                                    | Fast Checkout                                         |
| ---------------------- | --------------------------------------------------- | ----------------------------------------------------- |
| **Coverage**           | Any website that accepts cards                      | Amazon, Shopify stores (US only)                      |
| **How it works**       | Agent drives a real browser session                 | Single API call, no browser needed                    |
| **Latency**            | Higher — page loads, form filling, CAPTCHA handling | Lower — direct API                                    |
| **Reliability**        | Can break when sites change their DOM               | Stable API contract                                   |
| **Stablecoin support** | No — cards only                                     | Yes — can pay with stablecoins on card-only merchants |

**Use Browser Checkout** when the merchant is not supported by Fast Checkout — it works anywhere a card is accepted.

**Use [Fast Checkout](/agents/payment-flows/worldstore/inventory)** when the merchant is supported — it is faster, more reliable, and supports stablecoin payments.

## Learn more

<CardGroup cols={2}>
  <Card title="Cards quickstart" icon="credit-card" href="/agents/cards-quickstart">
    Full card flow: save, verify, give permission, and retrieve.
  </Card>

  <Card title="Fast Checkout" icon="bolt" href="/agents/payment-flows/worldstore/inventory">
    Skip the browser entirely for supported merchants.
  </Card>

  <Card title="How Agents Pay" icon="book" href="/agents/how-agents-pay">
    The full mental model for agent payments.
  </Card>
</CardGroup>