Subscription (Recurring) Payments using Stripe and React/Next.js

Hey guys! This tutorial will show how to integrate Stripe for a subscription (recurring payments). If this video provided value to you, make sure you hit the like and subscribe button to contribute to my goal of reaching 1000 subs in the next 2 months!
GitHub Repository - github.com/atharvadeosthale/s...
0:00 - Introduction
0:41 - Demo of the application
1:55 - Creating the Next.js app
3:30 - Creating payment page and backend
29:18 - Conclusion
My links
E-mail - [e-mail]
Blog - blog.atharvadeosthale.com
Twitter - / athudeosthale
LinkedIn - / atharvadeosthale
Instagram - / atharvadeosthale
#programming #programmer #javascript #nodejs #npm #stripe #subscription #tutorial #recurring #payments #react #reactjs #nextjs

[@rs14058]

Thanks for the extensive walkthrough ☺️👍

[@WajdaTabssum]

Very good tutorial, thanks Atharva.

[@MrDDRDev]

Great job! Thanks Atharva

[@UmarFarooq-dm4of]

Great tutorial. I think most of confusions get clear by this tutorial.

[@enogratechnologies1896]

Best explanation. Thank you so much.

[@amarkrchoudhary8272]

really informative video

[@sandeeprapolu5084]

Thank you so much, really helpful for me with your video, and continue trying this type of video Best Of luck.

[@klutch4198]

Nice job bro!

[@jampietri583]

Thank you very much. It would be helpful if you cover existing costumer and product too. Thank you very much, my friend!

[@lykiamusic]

Thanks you’re the man

[@zillurrahman1309]

You gained one more subscriber although I have not watched the video yet.

[@tegasteve8195]

Thank you for this tutorial

[@AtharvaDeosthale]

You're welcome

[@Error-zs1yn]

Thanks, was able to know how to get client secret from subscription

[@ashishjain7860]

Very informative video , i have a question how user select that he want to pay auto renewal payment and one time payment

[@ansarengg86]

good explanation... please add videos tech wise in playlist.. facing difficulties in searching videos

[@theresiahansson4445]

Thank you for this video and for keeping irrelevant stuff like styling etc out of it :).

[@AtharvaDeosthale]

Yes, that's the aim! I think for full blown projects styling should be good, but for smaller tutorials like these ones, styling is not a big deal as some people would just want a solution to their problem

thank you. very helpful

[@AtharvaDeosthale]

Glad you found it helpful!

[@gauravvan]

How do the SaaS products implement subscription and handling, checking if the user is still paid and required frontend

[@ziayamin339]

This is greate! one question. If a user have subscribed once and want to upgrade or downgrade, how can do that?

[@joeyoussef6236]

Amazing! Just a question, does stripe send an invoice automatically to the email that made the payment?

[@warleaks1579]

Gerar job

[@mohamedyoussef8835]

Awesome video +++++++++++++++++++++

[@AtharvaDeosthale]

Big thanks

[@olliejw8192]

I keep getting React.createContext is not a function from the @stripe/react-stripe-js module

[@southredmondtoxik1885]

Can i do this with react native?

[@FullStackDevGreg]

Thanks, for this amazing tutorial, well made. Please can you do one unsubscribe, and webhook to handle alerts and notifications?

[@AtharvaDeosthale]

Sure, I'll consider

[@sahildudani4658]

Hey I am getting 404 error how you have started backend please tell me?

[@user-xb2nm9cq3s]

Hello Sir, great turorial! I have question, does it need to have a thank you page to redirect after successful payment?

[@JasonDainter]

It doesnt *need* to, buy you can add one!

[@ibadali4223]

I’m getting a client_secret error whenever i try to pas trial_period_days with my subscription API. If you could just help me out

[@vaibhavsutar7163]

Please provide more tutorial if you have for trail period implementation in react

[@aaditya__prakash]

mine is checking for 3d secure auth every time. Do you know how to resolve it ? I want to remove that extra level authentication

[@AtharvaDeosthale]

Some cards require 3d secure authentication and cannot be avoided, however, if you are using a testing environment, use the card which does not require authentication, which is specified in Stripe dashboard.

[@aaditya__prakash]

@@AtharvaDeosthale yeah worked thank you 😁

[@calebliu7761]

I'm getting a 404 error when the "const response = await fetch("api/subscribe") line is run

[@AtharvaDeosthale]

Hey, it is /api/subscribe

[@jtol_cuts3974]

Could it do one using react instead of next, and how to cancel subscription? Helpful video by the way

[@AtharvaDeosthale]

I used Next.js because it has a backend. You can use React in the exact same way with no problems, but you'd need to deploy a backend separately. You can learn more about cancelling subscriptions on the Stripe docs - stripe.com/docs/billing/subscriptions/cancel?dashboard-or-api=api . I will try to make a video on that soon though. Thanks for your comment and have a wonderful day.

[@jtol_cuts3974]

@@AtharvaDeosthale hey thanks! I got the subscription and the cancel subscription working

[@karanaggarwal2012]

@@jtol_cuts3974 Hi Have u done in React?? And if you are done with the unsubscribe, can u help me maybe by sharing a github repo Me facing some issues in this. Will be really thankful to you. Regards

[@jtol_cuts3974]

@@karanaggarwal2012 I’m not available right now. Maybe within the next 2-3 hours. I’ll try and make a sample project and upload it to GitHub

[@jtol_cuts3974]

@@karanaggarwal2012 hey I wasn’t able to get to it today. I can try again tomorrow

[@dyktatorwood8487]

Why did you write this in typescript? Would be much more usefull

[@joscript7846]

How can 7.2k view this video and his subscribers are just 1k plus? People are just Wicked

[@klutch4198]

right?

[@nadim5616]

Bro I have twitter blue subscription. When I go to manage subscription it shows ‘view terms or manage your subscription from your stripe accounts’ . Now I don’t know what is a stripe account. One friend living in USA subscribed for me using his card.

[@ipersonasounds4472]

I'm getting an error "TypeError: Cannot read properties of null (reading 'client_secret')" when sending the client secret for payment in subscribe.js. Have copied your code and double checked publishable_key and secret_key. Any idea whats wrong?

[@ipersonasounds4472]

Solved it by changing currency to USD or AUD

[@davidrowlands8548]

@@ipersonasounds4472 Thank you saved me a lot of time

[@iharobalasimi5426]

Sorry. Just a small note. If the method is not handled by any path in the REST api it should return 405. Not 400. A bad request is something else.

[@AtharvaDeosthale]

Yup, that was my bad. Thanks for pointing out!