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.

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.

Try the live demo

See the full flow in action without setting anything up locally.

Agent Cards Quickstart

Explore the full reference implementation for agents, payment methods, and agent cards.

Prerequisites

• Node.js 20+ and pnpm
• A Stytch account (used as the auth provider in this example)

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.

Setup

1. Clone the repo and install dependencies

   You can ask your agent to walk you through the setup to run this quickstart.

   git clone https://github.com/Crossmint/card-permissions-quickstart.git
   cd card-permissions-quickstart
   pnpm install
   
2. Configure environment variables

   Copy the example file and fill in the keys from the previous steps:

   cp .env.example .env.local
   

   .env.local

   NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=your-stytch-public-token
   NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY=your-crossmint-client-api-key
   
3. Get a Crossmint staging API key

   Sign in to the Crossmint Staging Console 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.

4. Set up Stytch

   In the Stytch dashboard, 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.
5. Register Stytch as your auth provider in Crossmint

   In the Crossmint Staging Console, 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.

6. Run the dev server

   pnpm dev
   

   Open http://localhost:3000.

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

Customize UI

Style the card and passkey verification modals to match your brand.

Agent Checkouts

Let Crossmint drive a real browser and complete checkout on any site.