> ## Documentation Index
> Fetch the complete documentation index at: https://crossmint-devin-1787949784-wallet-docs-two-concept-model.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Agent Cards

> Get your agent paying with agent cards in 15 minutes

Give agents permission to pay with a user's card using Crossmint's Agentic Payments API. This quickstart runs the [agent cards reference app](https://github.com/Crossmint/card-permissions-quickstart).

By the end you will have a running app where a user can sign in, save a card, register its supported rails, authorize an order intent, and mint secure card credentials.

<CardGroup cols={2}>
  <Card title="Try the live demo" icon="rocket" href="https://card-permissions-quickstart.vercel.app/">
    See the full flow in action without setting anything up locally.
  </Card>

  <Card title="Agent Cards Quickstart" icon="code" href="https://github.com/Crossmint/card-permissions-quickstart">
    Explore the full reference implementation for agents, payment methods, and agent cards.
  </Card>
</CardGroup>

## Prerequisites

* Node.js 20+ and pnpm
* A [Stytch](https://stytch.com) account (used as the auth provider in this example)

<Note>
  **Eligible Cards**

  You can currently use agent cards with Mastercard and eligible U.S.-issued Visa credit and debit cards.

  **Not supported for Visa:** non-US cards, business cards, prepaid cards, Chase cards, Fidelity cards.

  For AMEX and Ramp cards, [contact us](https://www.crossmint.com/contact).
</Note>

## Setup

<Steps>
  <Step title="Clone the repo and install dependencies">
    You can ask your agent to walk you through the setup to run this quickstart.

    ```bash theme={null}
    git clone https://github.com/Crossmint/card-permissions-quickstart.git
    cd card-permissions-quickstart
    pnpm install
    ```
  </Step>

  <Step title="Configure environment variables">
    Copy the example file and fill in the keys from the previous steps:

    ```bash theme={null}
    cp .env.example .env.local
    ```

    ```bash .env.local theme={null}
    NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=your-stytch-public-token
    NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY=your-crossmint-client-api-key
    ```
  </Step>

  <Step title="Get a Crossmint staging API key">
    Sign in to the <a href="https://staging.crossmint.com/signin?callbackUrl=/console" target="_blank">Crossmint Staging Console</a> and create a project.

    Staging keys come with **all scopes enabled by default**, so you don't need to configure anything else for the quickstart. Copy the key and paste it into your `.env.local`.
  </Step>

  <Step title="Set up Stytch">
    In the <a href="https://stytch.com/dashboard" target="_blank">Stytch dashboard</a>, in the **Test** environment of a **B2C** project:

    1. **Configuration → SDK Configuration → OAuth** — enable **Google** (Stytch's shared test client works, no Google Cloud setup needed).
    2. **Configuration → Redirect URLs** — add `http://localhost:3000` as both **Login** and **Signup**. Use exactly that, no trailing slash or `/callback`.
    3. **Project Settings → API Keys** — copy the **Public token** (`public-token-test-...`) into `NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN` in your `.env.local`.
  </Step>

  <Step title="Register Stytch as your auth provider in Crossmint">
    In the <a href="https://staging.crossmint.com/console/projects/apiKeys" target="_blank">Crossmint Staging Console</a>, under **3P Auth providers**:

    1. Select **Stytch** from the provider dropdown.
    2. Paste your Stytch **Project ID** (`project-test-...`, found in Stytch under **Project Settings → Project ID**).
    3. Leave **Verifier Id** as `sub` (default).

    Crossmint will start trusting JWTs minted by your Stytch project on subsequent SDK calls.
  </Step>

  <Step title="Run the dev server">
    ```bash theme={null}
    pnpm dev
    ```

    Open [http://localhost:3000](http://localhost:3000).
  </Step>
</Steps>

## Understanding the user flow

Once running, the app walks the user through six steps:

1. **Authenticate.** Sign in with Google via Stytch. The session JWT is bridged into the Crossmint SDK so every API call is scoped to the user.
2. **Save a card.** The `CrossmintPaymentMethodManagement` component collects the card in a PCI-compliant iframe and returns a `paymentMethodId`.
3. **Register the card.** Registration discovers the card's supported rails, such as Visa Intelligent Commerce or Mastercard Agent Pay. It grants no spending permission and requires no verification.
4. **Create an order intent.** The app creates an allowance with an amount, description, expiration, and—when already known—the merchant. The response can contain multiple rails, each with its own verification status and credential formats.
5. **Verify the rail you want to use.** If the selected rail has `status: "pending_verification"`, the `OrderIntentVerification` component runs its provider ceremony. Other rails do not need to be verified and can remain pending. A returning Visa user authenticates with the passkey already bound to the device.
6. **Mint credentials.** The app uses the selected rail's `rail` and `provider` and requests a credential for a specific amount. If the merchant was not set on the order intent, the app supplies it now. The response contains the secure one-time card number, expiration, and CVC.

Treat `rails` as a menu, not a checklist. Only the rail used to mint the credential must be `active`; unrelated rails do not block it.

## Next Steps

<CardGroup cols={2}>
  <Card title="Customize UI" icon="palette" href="/agents/payment-methods/cards/customize-verification-ui">
    Style the card and passkey verification modals to match your brand.
  </Card>

  <Card title="Agent Checkouts" icon="browser" href="/agents/agent-checkouts-quickstart">
    Let Crossmint drive a real browser and complete checkout on any site.
  </Card>
</CardGroup>