Card Permissions Quickstart

Live Demo | Docs | See all quickstarts

Introduction

Give agents permission to pay with a user's card through Crossmint's Agentic Payments API. This quickstart demonstrates the full flow from user authentication to granting scoped card permissions with spending rules — for both human users and AI agents.

Learn how to:

• Authenticate a user via Stytch (Google OAuth)
• Create an agent to manage card payments
• Save a payment method via Crossmint's embedded UI
• Verify a card for agent-initiated payments with passkey verification
• Give card permissions with per-transaction, daily, and monthly spending rules
• Retrieve secure card numbers (card number, expiration, CVC)

Deploy

Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard.

Setup

1. Clone the repository and navigate to the project folder:

git clone https://github.com/Crossmint/card-permissions-quickstart.git && cd card-permissions-quickstart

2. Install all dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Set up the environment variables:

cp .env.example .env.local

4. Get a Crossmint client API key from here and a Stytch public token from the Stytch dashboard, then add them to the .env.local file:

NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=your_stytch_public_token
NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY=your_crossmint_client_api_key

5. Configure Stytch redirect URLs:

   In your Stytch dashboard, add http://localhost:3000/login as a redirect URL for both Login and Signup under OAuth.

6. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Using in production

1. Create a production API key.