Skip to content

Repository files navigation

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


A user saves a card. An agent asks for a $10 budget at Starbucks. The user approves with a passkey, and the agent buys a latte on starbucks.com.

Three APIs. One approval screen that you host.

The agent asks for a $10 Starbucks budget. The user adds a card and approves it. The agent orders a latte on starbucks.com, gets the budget approved at the payment step, and shows the receipt. Amazon asks the agent to sign in. The user types the password once, and the agent places the order.
Save cards. Approve budgets.
The card goes straight into Crossmint's PCI vault. It never touches your servers. The agent asks for an amount, a store and an expiry. The user approves once.
Buy on any website.
One call to Crossmint Agent Checkouts buys a product, books a table or a flight, or gets event tickets. It works with UCP and with any browser checkout.
Sign in to stores.
When a store asks for a login, the user types it once. It is encrypted, only that store uses it, and the agent never sees it.

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, 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 dev

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

FAQ

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.

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

About

An open source sample app for agentic commerce on the Crossmint Agents APIs.

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages