Stripe Payments w/ Nextjs

Tutorial on how you can add payments into your application in minutes.
Links:
Nextjs: nextjs.org/docs/getting-start...
Stripe CLI: stripe.com/docs/stripe-cli
Stripe register a webhook: stripe.com/docs/development/d...
Github: github.com/JeremyPersing/stri...
Timestamps
00:00 - 0:21 Intro
00:22 - 2:21 Creating Nextjs project
2:22 -4:17 Creating a payment link
4:18 -5:51 Implement payment link
5:52 -10:14 Create webhook endpoint
10:15 - 11:07 Testing
11:08 - 12:14 How to go live

[@jeremypersing4484]

Check out my video on how to use Stripe with Nextjs 14 and the App router: kzbin.info/www/bejne/d3m1c5KXYtmChMk

[@harshshukla4567]

I have been using subscription mode but don't know how to use payment mode, by watching your code i change my code little bit and it works, thanks a lot

[@jeremypersing4484]

Glad I could help! Payments are pretty tricky but the payment button integration makes it a lot simpler.

[@agoodjavascriptvlog3466]

Really useful video, thanks. You saved me

[@jeremypersing4484]

Thank you for the comment. I’m glad I could help

[@harishgangadharappa9715]

Hi Jeremy, thank you. it was super useful. Can you also show an example how you register a website and add webhook credentials. Thanks

[@christywang7685]

Thanks for sharing! May I know if there is any method to store user payment info into mongoDB?

[@pedrominicz]

Good video. Would've been better had you used the app router.

[@seanharper5025]

Curious for an explanation on why raw-body is needed, as I don't see it being used in other tutorials. Thanks

[@jeremypersing4484]

Maybe things have changed, but at the time of recording this it was needed in the code for it to work successfully.

[@jeremypersing4484]

If you want to fill out the user's email during checkout from your site, append this to the end of your payment link "?prefilled_email=user_email", with the user_email being the user's email. Video here for an example: kzbin.info/www/bejne/sIXVgJ9vabOFkKc. Here's documentation if you want to see more things you can prefill stripe.com/docs/payment-links/customer-info#customize-checkout-with-url-parameters.

[@gercorlea6174]

Hello, if i implenet this in a store how can i change the price amount to the price of the cart?

[@SAgbutable]

really nice, how I can a webhook if I put it to vercel? specially in CLI webhook

[@jeremypersing4484]

I’m pretty sure you need to be on a paid tier for vercel to accept payments/use for commercial services. But it should be as simple as creating the endpoint in your code to handle payment events, registering a webhook in stripe which points to this webhook on your website, copying the webhook secret, pushing you code to vercel and making sure that your environment variables contains the production webhook secret.

[@ys1197]

by just your applications I know you are a very based individual.

[@jeremypersing4484]

Hey, it takes one to recognize one

[@YieGin]

hey there, nice video, thanks there just one problem im facing right now and its i'm getting 404 status response, is it bcz I'm using app router buy any chance?

[@jeremypersing4484]

It might have something to do with it. If it’s just because it can’t find the route, then you’ll have to modify your project structure to fit it. I’m using app router for a project currently and will probably make a vid on how to set up stripe with it soon.

[@himike3278]

How do you redirect back to a success page on your own site? Can you do that without adding a "create session" api?

[@jeremypersing4484]

You can do it without the API. If you create a payment link there will be a configuration for what to do after the payment and here is where you can leave a link to the success page for your website.

[@himike3278]

@@jeremypersing4484 Thank you! I'll check it out

[@appstuff6565]

hey thanks for this, but how can I do subscriptions based payment with nextjs (supabase as db)? if u have a video can u guide?

[@appstuff6565]

also, the user is logged in, then he is taken to the subscription page.

[@jeremypersing4484]

It’s the same process, you just have to see what plan the user purchased and give them the entitlements based off of that.

[@jeremypersing4484]

For the second question, you would handle that on the app side. I don’t think you need to concern stripe for that particular process, so long as I understand the question correctly.

[@appstuff6565]

@@jeremypersing4484 okay thanks jeremy, may u have a good sunday ahead. :D

[@jeremypersing4484]

Thanks, have a good day as well

[@beachbobftw1110]

Kept getting this error in my terminal when payments processed No HTTP methods exported in '{my path}'. Export a named export for each HTTP method.

[@jeremypersing4484]

It’s saying you need to export a function with the name of an http method, so in this case change your function name to POST and export that function. I assume you’re using the app router, so use the solution in this as a template stackoverflow.com/questions/76214029/no-http-methods-exported-in-export-a-named-export-for-each-http-method

[@beachbobftw1110]

@@jeremypersing4484 yes I am using the app router. Were you using the page router in your example? I completely forgot to check your repo to see if you were using the page router.

[@beachbobftw1110]

@@jeremypersing4484 Thank you for your response. Were you using the page router in your example? I completely forgot to check your repo for that. Im still using nextjs and changed the name of the handler function to post and i don't get that error but it also still doesnt work

[@jeremypersing4484]

Sorry man, just saw this, but I think I’ll be creating a vid on how to do this with app router and then selling a nextjs template so that you can easily handle subscriptions and unsubscriptions. I think that would be helpful for a lot of people and the template could save hours of reading documentation.

[@beachbobftw1110]

@@jeremypersing4484 thank you for your reply. I'm learning a lot about nextjs and it's been a lot of fun

[@dallascaley]

Well is it possible that 6 months old is too old for a tutorial? Yea so i immediately have an issue with this because when i create my project there is no pages folder and there is no index.tsx, also for some reason the template used is app-tw not default-tw even though i tried it while explicitly using the --template default-tw parameter in my npx create-next-app command. what gives?

[@dallascaley]

ok i think i'm getting closer to understanding the problem. When you use npx create-next-app it gives you a bunch of yes no questions, I have been typing y or n, but apparently that has no effect on the decision, so when i typed n for App Router it said yes anyway... now to figure out the mystery of how to use npx...

[@dallascaley]

ok figured it out. The magic of GitBash on windows + npx create apparently doesn't work for selecting options the way you'd think it works. you can't use y n or Y N or Yes No, what you have to do is use left arrow, right arrow, however the dumb thing is not smart enough to actually show this to you on the screen so just trust it. when it gets to App Router, press left arrow then enter.

[@dallascaley]

Awesome, everything is garbage including KZbin as this is the second time I've had to type this comment because the first one didn't stick because who knows... anyhow, I fixed it. the reason this happens is in Windows, while using GitBash for whatever reason it doesn't actually change the text shown on the screen when you change it. so, the proper way to make a selection is to use the left or right arrow, then hit enter, because that's obvious right?

[@scanrecs]

Is there a webhook for when people unsubscribe?

[@jeremypersing4484]

Sorry for the late response, but what I had used was “customer.subscription.updated”. The object includes a “cancel_at” field. If that field was populated, then you would cancel the user’s subscription at that time or any time after that.

[@callmehakeem]

hey I keep getting 401 code

[@jeremypersing4484]

From where?