Bulding Stripe Subscriptions with React and Node.js

In today’s digital era, integrating a payment gateway — more specifically, a subscription-based payment system — is an integral part of any web application. In this tutorial, I will guide you on how to seamlessly incorporate a complete subscription-based payment system using Stripe within your React and Node.js applications. So, let’s dive in…

Inital setup

Let’s say, for instance, you have a product that offers two distinct subscription plans — the Standard plan and the Premium plan. The first step you need to take is to list these products within your Stripe dashboard.

These plans are each associated with a unique fixed price ID, also known as the API ID, which resembles something like this: price_1N1ZOgJggWefJ04ArJBxxxxx. Now, with that in mind.

let’s proceed to unravel the complexities of the development process

Backend Part

i think you know how to setup e basic express server so i am skipping those step. make a payment route and a payment controller where payment route is responsible for incomming request and controller will serve your functionality. save the products price id into your database that you just got from stipe dashboard and make a model for those. now lets write code. oh you need to install stripe and need stipe secreet key and publishable key what will also got from stripe dashboard.

payment route.js

just define a route that is responsible for incomming request.

now create a payment controller

in this code snipped we just created a function for creating subscription where reqestbody contain user name,mail,paymentmethod and priceid.

so to create a subscription we need to create a customer in stripe so that we can track which customer has subscriped any specific plan. so though customer is created so now we will create subscription for this customer. so lets complete the final code for backend.

in stripe subscription give the customer id,price id and payment mode onsubscription. it will return many things just take clientsecret that will be used in frontend for successfull payment and subscriptionid what will be used in your database for future work process.

thats all end from backend part.

now lets move to frontend part

Frontend Part

for the frontend u can use @stripe/react-stripe-js and @stripe/stripe-js

and you need use publishable key in frontend where you used secreet key in the backend.

now you need to define the checkout from where you will interact with backend service and complete a successfull payment.

its just a create basic design of your payment form(igonre my frontend skill) . now we will implement the createsubscription function in in checkout.js file. for code readability i will ignore the desing part in this image.

to create subscription you need to get paymentmethod id thats why you need to call stripe default create paymentmethod function with necessary parameter.

when you will get the stripe paymentmethod id its time to call backend api?/create_subscription?to make a successfull payment. in request body u will sent name,email and price id where price id is stripe dashboard price id that has been saved into database so when you fetch product you will get price id. userid and email from current user. this will give u a response with clientscreet and subscription_id now just pass this client secreet into this function. where stripe automatically decide a successfull payment or not.

  const confirmPayment = await stripe?.confirmCardPayment
        response.data.data.clientSecret
      );(        

thats all ! you are done! now if it is a successfull payment then you can do you next logic that with subscriber id whatever you likes.

Thanks for giving your time. If you found this useful then hit the clap ???? button.

i have also uploaded a medium article about it you can follow that also

Thank you!