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

# 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. If no card-network rail is usable, the response also includes an `encrypted-card` rail that is active immediately (in production, only for projects with encrypted card access enabled).
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. For the `encrypted-card` rail, minting takes an RSA public key instead and returns the saved card as a JWE for the agent to decrypt locally.

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>