GUIDE

Build a Stripe-Powered MVP with Claude Code

Go from zero to accepting real payments in an afternoon. Set up Stripe Checkout, webhooks, and a customer dashboard using Claude Code with exact prompts.

The only validation that matters is someone pulling out their credit card. Emails on a waitlist are nice. Twitter followers are nice. But money is the signal that can't be faked. I've helped founders in my ClaudeFluent training go from zero to accepting payments in a single afternoon using Claude Code. Here's the exact workflow.

We're building three things: a Stripe Checkout flow so people can pay you, webhook handling so your app knows when a payment lands, and a simple customer dashboard so paying users can see their account. Total build time: 3-4 hours if you're starting from scratch.

What You Need Before Starting

Two things. A Stripe account (free to create at https://dashboard.stripe.com/register) and Claude Code installed. If you haven't set up Claude Code yet, follow the setup guide. Takes 5 minutes.

Stripe gives you test mode keys out of the box. You won't charge real money until you flip to live mode. So there's zero risk while you build.

Scaffolding the Project

Open your terminal and fire up Claude Code:

mkdir my-saas-mvp && cd my-saas-mvp
claude

Here's the first prompt. Swap in your own product name and pricing:

Build a Next.js app with TypeScript and Tailwind CSS for a SaaS
product called "FormCraft" - a form builder for small businesses.

Set up the following:
1. A landing page with pricing (Starter $19/mo, Pro $49/mo)
2. Stripe Checkout integration - when users click a pricing button,
   redirect them to Stripe Checkout with the correct price
3. A success page after payment
4. A webhook endpoint at /api/webhooks/stripe that listens for
   checkout.session.completed events
5. Store customer data (email, stripe_customer_id, plan, status)
   in a local SQLite database using Prisma

Use Stripe's test mode. Create a .env.local file for:
- STRIPE_SECRET_KEY
- STRIPE_PUBLISHABLE_KEY
- STRIPE_WEBHOOK_SECRET
- NEXT_PUBLIC_APP_URL=http://localhost:3000

Add .env.local to .gitignore.

Claude Code will scaffold the entire project: Next.js config, Prisma schema, Stripe integration, API routes, and the landing page with pricing cards. This first generation takes about 4-5 minutes.

Setting Up Stripe Products

You need to create your products and prices in Stripe's dashboard. Go to https://dashboard.stripe.com/test/products and create two products with monthly recurring prices. Copy the price IDs (they look like price_1234abc).

Then tell Claude Code:

Here are my Stripe price IDs:
- Starter ($19/mo): price_starter123
- Pro ($49/mo): price_pro456

Update the pricing buttons to use these price IDs when creating
Stripe Checkout sessions.

Claude Code will wire the price IDs into the checkout flow. Each button now creates a real Stripe Checkout session with the correct price.

The Webhook: Knowing When Money Lands

Stripe Checkout handles the payment UI. But your app needs to know when a payment actually completes. That's what webhooks do. Stripe sends a POST request to your endpoint when something happens (payment succeeded, subscription canceled, etc.).

Claude Code already created the webhook route in the first prompt. But you need to connect Stripe to it for local testing. The Stripe CLI makes this easy:

Install the Stripe CLI and set up webhook forwarding to my
local dev server. Show me the exact commands to run.

Claude Code will walk you through installing the Stripe CLI and running:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

This gives you a webhook signing secret. Paste it into your .env.local as STRIPE_WEBHOOK_SECRET. Now every test payment triggers your webhook, and your app stores the customer data in SQLite.

Building the Customer Dashboard

Paying users need to see something after they pay. A dashboard with their account info, plan details, and the ability to manage their subscription:

Build a customer dashboard at /dashboard that:
1. Shows the customer's current plan and billing status
2. Displays their email and Stripe customer ID
3. Has a "Manage Subscription" button that redirects to
   Stripe's Customer Portal (use stripe.billingPortal.sessions.create)
4. Protect the route - redirect to the landing page if the user
   isn't authenticated

For auth, use a simple approach: after successful checkout, set an
HTTP-only cookie with the customer's email. Check that cookie on
the dashboard route. We'll add proper auth later.

Claude Code will build the dashboard page, the auth middleware, and wire up the Stripe Customer Portal. The portal is a massive time saver, as Stripe hosts the entire subscription management UI (plan changes, payment method updates, cancellation) so you don't have to build any of it.

Testing the Full Flow

Start your dev server and walk through the entire flow:

  1. Visit the landing page and click a pricing button
  2. Stripe Checkout opens. Use test card 4242 4242 4242 4242 with any future expiry and any CVC
  3. After payment, you land on the success page
  4. Visit /dashboard to see your account
  5. Click "Manage Subscription" to open Stripe's portal

If something breaks, paste the error back to Claude Code. I covered this debugging pattern in the best practices guide. 95% of the time, Claude Code fixes it in one round.

Common issues at this stage:

  • Webhook not firing: make sure stripe listen is running in a separate terminal
  • Signature verification failed: your webhook secret in .env.local doesn't match. Copy the secret from the stripe listen output
  • Database errors: run npx prisma db push to sync your schema

Upgrading Auth Before You Deploy

The cookie-based auth works for local testing but isn't production-ready. Before deploying, bolt on proper authentication:

Replace the cookie-based auth with NextAuth.js using the
Email provider (magic links). When a user signs up through
Stripe Checkout, their email should automatically work with
NextAuth. Link the NextAuth user to their Stripe customer record
in the database.

Claude Code will install NextAuth, set up the email provider, create the necessary API routes, and update the dashboard to use proper session management. Magic links mean no passwords to manage and no OAuth configuration.

Deploying to Vercel

Push to GitHub and deploy on Vercel. Tell Claude Code:

Initialize a git repo and create a .gitignore for Next.js.
Make sure .env.local and the SQLite database file are excluded.

On Vercel, you'll need to do two things:

  1. Add environment variables: your Stripe keys, webhook secret, NextAuth secret, and database URL
  2. Switch to a production database: SQLite doesn't work on Vercel's serverless functions. Tell Claude Code to "switch the database from SQLite to Supabase PostgreSQL" and it'll update the Prisma schema and connection string

Finally, add your production webhook URL in the Stripe dashboard at https://dashboard.stripe.com/test/webhooks. Point it to https://your-app.vercel.app/api/webhooks/stripe and select the checkout.session.completed event.

What You've Built

After an afternoon, you've got:

  • A landing page with real pricing that links to Stripe Checkout
  • Webhook handling that captures every successful payment
  • A customer database tracking who paid and what plan they're on
  • A dashboard where customers can manage their subscription
  • Authentication with magic links
  • Deployed to production on Vercel

That's a functional MVP that accepts money. You can share the link, point ads at it, or pitch it to beta users. The product itself might just be a "coming soon" message on the dashboard, but you're collecting real payments, which means you're collecting real validation.

The Prompting Pattern

Notice how every prompt follows the same structure: describe the component, specify the behavior, name the technologies. You never write Stripe API calls yourself. You never configure webhook signature verification. You tell Claude Code what should happen and it handles the implementation.

This pattern scales to anything. Payment processing today, email sequences tomorrow, admin panels next week. The how to use Claude Code guide covers the core interaction model if you want to sharpen your prompting.

Going from MVP to Product

Once you're collecting payments, the next moves are:

  • Build the actual product features. You've validated demand. Now build what people are paying for.
  • Add transactional emails. Welcome email, payment receipt, trial expiration warnings. Tell Claude Code to "set up transactional emails with Resend" and it'll handle the whole thing.
  • Set up a Stripe webhook for subscription cancellations. Update the user's status in your database when they churn.
  • Add an admin dashboard. Track signups, revenue, and churn. The internal dashboards guide covers this workflow.

Every one of these is another prompt to Claude Code. You've built the foundation. Everything else is incremental.

Get to the Credit Card Moment

Ideas are worth nothing until someone pays for them. The faster you get to that first transaction, the faster you learn whether your idea has legs. Claude Code collapses the distance between "I think people would pay for this" and "here's the checkout link."

Want hands-on training building real MVPs? ClaudeFluent is our premium program where I walk you through shipping full-stack apps with Claude Code. Payments, auth, dashboards, and deployment in live sessions. Stop brainstorming, start charging.

Related Guides

WANT MORE LIKE THIS?

Learn to build with Claude Code

6 hours of hands-on training. Build real projects. Ship without waiting on engineering.

View Class Details