Build a Stripe Checkout with Next.js 13 

This man single handedly saved Stripe because they're too lazy to update their docs for Next.js 13 ❤

I'm mobile dev trying to learn web development and I struggled for so long with Strip checkout. Finally managed to implement it thanks to this video. Awesome content!

Creating the UI wasnt so important (for me) but you did it boss and I do think it is important for many of us devs. Very useful content thank you.

Thank you so much for posting this video. I'm using Stripe for the first time in my side project, and it was challenging to implement. But thanks to you, I was able to apply it smoothly.

thanks alot! your video really helped me, Stripe documentation is not the best but you made it easy, thank you keep going!

Wow...thanks a lot for this tutorial...by the way tip for nextjs 14 users: use server actions instead of traditional route handlers

Thank you so much for this! I am new to NextJS and have been fighting with making this work on my own. Your video was super clear and extremely helpful! Liked and subbed :)

Bro all of ur videos are so helpful and easy to understand.I can even watch them in 2x . PLEASE make more videos on Next js.Thank you for such awesome content and if possible make authentication on next js with mongodb without prisma.

I would like to add 1000 thumbs up. Thank you so much for this tutorial.

Thanks you help me a lot, to have an idea about how I implemented, you're really tallent when it comes to teach

Amazing videos Brett!

I just love how you try to explain everything. You are a great teacher. Liked and subbed

Dude this was super helpful, thank you so much!

Thank you for the amazing explanation, Brett

I was following along up until the last bit. There's a form that the users fill out which picks the membership type. I was submitting this membership information to a sheets doc, however when I added stripe, it messed up how my data is saved and instead I get 500 internal errors. Any ideas of how I should do this and work with the flow that I want to implement?

Hey, really appreciate the tutorial - got me really far. I called the product object api instead of the price by changing the GET method, but I need a picture, description, title, and price and this data is spread between the product and the price objects. I can find no way to set product. default_price (stripe's docs lead to a nebulous or non-existent endpoint) so it appears I need both objects to display all necessary data in one card on the site. So is there one all-encompassing object that I can get with all data (I can't find one)? Or do I need to call both, in which case I need to link them though the same product does not share an id common to both the product and the price obj. Any help on which direction to go would be much appreciated and thanks again for the concise tutorial.

One question: it works on localhost, in production it does not display the "Elements" (form), why?

Yo you play AOE 4, that's really dope. your desktop app clutter really gave me pause for a sec there tho😅😅. Loving the video so far.

Amazing and Very Helpful Video

Hey guys, does it work with a simple "total" / "amount" ? Or I have to create a "product" for every single product from my database ?

Awesome video. If you hit Alt+z in vscode, it will wrap the line so you dont have to scroll to the right to see the whole line.

Great video. I have learnt so much.

when I click on the button, the following runtime error is coming: 1 of 1 unhandled error Next.js (13.4.5) out of date (learn more) Unhandled Runtime Error AxiosError: Request failed with status code 500 Call Stack AxiosError node_modules\axios\lib\core\AxiosError.js (22:0) settle node_modules\axios\lib\core\settle.js (19:0) onloadend node_modules\axios\lib\adapters\xhr.js (107:12)

I wondered about something. Do we need to write the api part to bring our data on Stripe? Couldn't we bring our data in the client part? By the way, I can say that it is a great video

That was incredibly helpful. Thank you!

thanks bro very informative and straight forward

Awesome! Thank you

Very effective content. Please continue this kind of content also I want to know how to build a saas and setup free trail. You can continue this series and effectively see your growth because there are less tutorial about next 13 and app router. So, please create videos like this. Thanks for helping me buddy ❤

Can i save this all payment data to my database (MongodDB). How?

I have deployed the project on Vercel but when I Checkout to Stripe Payment I got error 405 Method not Allowed can you tell me how can I fix this issue Locally it's wokring fine only issue I got on Live Version.

Thanks, bro. That's pretty nice

Thank you for the tutorial. I'm a bit confused about where the money goes after a successful payment.

Thank you very much! Your video helped me a lot.

Please make a video on how to verify stripe payment using session ID

Hey bro. How do you track if a user has paid for a particular product ?

Bro thank you for video, If I turn off test mode, I can accept money for real?

Both of my products have a name in Stripe (obviously) but the nickname field comes through as null. Any ideas? TIA

You always have what I'm looking for (:

im having issues accessing the payment data and assigning it to a db attached to a User OBJ. that then has to check if subscription is activeor not.

Great video. It would be good include Supabase as the backend to sync customer information, subscription type i.e. Free, Premium or Enterprise for recurring subscription

Hey Brett can you do a simple full-stack with auth and ecommerce?

will this be the same for reocurring prices?

How do your secrets remain secret when you deploy this static site to say S3?

great video thank you

Does anyone have a tutorial for doing your own products? kind of stuff on the return_url and its purpose

Awesomeeee!! Thank you

I don't understand these tuts... it just goes to the Stripe payment page... you could literally do this with a single link.

Hey, I have a request, make a full stack app project in NextJs 13.3 for people who are coming straight from react and have never learnt Next js 12 (I did isse NextJs 12 but it's redundant now) Because NextJs 13 is so new for us beginners that the only way to learn it properly is to make a project ( a project with lots of api handling and backend stuff that a typical junior react developer will use in a small project in a company) I don't see a lot of people making such projects yet that explain how handling api calls differs from normal React + node/express setup

Why not make use of the app dir and make "Pricing" an RSC fetching the prices server-side. Doing it in an useEffect is highly inefficient, not rendered on the server, no SEO, etc.

tyyy so much , this is so helpful , please we need source code

Thank you

Kindly zoom in while video making

👋Hey Brett, Wanna play Fortnite sometime? 😅

Is it my eyes or the man's page isn't pure white

Bro thanks a lot , just save me with the window.locate.assign() ! I was fighting with the Cors so nice tips thank you really great and helpful content 👌

please focus on the stripe part rather than the styling part next time man!

BROOO ty so much, the window.locate.assign() save my life!

Legend.