An open source sample app by Crossmint. Try it live, then build the same experience into your own agent app with one prompt.
Try it live · Read the docs · Talk to sales
Visa Intelligent Commerce and Mastercard Agent Pay enforce each limit on the card network. Your users keep their points and rewards.
The same APIs run every experience:
- Your own app. Add components to save cards, approve budgets and show receipts in your chat.
- Messaging apps. On iMessage, WhatsApp or Instagram, the agent sends a link. The user approves on a page that you host.
- MCP hosts. Add one URL to Claude, ChatGPT or Cursor. OAuth signs the user in the first time.
- Terminal agents. A CLI and a skill for Claude Code, Codex and other coding agents.
See every experience live at agent-commerce.demos-crossmint.com. Purchases in the live app are real.
Open your own app's repository in Claude Code, Cursor or Codex, and paste this prompt. Your coding agent reads the Crossmint docs and this sample app, then builds the same flows in your stack. The live app has a button that copies it too.
Show the prompt
Add agentic commerce to my app with the Crossmint Agents APIs. My users save a card
once. When my agent needs to pay, it asks for a budget, the user approves it inside my
app, and the agent buys on any website.
Use these sources:
- Crossmint docs index: https://docs.crossmint.com/llms.txt
(or add the docs MCP server: https://docs.crossmint.com/mcp)
- Agent cards: https://docs.crossmint.com/agents/cards-quickstart
- Agent Checkouts: https://docs.crossmint.com/agents/agent-checkouts-quickstart
- A working reference app: https://github.com/Crossmint/agent-commerce-sample-app
(its HTTP API contract is in docs/API.md)
First, read my codebase. Tell me my framework, my auth provider, and where my agent
runs: an in-app chat, a messaging bot, an MCP server or a CLI. Then propose a plan
and wait for my OK before you write code.
Build these parts:
1. Save a card with the CrossmintPaymentMethodManagement component from
@crossmint/client-sdk-react-ui. The card goes to Crossmint, never to my servers.
2. Agent cards. When the agent needs money, create an order intent with an amount,
a merchant and an expiry. Show an approval screen in my app where the user picks
a card and approves. Run OrderIntentVerification when the card rail needs it.
3. Agent Checkouts. Start a run at a product URL with a max cost and stream its
messages. Answer its form requests. Pay its payment step with an agent card for
the exact amount. Collect store passwords with CrossmintProtectedInput.
4. Buyer details. Save the user's name, contact and shipping address as a buyer
profile, so checkouts do not stop to ask for them.
5. Agent tools. Give my agent tools to list saved cards, request an agent card,
start a checkout and answer it. Show each approval as a component in my UI, or
as a link when the agent has no UI.
Rules:
- The model never sees a full card number, a CVC or a password.
- Nothing is paid until the user approves the budget.
- The Crossmint server key stays on my server. Card and order-intent calls use the
client key with the signed-in user's JWT.
- Agent Checkouts need a production server key with the agent-checkouts scopes,
and the x-crossmint-user-id header on every call.
Run this sample app locally instead
You need a Crossmint project (Agent Checkouts need a production server key) and a Stytch project for user login. A Postgres URL and an Anthropic or OpenAI key are optional.
git clone https://github.com/Crossmint/agent-commerce-sample-app.git
cd agent-commerce-sample-app
pnpm install
pnpm turbo run build --filter='./packages/*'
cp .env.example apps/web/.env.local
pnpm devFill in your keys in apps/web/.env.local, then open http://localhost:3000. The comments in .env.example explain each variable.
How is this different from Stripe Link?
Link is a platform your users log into. This is a white-label experience embedded in your own app.
- It stays your app: your users, your design, no second login and no hand-off to somebody else's platform.
- These are agent cards, not the one-time-use cards Link issues. They run on Visa Intelligent Commerce and Mastercard Agent Pay.
- They are your users' own cards, scoped and enforced at the network level, so your users keep their points and rewards.
- Bank statements read as the merchant charging them directly, not as a Stripe charge.
- Refunds and chargebacks go straight to the merchant, with no Stripe in the middle.
Which card networks are supported?
Visa Intelligent Commerce and Mastercard Agent Pay for enforced limits, plus an encrypted-card fallback where the limit is advisory. Union Pay and AMEX are coming.
Is it production ready?
It is a sample app. It runs against production Crossmint keys and real cards, and it shows the flows end to end, but review it before shipping it to your users.
| Path | What it is |
|---|---|
apps/web |
The Next.js site: the landing page, the app at /app, the HTTP API and the MCP endpoint. |
packages |
The code behind the site: the Crossmint client, auth, API handlers, React components, the MCP server and the CLI. They are workspace packages, not published to npm. |
skills/agent-commerce |
A skill that teaches coding agents to use the CLI. |
plugins |
Claude Code and Cursor plugins with the hosted MCP server and the skill. |
docs/API.md |
The HTTP API contract. |


