Skip to main content

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.

Give agents permission to pay with a user’s card using Crossmint’s Agentic Payments API. This quickstart runs the card permissions reference app. By the end you will have a running app where a user can log in, save a card, verify it for agentic use, set spending rules, and allow an agent to pay — the agent receives a secure one-time card number, expiration, and CVC.

Try the live demo

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

Card Permissions Quickstart

Explore the full reference implementation for agents, payment methods, and card permissions.

​
Prerequisites

  • Node.js 20+ and pnpm
  • A Stytch account (used as the auth provider in this example)
Eligible CardsYou can currently use card permissions 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 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 card permission is bound to.
  3. Save a card. The CrossmintPaymentMethodManagement component collects the card in a PCI-compliant iframe and returns a paymentMethodId.
  4. Verify 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 pay with the card — saving alone is not enough.
  5. Set spending rules and allow payment. An order intent is created with two spending rules: 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 secure one-time 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.