Using Stripe API in NextJs

Processing payments in NextJs using the Stripe API.
➡️ The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...

[@RayTawil-en1ws]

Well done! Great breakdown of the process and clean code organization.

[@hamedbahram]

Thank you!

[@pablofernandezruiz8024]

Hey Hamed thank you for this tutorial, I'm looking for a tutorial that covers subscriptions. I can't find a good video that explains it as detailed and organized as you do. Please do consider making one about integrating subscriptions! It would be greatly appreciated, even if it's paid, I bought your NextJS 14 course and it's awesome 😄

[@hamedbahram]

Hey Pablo! For sure, I'll work on it. Glad to hear you liked the course.

[@user-pe4wq2dv7q]

Nice video, the way how you explain is clear as well 👍

[@hamedbahram]

Thanks you!

[@tajwarsaiyeedabid]

Thank you. I had a problem in stripe Checkout payment intent. By completing your video i have solve my problem. Thank you again.

[@hamedbahram]

Great to hear that! Happy to help.

[@jackhump7676]

thanks for your response I'm looking forward to going through the code😊

[@hamedbahram]

Hey Jack, did you have a chance to look at the code? was it helpful?

[@jaykhan_sound]

Great video, much appreciated!

[@hamedbahram]

Anytime! Thanks for tuning in Jay.

[@Backlink_SEO]

This is really good tutorial, Thanks for sharing.

[@hamedbahram]

Thank you. Glad you liked it.

[@RaulReyesOnline]

Thank you for the great tutorial, do you have an updated course or online tutorial that explains Nextjs and Stripe integración further? Like self hosted checkout, etc

[@hamedbahram]

My pleasure! No I don't, but that's a great idea :) I may create one.

[@ledoublez]

Hey, it would really be interesting to add authentication to your app! Maybe also an order history for each user. Great video!

[@hamedbahram]

Great suggestions! I appreciate your comment.

[@jesusavila4306]

Hi, very helpful, thanks man😄

[@hamedbahram]

Any time!

[@edirodriguezsantillana]

Thanks for the great video

[@hamedbahram]

Glad you enjoyed it Edilberto, and welcome to the channel.

[@8drapbeats873]

Thanks for video! Im using Auth0, how can i actually recognize and make some others actions such as add 'virtual funds' to logged user that paid? (How can I recognize logged user with his payment)?

[@hamedbahram]

Stripe returns the `sessionId` back to your success URL (once the user completes the payment), you can use the `sessionId` to retrieve the session from Stripe; on the session object you can see the customer details on `customer_details` field. You can then use the customer's email to connect it to the logged in user in Auth0.

[@daviswalker5067]

Can you make a video about stripe elements?

[@hamedbahram]

Can you expand on what you like to see in that video?

[@HigherStudyAspirant]

Thank you. can we integrate our own html, css checkout page. I have seen many videos but didn't find any where they have integrated their own checkout page rather pre-build checkout page is used

[@hamedbahram]

Hmm 🤔 yes you can build a custom checkout page and use Stripe APIs to power the functionality. I'll have that in mind for future videos.

[@HigherStudyAspirant]

thanks, will be waiting...@@hamedbahram

[@nogafouz2174]

thanks alot well done but i have a question how can use payxpert instead od strip ?

[@hamedbahram]

I haven't used that yet.

[@berendvanbeerschot1472]

I really like your way of working and explaining. Is it safe to use your stripe secret key in your client side code?

[@hamedbahram]

Thanks Berend. Your stripe secret key is for server side use only, you can use the publishable key on the client side.

[@mahesh-waghmare]

So, support I want to use the NextAuth In which I allowed user to authenticate with Google. And used the database MongoDb to store the information of authenticated user. Then after successful checkout I need to store the session id into the MongoDb user details. And when user again login then based on stored sessions I can fetch his/her subscriptions from the Stripe right? Is this the right way to connect Stripe + MongoDb + NextAuth on NextJs?

[@hamedbahram]

Absolutely! That'll be a good work flow. Alternatively you can write the subscription details on the user record, so you don't have to hit Stripe API every time.

[@hovivianwy]

hi, your video has helped me greatly! may i ask how would i implement auto-pagination and Search query language (a search bar to search products) using your approach in this video? ive read through the stripe docs but couldn't fit those functions in my website

[@hovivianwy]

also, id like to know why you used {data: prices} to request the products instead of "products"? thank you

[@hamedbahram]

Welcome to the channel Vivian. Good question, how many products do you have?

[@hovivianwy]

@@hamedbahram hi Hamed, since this is just a project of mine, i only have 30ish products, i was thinking maybe i could paginate my products into 3 pages, so 12 products on each page. not sure if this is feasible. thanks

[@hamedbahram]

@@hovivianwy for sure. It's definitely doable, since there are only 30 products, you can fetch all and paginate in your state, or use something like SWR and fetch client-side. For search, we can either use the text search in stripe or something like algolia. Let me give it some thought and see what's the best way to do this.

[@hovivianwy]

@@hamedbahram thanks for your advice, i'll let you know how it goes!

[@p_nik]

very helpful! How can I make it so I can add the same product multiple times in the cart? to update the quantity thanks!

[@hamedbahram]

Welcome to the channel Panos! you can add `quantity` to your `items` state or `cart` context and when calling the checkout method you can pass a quantity to Stripe. If you go to the `lib/checkout.js` file on my source code, you'll see that I'm adding the `quantity: 1` to my lineItems. Let me know if that makes sense.

[@p_nik]

@@hamedbahram thanks for the very fast reply, I am struggling to figure it out though. Could you please provide some sort of example? Thanks again

[@hamedbahram]

@@p_nik I'll try to cover it in my next Stripe API tutorial. But from a high level when you're creating a Stripe checkout session you can pass quantity for each line item, how you are managing you quantity state depends on your app, but at the end you want to pass that quantity to Stripe.

[@p_nik]

@@hamedbahram thank you! I managed to do it eventually!

[@hamedbahram]

@@p_nik Ok great! glad it worked out.

[@jackhump7676]

looks good just what I'm after but any chance of seeing all the code

[@hamedbahram]

Thanks for watching Jack! you check out the code on the following repo: github.com/hamedbahram/stripe-payment

[@codewithfarhad8594]

when I go and type import "Stripe" from stripe; my nextjs can't resolve this module. I have triple checked my pkg json and all the pkgs you installed are there. so I don't know what's going on. any idea how to fix this?

[@hamedbahram]

If you've correctly installed the 'stripe' package, there shouldn't be a problem, can you tell me what error you're getting? Just keep in mind that the 'stripe' package is for the server side only and the '@stripe/stripe-js' is for the client side code.

[@codewithfarhad8594]

@@hamedbahram thanks bro. I fixed it. I was mistakenly calling GetServerSideProps in a component instead of Pages so I was getting undefined and all the other errors. thanks for this great video 👏👏

[@clipartinc]

where do you include your publishableKey?

[@hamedbahram]

PublishableKey is for use with the `stripe-js` client-side package; You can define an environment variable in your `.env.local` file and prefix the variable name with `NEXT_PUBLIC_` so that it's accessible in your front end code.

[@clipartinc]

@@hamedbahram Thanks, but, I was really asking him where he included his publishableKey in his code. I see it now though 11:43

[@juanroman3289]

How to develop the refund api

[@hamedbahram]

That makes a great topic for another video.

[@juanroman3289]

@@hamedbahram please do it.

[@rishikeshkumarsharma3504]

great video man 🐐 , can i get source code ?

[@hamedbahram]

Thanks Rishikesh. Here is the link to the source code: github.com/HamedBahram/stripe-payment You might also like this video I did on pagination and search in Stripe: kzbin.info/www/bejne/qX7Fl6Sjn95pm5I