Setup Stripe Recurring Payments With NodeJS And React Application

hi everyone in this video we will see how to set up recurring subscription using stripe payment Gateway and we will use react for front end and node GS for back end so first I will quickly demo what we are going to do so here I have react frontend and uh if I click on subscribe Now button then it will take me to the payment page and uh in last video we saw uh it was it for uh single payment means one time payment this time it's for recurring payment here it's showing it will be charged per month means 200 rupees will be charged per month for this product and uh I can enter the details and subscribe for this monthly payment after that on successful payment I can go to my database and I'm using mongodb Atlas for storing the data so on database I can see that the email got added which I used for subscription and this is the end gate end date means on this date the sub subscription will expire and St will reattempt to uh charge the customer now let's see what is the workflow here how it's working so first uh we will recap how we we did it in onetime payment and then we will see how we are modifying same code for the recurring subscription so in one time payment we saw that as soon as we click on the payment button U so we have uh two things we have this react client and nodejs server this is react CLI this is not the server and this is a stripe API part so as soon as from client we click on subscribe button it goes to the nodejs servers and in nodejs server it talks to strip API to create payment link and then uh that payment link is returned to the client and client is redirected to that check out page where transaction happens and depending on status of transaction client is sent either to success or failure page and same status is updated to our server uh by stripe and for that purpose uses uh bi hook means simply it means that we are exposing one route in our server which stripe can use to update the status of transaction and depending on transaction status we update of database so this is what uh we did it in one time payment but now we are going to do for subscription so for subscription this is the logic which we are going to use so earlier as soon as request come to server uh to create the payment link we just simply go ahead and create the link but now we are going to add some if and buts so first thing is that if request come to a server to create session we will check if there is existing customer in stripe database for that particular email the email which got provided and if yes there is email means that customer is already registered and if customer is already registered then we will check if customer is subscribed or not if customer is subscrib also then instead of creating the checkout page we will uh send to the subscription management page or billing page means uh like this one if I show you here right now we just uh completed the subscription now if I click on subscribe Now button instead of taking me to uh checkout page it's taking me to the billing management page means here I can cancel the plan or renew the plan and uh if it's F that there is no existing subscription then it will just simply please send me to the checkout page and uh second scenario is that if there is no existing customer in the stripe database then we will create new customer and send to the checkout page so this was the first scenario when uh when which we saw at the start of demo now uh this is the case for the creation of checkout page similarly we need to handle some cases uh in be hook also so in be hook uh we will handle mainly two things we will check if the payment which is succeeded is it the first subscription means subscription is created first time then if yes then we will insert new record in the database however if subscription is recurring means it's second or third month it's payment for second or third month then we will just update the existing record in the database and that we will see uh at the end uh and we will see how it reflects in our database also so this is the bflow now let's uh quickly review the code what we are doing in the code then we will see how you can set up it locally so in code we have client and uh server in client uh we have three routes home success and cancel these are nothing just simple success and cancel text and uh the main page is this homepage so in homepage I have this div and in this div I have this subscribe Now button and this subscribe Now button is calling on click of this button this handle subscription function is called and in hand subscription function I'm calling my stripe back end or nodejs server uh to create the checkout page and uh from that uh uh response if I get 409 response it means uh that customer is already subscribed and uh we send that customer to the billing page and uh if we receive 200 and uh we received the checkout page link then we send the customer to check out uh page now let's uh see what we have inside server so inside server DJ dependencies we are using mongod DV Atlas as a database and uh these are other libraries which we are using and uh in routes we have two routes one is beook uh which will be used after payment and uh this is the uh check out this is the route which will create the checkout page so let's see what we have here so here if we see I had hardcoded this email but uh I'm expecting that if you use it then probably you will use it with o zero or Clark or um AWS Cognito and if customer is already authenticated then from Front End you can pass the email of user and also similarly you can pass user ID of the user o zero like provides user ID also and then you can use it here for now for demo purpose I had hardcoded it and uh let's uh change it to something else so I will change it to rece one three and also I will restart the server so that uh when we see the demo we create new customer and uh let's see what we have here after that once we have email then we check that uh we call a stripe API and we see that if there is any existing customer for email and if yes if there is some customer means data do length is greater than zero then we check if there is some subscription some active subscription also for this customer and if and uh if there is some active subscription then we just uh send this 409 response and uh redirect the customer to the billing portal where they can manage their subscription else if we found that uh customer is not existing in the stripe database then we create new customer here so now we have two scenarios uh one is customer is already existing and already subscribed we are sending to the stripe page but if customer is existing and not subscribed also if customer is not existing at all means this case in both scenarios we will send them to the checkout page this one and uh this strip. checkout. sessions. create will create new uh checkout page and uh if you see here last time we used mode as payment here we are using mode as subscription and uh uh in line items we are passing the detail of our product so line item is just list of objects and each object is the product and inside each object we can pass the price price data of our product so here I had hardcoded the product description and quantity you can take it from Front End and amount um it you should take it from database and always multiply by 100 whatever is it actual value so I want 200 rupees so for that I had multiply by 100 and it became 20,000 and recurring interval I had kept one month but it can be kept one year one week or one day also and uh in met I'm passing user ID so user ID you can uh pass here and uh when you receive trigger from beook this user ID can be used to uh access the database but right now I'm using same user ID and email so uh I can pass only email also but I had passed here and the customer ID customer ID either we create new customer or we have already existing customer that customer ID we pass here and uh this will return uh one checkout link and then checkout link we are sending to the client client and client will redirect to that page here this part and then uh regarding this part regarding the 409 part we already saw that this is the 49 part if subscription is already existing so this is the first route which is regarding the creation of checkout page now let's see the code for B Hook so in be hook we are initializing for dat client for the database Where We Are uh specifying the database name and collection name I had already created in my database these two things and then uh we are checking if the request which came from uh stripe it's actually coming from stripe means someone else is not pinging our web hook and for that we are using this endpoint secret to verify uh this endpoint secret we have stored in our environment file that we will see how to get it and then we are checking two type of events we are checking if payment success event and we are also checking subscription update event so inside payment succeed event uh we are checking if it's first time subscription means subscription is created then we are inserting data in our database and in data we are inserting user ID subscription ID and uh date on which subscription will end however it's if it's second time subscription or means it's recurring subscription then we are instead of instarting we are updating our database and in database we are updating new end date and also just to show you I'm adding this flag which will set to true so that we can see that recurring payment is successful so this was the first if which was checking if payment is successful and now uh this is the second part um which checks if subscription is updated so we saw that if there is already subscription we are redirecting to the uh billing portal page there user if take if there if user takes some action like cancel the subscription or restart the subscription then this part will be triggered and uh here I added just logs if you want you can um go ahead and add your own logic uh to update the database so this is the code mainly which you can copy from GitHub so you can go to this uh GitHub repo and you can clone the repo or for the repo and after that you can check out the subscription branch and then you need to update the environment variables to run it locally so let's see where where you need to update the values so you update to you need to update two environment files uh first is this file which is in client and second is this one which is inside the server so in client you need to update public stripe key and in server you need to update stripe secret key uh be secret key and mongod DB URI so mongod DB URI details you can get from at least Atlas dashboard and uh the stripe keys for public and private stripe key you can go to stripe dashboard then developer section and then API key section in API key section you can get publishable key and secret key so this is for client environment file this is for Server environment file and then regarding B Hook signing Secret uh we are rning running locally so uh to trigger our we hook we will use stripe CLI and uh inside stripe CLI first you need to log to the stripe CLI like this then you need to run this command stripe listen forward to Local Host and port number and the path the book path which you you need to provide here and uh I am not running the login because it's already logged in but if I run this listen command and it will provide me the be hook signing key so you can copy this B Hook signing key and updating your environment file after updating all environment files you can just run an npm install for both client and server and then start the react and uh we server so now uh once your local setup is done uh you can run it uh for now I'm just showing the demo how it what will happen so we had already seen but still I will just show it once more and also I will show for deing subscription so first uh since I had already updated user uh email in database so when I click on this subscribe Now button uh new user will be create a new customer will be created in stripe account and I will be redirected to the checkout page so here my email is reflecting and I can enter a data and and then subscribe it and it's monthly subscription because we had specified VI creation of this checkout session and now if I see inside the logs in log I can see that uh this subscription is created and uh here we can see that database uh the value is inserted inside database and we can see that this is the first uh subscription payment for this user and uh this is subscription create event now means it's not event it's a building type as subscription create here now I will go back to the same page and this time if I click on subscri subscribe Now button then instead of taking me to check out page it is taking me to the this building portal and uh if I see here then okay so before that I will just demo uh how recurring subscription will work so right now since I had set it to one month and after 1 month his tribe will try to charge the uh client uh and if payment is successful or even if failed it will try to update in our B Hook but since we can't bit for 1 month so I will just try to simulate for that I will go to customers and uh the new customer which I had just created this this 1 2 3 and uh in this customer I will go to update subscription and in update subscription I will just reset the bilding cycle so it will be it will be equivalent to recurring subscription and it will trigger the part which is handled which is responsible for recurring subscription so I will update subscription and uh now if I come to code and yeah here we can see that this time document is upd updated means database is updated instead of inserting the value and this is recurring subscription means CL customer is charged second time and uh this last time it was subscription create now this time it's subscription update uh operation so we saw inside we hook uh we saw both scenarios for the first event type which means payment succeed now let's see for second type which is what happen is subscription is updated so for that I will click on subscribe now and it will take me to the building portal in building portal we can do we can do uh mainly 2 action regarding subscription either we can cancel the subscription or we can renew the subscription so suppose if I click on cancel plan then I will come here and yeah I can see the subscription is is cancelled and uh if I renew the plan then I can see that subscription is restarted one more thing I forgot to show is that inside database uh when we did the recurring transaction means when we done the reset of uh the billing uh time and uh in the logs when we got this part recurring payment was successful uh at this time we saw uh I told you that database got updated but we forgot to see the database so let's refresh it and see value here also so first time we saw that only three values were here now this time when database got updated here new flag got added which is recurring successful test through and end date also got updated uh which uh which will be the new date for uh 30 days after the uh time of payment so this is how we can handle payments recurring payment scenarios in our B Hook and uh that's how we can add recurring subscription using stripe so if you have any doubts in the code just uh let me know in the comments and I will try to help you out thanks for watching

Channel: TrickSumo

Views: 2,337

Keywords:

Id: JikEqcoUopo

Length: 19min 29sec (1169 seconds)

Published: Mon Dec 25 2023