How to integrate Stripe Subscriptions with NextJS 13? | A Guide to Stripe Webhooks

In this video, I will be talking about how to integrate Stripe Subscriptions using the Webhook API in your NextJS 13 application.
Demo: stripe-demo.livecode247.com
Final Code: github.com/kavinvalli/stripe-...
Starter Code: github.com/kavinvalli/stripe-...
00:00 - Intro
00:20 - Demo
03:08 - Setup from starter and explain
09:14 - Setup subscriptions data
11:33 - Setup Stripe API
13:14 - Setup Billing Page (UI)
18:57 - Prisma Schema for Stripe Data
22:05 - Workflow explanation
23:11 - Get user's subscription plan
29:23 - Subscription Button
33:50 - Server action for Stripe subscription
38:58 - Call server action
46:51 - Debugging stripe api key not found
48:59 - Found error
51:13 - Setup webhook
01:06:41 - Add subscription detail card
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kavinvalli

[@livecode247]

Basically the point of adding 86_400_000 at 25:44 is that the current_period_end is in epoch format, and 86400000 milliseconds comprises of a day. We want to check if the subscribed is valid, by checking if the end day + 1 day, is ahead of the current day. Hope that makes sense!

[@1val]

your videos have been the most helpful at the right times

[@livecode247]

Glad to be of help! Thank you!

[@ahmaddanesh1163]

Awesome explanation⚡ keep it up

[@livecode247]

Thank you, I will!

[@uixmat]

Fantastic video Kavin

[@livecode247]

Thank you so much Matt!

[@shreyojitdas9333]

this is awesom nobody explained this well

[@livecode247]

Thank you so much!

[@gamesWatafak]

Thanks for help!

[@ThomazMartinez]

One of the better Indian youtube videos, you talk more like from US/EU countries i like it

[@livecode247]

Thank you so much!

[@muazothman7416]

You are genuinely amazing!

[@livecode247]

Thank you so much!!

[@utpalgaming5983]

thank you bhai you really saved my day💖💖

[@livecode247]

Thank you for watching!

[@christopherkapic]

Great video, thank you!

[@livecode247]

Glad you liked it!

[@classyboy2000]

Thanks for this video! Super easy to follow. I got everything working locally but when I add a production webhook and try it out on my vercel deployment; (1) i get ` 401 (Unauthorized)` in the stripe webhook logs and (2) none of the logging (console.logs in my `src/app/api/webhooks/route.ts`) show up in the vercel deployment logs. It's like the request is being rejected before it even get's to the handler. Any ideas how I might diagnose or resolve this? All env vars are correct, I believe. I changed the `STRIPE_WEBHOOK_SECRET` to be the one from the webhook i set up in the strip dashboard

[@user-tj9iq3io7q]

Can you cover switching from one subscription to another subscription? And the best way to handle that.

[@user-yy7jv9yj5n]

subcription button is not update. it seems webhook/stripe route/ts page is not executing. what is the issue

[@KingKongHitDaBong]

man thanks for the detailed vid! i'm new to react & nextjs so figuring out the stripe subscriptions has been a nightmare. if im using clerk for auth what would i need to change?

[@livecode247]

Hey man, thank you! If you're using clerk, just one change is required. Instead of updating the prisma database, you update the clerk user metadata with the stripe subscription id, product id, date, etc

[@TheyCallMeFelix]

This video is awesome. You would get more views if it had chapters for the different sections. But great work

[@livecode247]

Glad you think so! Will add the chapters ASAP!

[@livecode247]

Added the chapters! Thank you for the feedback 😊

[@TheyCallMeFelix]

Great Video!@@livecode247 I do have one question how are you passing current userId to api route.ts im using supabase db and its not updateing the values because I need my userId as key to update?

[@TheyCallMeFelix]

Figured it out thank you great video!

[@waleedtahir9933]

Bhai bauhat achhe tutorials banate ho bus net band kar ke upload kia karo =

[@prashlovessamosa]

Thank you bahi

[@livecode247]

You're welcome bhai

[@HigherStudyAspirant]

Thanks but can we integrate our own html, css checkout page. I have seen many video but all of them are using pre-build stripe checkout page. I want my own page to be shown and process the payment

[@livecode247]

Maybe this helps? kzbin.info/www/bejne/rZfNfYOclLKIldU

[@LibraryOfTheOligarchs]

lmao @ 49:48 I can relate to the frustration! lol Happy Hacking!!!

[@MrProfessionalAI]

what extensions do you use for the shortcuts? like at 13:36

[@livecode247]

I think you're referring to Copilot here. It's this tool: github.com/features/copilot Is that what you're referring to or something else?

[@QtheCoder]

nice, do you use supabase?

[@livecode247]

Yes I do! Using it in a project currently

[@konidoniravirr6580]

Bhai, your work is great. I just subscribed it. but what about deployment? what about webhook api deployment? please reply me bhai. but your work just impressed me. :)

[@livecode247]

Works just like normal deployment 😊 Recently did it on a production project, and it didn't need any change

[@konidoniravirr6580]

@@livecode247But the expire time is only 90 days. after 90 days the key will expire? after expiration, we dont have any access how it is possible to continue bhai thank you for replying :) ?

[@ChesterRivas]

This is a good video dude.

[@livecode247]

Thank you so much!

[@cesargamer1231]

Insane!

[@livecode247]

Thank you so much!

[@shinchima]

what IDE are you using? good video btw

[@livecode247]

I'm using Neovim! Thank you so much!

[@user-vv6hf4qg3m]

get 405 method not allowed when using server action

[@piyushhsainii]

Bro can we do this without setting up webHook?

[@livecode247]

Nope, that's essential to this workflow since we need to know when data changes and keep our side up to date!

[@pradeepbisht3397]

25:44 can you share link of documentation?

[@livecode247]

Hey! I was going through stripe documentation and a lot of other places but couldn't find a decent explanation for this, so I've written it down in the pinned comment! Hope that helps :)

[@pradeepbisht3397]

@@livecode247 got it thank you

[@MrProfessionalAI]

can you make a discord server where we can ask you and other viewers of the video questions

[@livecode247]

Sure, I've been a little busy for some time with starting university. Once I get back to making videos consistently, I'll get this up. Thank you for the advice!

[@SankarKumar-on8tn]

loved it but could have been way better if u showed it in vscode. visibility would have been better

[@livecode247]

Thank you for the input. Will keep that in mind 😊

[@joshbedo8291]

weird this webhook setup doesn't seem to work for me

[@livecode247]

Hey! Could you share some more details? Will try to help as much as I can. Stripe webhooks does tend to be very annoying

[@joshbedo8291]

​@@livecode247 I got everything working but for some reason I can't get userId to be available in checkout.session.completed its available right before it but disappears. I got session.metadata.clerkId to save to db but for some reason metadata never saves to the customer in stripe.

[@joshbedo8291]

​@@livecode247 got it saving metadata on subscription but had to change to this const stripeSession = await stripe.checkout.sessions.create({ payment_method_types: ['card'], success_url: process.env.APP_URL! + '/settings', mode: 'subscription', client_reference_id: input.clerkId, billing_address_collection: 'auto', line_items: [ { price: input.stripePriceId, quantity: 1, }, ], subscription_data: { metadata: { clerkId: input.clerkId } } });

[@INVADE.00]

brother, i followed your video and got error 500 what if i don't use right apiVersion in stripe class>? const stripe = new Stripe(process.env.STRIPE_SECRET_KEY ?? "", { apiVersion: "2023-10-16", typescript: true, });