Ship a Stripe Checkout with Cursor or Claude

What you'll learn

• How to let Cursor or Claude add Stripe Checkout to a Next.js App Router app with one prompt
• How to take a test payment with card 4242… and confirm it in the Stripe Dashboard

Prerequisites

• A free Stripe account in test mode
• A Next.js App Router app you can run locally
• Cursor or Claude Code

The idea

You set up Stripe access (MCP or test keys). Your coding agent builds the Checkout Session route, button, and success/cancel pages. You click through once with a test card and check the Dashboard.

Steps

1. Connect Stripe (pick the easy path)

Easiest: connect Stripe’s official MCP, then let the agent talk to Stripe for you.

In Cursor, add this to ~/.cursor/mcp.json (or use the Install in Cursor link on Stripe’s MCP docs):

{
  "mcpServers": {
    "stripe": {
      "url": "https://mcp.stripe.com"
    }
  }
}

Authenticate with Stripe (OAuth) and stay in a sandbox / test account.

For Claude Code:

claude mcp add --transport http stripe https://mcp.stripe.com/
claude /mcp

Fallback (no MCP): open API keys in test mode and put these in .env.local:

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

Restart the dev server after changing env files. Never commit secret keys.

2. Paste this one prompt

In Cursor Agent or Claude Code, from your Next.js repo root:

Add Stripe Checkout to this Next.js App Router app in test mode.

1. Install the stripe package if needed.
2. Create app/api/checkout/route.ts that uses STRIPE_SECRET_KEY to create a Checkout Session (mode: 'payment') with a simple one-off price_data product (for example £9 GBP or $9 USD), success_url at ${origin}/success?session_id={CHECKOUT_SESSION_ID}, and cancel_url at ${origin}/cancel. Return { url: session.url } (or redirect to it).
3. Add a “Pay with Stripe” button that POSTs to /api/checkout and sends the browser to the returned URL.
4. Add simple app/success/page.tsx and app/cancel/page.tsx. Keep it minimal. Server-only secret key. No subscriptions, Tax, or webhooks yet. If Stripe MCP is connected, use it for docs or to create a test Product/Price; otherwise use price_data inline and the keys in .env.local.

3. Run and pay with a test card

npm run dev

Click Pay with Stripe. On the Stripe-hosted page, pay with:

• Card: 4242 4242 4242 4242
• Any future expiry, any CVC, any postcode

4. Confirm it worked

You should land on /success. In the Stripe Dashboard (test mode) under Payments, you should see the successful payment.

Common mistakes

• Using live keys while learning. Stay on sk_test_ / pk_test_.
• Putting STRIPE_SECRET_KEY in a Client Component or a NEXT_PUBLIC_ variable.
• Forgetting to restart Next.js after editing .env.local.

Going further

When you are ready, add a webhook for checkout.session.completed so fulfilment does not rely on the success page alone, then switch to live mode with live keys and a real Price in the Dashboard. See Stripe Checkout and webhooks.