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
claudeHere'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/stripeThis 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:
- Visit the landing page and click a pricing button
- Stripe Checkout opens. Use test card
4242 4242 4242 4242with any future expiry and any CVC - After payment, you land on the success page
- Visit /dashboard to see your account
- 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 listenis running in a separate terminal - Signature verification failed: your webhook secret in .env.local doesn't match. Copy the secret from the
stripe listenoutput - Database errors: run
npx prisma db pushto 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:
- Add environment variables: your Stripe keys, webhook secret, NextAuth secret, and database URL
- 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.