Your platform has logins and a database, but right now it can't take a single dollar. By the end of this, someone can subscribe on your live site and get access automatically. Not a fake demo, a real signup.
Here's the plan
Connect Stripe
Create your product, price & coupon, by chat
Build the checkout & lock the paid content
Add your keys & register the webhook
Test a real $0 signup, end to end
The mental model
Four jobs, four different things do them.
This is where people get lost. Understand these four before you touch anything:
The MCP
Creates your Stripe stuff by chat: product, price, coupon.
Claude's code
Builds the Subscribe button and locks the paid content.
Keys in Vercel
Let your live site talk to Stripe.
Webhook + secret
How Stripe tells your site "they paid", and how your site trusts it.
What's a webhook? Web + hook. It's an automatic message from Stripe to your site the second someone pays. Stripe calls your website and says "this person just subscribed," and your site unlocks their access. The signing secret is the password on that call, so a scammer can't fake a payment and get in free.
Some steps are manual, creating keys, activating your account. That's not the tool being weak, that's the guardrail. You never want a robot that can mint its own keys to your money. Claude builds it; you hold the keys.
Before you start
Two things must already be true.
Your Stripe account is activatedBusiness info + bank added. One-time, and only you can do it, it's the law.
Your Supabase MCP is connectedFrom Week 1. In Claude Code, type /mcp and confirm supabase shows connected.
If your database says "Restoration in progress", your free Supabase went to sleep from inactivity (it pauses after ~7 days). Wait for it to finish, and if you're taking real payments, upgrade to Pro so it never sleeps again.
Step 1
1
Connect the Stripe MCP
Same move as the Supabase MCP in Week 1. In the terminal (the % prompt, not inside Claude), run:
claude mcp add --scope project --transport http stripe https://mcp.stripe.com/
Then launch Claude with claude, type /mcp → select stripe → Authenticate → the browser opens.
⚠️ On the consent screen: make sure it names your live account, and set permissions to Write, not Read. Pick Read and Claude can't build anything, and you'll redo it. Then click Authorize.
Back in Claude, type /mcp again, it should show 2 connected (supabase + stripe).
If you see "Unrecognized client_id": the login got stuck. Reset it clean, then re-authenticate:
claude mcp remove stripe -s project
claude mcp add --scope project --transport http stripe https://mcp.stripe.com/
Step 2 · the magic moment
2
Create your product, price & coupon, by chat
First, decide your offer. Rule of thumb: lead with monthly. Only offer yearly if you're truly committed to running this a full year, then discount it.
Paste into Claude · create the product + price
Using the Stripe MCP, create a recurring subscription product for my platform priced at $28 per month. Look at my repo and content to choose a fitting product name and short description yourself, don't ask me. Create it on my live Stripe account, then give me back the price ID (starts with price_). Create only the product and price for now.
It reads your site, names your product, sets the price, and gives you the price ID. Copy it, that's the anchor for everything next.
Paste into Claude · create the test coupon
Using the Stripe MCP, create one coupon that is 100% off, then create one promotion code called TESTFREE attached to it with a redemption limit of 100 so it can be reused for testing. Confirm it's active.
That 100%-off code is how you'll test a real subscription for zero dollars later. One coupon can have many codes, and a code can be reused, so you never need a pile of coupons.
⚠️ A 100%-off code on a live site is a free-access backdoor. If everyone uses TESTFREE, anyone who knows it can subscribe free on your live site. So: name yours something only you'd know (not TESTFREE), set a low redemption limit or an expiry, and delete or deactivate the coupon once you've finished testing.
Heads-up, the MCP works LIVE: the Stripe MCP always acts on your live account, no matter what the dashboard's Test-mode toggle says (that toggle only changes what you see). So your product, price, and coupon are created live, exactly what this course wants: live keys, tested safely with a $0 coupon.
Step 3
3
Claude builds the Subscribe button + gating
Now Claude writes the actual code, the Subscribe button, the checkout, the webhook that listens for payments, and the lock on your paid content. Swap in your real price ID.
Paste into Claude · the build prompt
Add Stripe subscriptions to my app. Payments happen on the platform, a logged-in user subscribes and their access is gated by payment. Before writing code, use the Stripe MCP implementation planner and check current Stripe docs so the API is up to date. Then build:
1. When a logged-in user clicks Subscribe, create a Stripe Checkout Session in subscription mode for price price_XXXX, and pass their Supabase user id in the session metadata and as client_reference_id. Enable allow_promotion_codes on the Checkout Session so the promo code field appears at checkout.
2. A webhook endpoint for checkout.session.completed and customer.subscription.created/updated/deleted. Verify the Stripe signature on every webhook and reject anything invalid. Make it idempotent.
3. When a subscription is active, mark that user subscribed in Supabase (a status column) using the service role key, server-side only. When canceled/unpaid, mark them unsubscribed.
4. Gate the paid content so only subscribed users see it.
5. Read all keys from environment variables, never hardcode them, never put secret keys in client-side code.
6. Create a .env.local listing every env variable with blank values for me to fill, and tell me which key to create in Stripe and which to get from Supabase.
Make all reasonable choices yourself and don't ask me questions you can answer from my repo.
Tip: describe the behavior to Claude ("Checkout Session," "webhook"), not your own labels. It built everything and left you a checklist of keys to fill, that's the next job.
⚠️ Don't lose allow_promotion_codes. Without it, the checkout page shows no promo-code box, so your TESTFREE code can't be entered and the $0 test can't run. It's in the build prompt above on purpose, keep it there.
Step 4 · the manual part
4
Fill the keys, in Vercel
Claude made a .env.local file with the keys left blank. Don't fill that file, it's only for running the app on your own computer, and we're going straight to live. Use it as your checklist, then add each key in Vercel → Settings → Environment Variables, that's what your live site actually reads.
Why it's manual: these are live secret keys, and Stripe and Supabase will never let a tool hand them out. That's the guardrail. So you grab each one from its source and paste it into Vercel.
STRIPE_SECRET_KEYStripe → Developers → API keys → reveal or create the Secret key (sk_live_…). It shows once, copy it immediately.
SUPABASE_SERVICE_ROLE_KEYSupabase → Settings → API → the service_role / secret key.
STRIPE_PRICE_IDYour price_… from Step 2. Claude may already know it, it created it.
Those three keys are all you add right now. There is no webhook secret yet, it doesn't exist until you create the webhook in Step 6. So once these three are in Vercel, deploy next (Step 5) before anything else, then come back and add the webhook secret in Step 7.
Did the Supabase marketplace integration in Week 1? Then your Supabase keys (SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, SUPABASE_SERVICE_ROLE_KEY) are already in Vercel, added automatically. Confirm the names match what your code expects, and if they're there, you only need to add the Stripe keys. (A "Sensitive" key showing no dots isn't empty, Vercel just hides those completely.)
Two boxes, two different things. In Vercel, the Name must be exactly the variable name, letters, digits and underscores only, no spaces (e.g. STRIPE_SECRET_KEY). The Value is the actual key (sk_live_…). Put the key in the Name box and you'll get an "invalid characters" error.
Keys live at their source, not in Vercel. Once you save a secret in Vercel it's hidden, you can't read it back. So always copy from Stripe or Supabase, where you can re-view or regenerate, never rely on Vercel to hand a key back.
Step 5
5
Deploy, push it live
Everything Claude built is only on your computer. Your site deploys from GitHub, so we push it and Vercel puts it live. Remember: a change on your computer is not a change on your site.
Paste into Claude
Commit and push all the changes to GitHub so Vercel deploys to production. When it's live, tell me the live site URL and the exact full URL of the Stripe webhook endpoint you built.
Check Vercel → Deployments → newest is Ready (green). Copy that webhook URL, Stripe needs it next.
Step 6 · you do this by hand
6
Register the webhook in Stripe
Now you tell Stripe where to send the "they paid" message. This part is manual, and it should be, you're pointing Stripe straight at your site.
Make sure Stripe is in LIVE mode (top toggle)
Top Search → type webhooks → under Workbench, click Create a webhook (or Webhooks → + Add destination)
Event destination scope → Your account
API version → leave default. Then select these four events:
Continue → destination type Webhook endpoint → Continue
Endpoint URL → paste your webhook URL from Step 5 → name it → Create destination
Open the endpoint → Click to reveal the signing secret → copy the whsec_…
Step 7 · don't skip the redeploy
7
Add the secret + REDEPLOY
Last key. The webhook secret goes in, and then you have to redeploy. This is the number one thing people miss.
Add whsec_… in Vercel as STRIPE_WEBHOOK_SECRET — that's the one that matters for your live site. (.env.local is optional, only if you also run locally.)
Vercel → Deployments → newest → ⋯ → Redeploy → wait for green
⚠️ Environment changes don't take effect until you REDEPLOY. Skip this and it looks broken when it isn't.
Step 8 · the payoff
8
The $0 test + 3-point proof
Moment of truth. A real subscription, for zero dollars, on the live site.
Live site → log in → Subscribe → at checkout, Add promotion code → TESTFREE → total $0.00 → complete
It should drop you right back onto the site with your paid content unlocked. But don't trust the screen, prove it three ways:
✅ Your site, the paid content is unlocked
✅ Stripe → Webhooks → your endpoint, a green 200 on checkout.session.completed
✅ Supabase → that user's row, subscribed = true
Close
That's real payments, live.
Notice how we proved it, not a green checkmark, not "it deployed." A real person completing the real flow. A green build proves nothing. That is the proof.
Next video: we build the funnel so people actually show up to subscribe.