Agent Commerce Sample App

Let AI agents buy with your users' own cards.Your users approve every budget.

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

Three APIs. One approval screen that you host.

Visa Intelligent Commerce and Mastercard Agent Pay enforce each limit on the card network. Your users keep their points and rewards.

Works where your agents are

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.

Build it into your agent app

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, asks you how the experience should work, then builds it in your stack. The live app has a button that copies it too.

Add agentic commerce to my app with the Crossmint Agents APIs, so my users can buy on
any website with a budget they approve.

Use these sources:
- Crossmint docs index: https://docs.crossmint.com/llms.txt
- Agent cards: https://docs.crossmint.com/agents/cards-quickstart
- Agent Checkouts: https://docs.crossmint.com/agents/agent-checkouts-quickstart
- Signed-in stores: https://docs.crossmint.com/agents/checkouts/merchant-sessions
- 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, a CLI, or no agent at all.

Then ask me how the experience should work, with your suggested answer for each:
- Payment method: an agent card from a saved card, as in the reference app, or what
  the store offers at checkout, such as a saved card, Shop Pay, Klarna or PayPal.
- When my users add a payment method: at sign-up, in settings, or the first time
  a purchase needs one.
- When to create the order intent, the budget the user approves: before the
  purchase starts, or at the checkout's payment step for the exact total.
- How a purchase starts and checks out: the agent decides in a chat, the user taps
  a buy button, or a job runs on a schedule.
When I answer, propose a plan and wait for my OK before you write code.

Build these parts, in the shape I chose:
1. Payment method. Set up the one I chose. For a card, use the
   CrossmintPaymentMethodManagement component from @crossmint/client-sdk-react-ui.
   The card goes to Crossmint, never to my servers.
2. Agent cards, if I chose them. Create an order intent with an amount, a merchant
   and an expiry. The user picks a card and approves it in my UI, or at a link when
   there is no UI. 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 each form request with all its fields in one answer. Pay its
   payment step with the method I chose.
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. Signed-in stores. Let users sign in to a store during a checkout. Collect each
   protected field, such as the password, with CrossmintProtectedInput. Keep one
   browser profile per user, so the store stays signed in on later checkouts.

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 dev

Fill in your keys in apps/web/.env.local, then open http://localhost:3000. The comments in .env.example explain each variable.

FAQ

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.

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.

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.

What is inside

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.

License

MIT