Skip to main content
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 CardsYou 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.
2

Configure environment variables

Copy the example file and fill in the keys from the previous steps:
.env.local
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

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.