Skip to main content
Issue virtual credit cards on behalf of a user with Crossmint’s Agentic Payments API. This quickstart runs the virtual cards reference app. By the end you’ll have a running app where a user can log in, save a real card, authorize an agent, and get back a virtual card — number, expiration, and CVC.

Try the live demo

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

Virtual Cards Quickstart

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

​
Prerequisites

  • Node.js 20+ and pnpm
  • A Stytch account (used as the auth provider in this example)
Eligible CardsYou can currently create virtual cards only with eligible U.S.-issued Visa credit and debit cards.Not supported: non-US cards, business cards, prepaid cards, Chase cards, Fidelity cards.For Mastercard, 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/virtual-cards-quickstart.git
cd virtual-cards-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 five 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. Register an agent. Click Create agent to get an agentId — the handle every virtual card is bound to.
  3. Save a card. The CrossmintPaymentMethodManagement component collects the card in a PCI-compliant iframe and returns a paymentMethodId.
  4. Enroll the card for agentic use. A one-time email code + passkey ceremony links the saved card to the agentic card rails. This is what authorizes agents to issue virtual cards against it — saving alone is not enough.
  5. Issue a virtual card. An order intent is created with two mandates: maxAmount of 150 USD per weekly period and a free-text description. The user taps their passkey to authorize the spend, the app fetches credentials with the merchant info, and the virtual card number, expiration, and CVC are displayed.

​
Next Steps

Customize UI

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

Fast Checkout

Replace browser-driving with a single API call for Amazon, Shopify, and more.

Browser Checkout

Have the agent drive a real browser and complete checkout on any site.