Integrate Razorpay Subscription in react.js and node.js

3 min readMar 20, 2021

In this article, we are going to understand how Razorpay subscription works and how to integrate Razorpay Subscription in node.js, react.js based project.

What is Razorpay?

Razorpay is payment gateway used inmany e-commerce websites to accept the payment for their products from the customers or for the services provided by the companies to their customers.

What is Razorpay Subscription and why it is used?

Razorpay Subscription allows you to charge your customers periodically based on the plan they have choosen.

Its an automated process, requires one time approval from the customers by authentication transaction from the card. Once the card is successfully authenticated, the card is charged automatically at the start of every billing cycle.

Razorpay Subscription also generates invoices for every successfull payment that includes Plan details, Subscription details and customer details

With the help of Razorpay Subscription, you can easily and automatically charged to customers based on defined billing cycles

Before integrating the razorpay subscription in project, first understand the Subscription Workflow given in their documentation

Server Side code -

First intall the razorpay package in your project.

npm install razorpay

now import below code in your controller

var Razorpay = require(‘razorpay’);

create an instance by using your key_id and key_secret, you will get this key_id and key_secret from razorpay dashboard

let instance = new Razorpay(
  { 
    key_id: hotel.key_id, 
    key_secret: hotel.key_secret
  }
);

Create Plan

A plan is a foundation on which a subscription is built.

It contains details of the product or the services offered along with the amount and the frequency at which the customer should be charged.

const params ={   
    "period": "monthly",   
    "interval": 6,   
    "item": {     
       "name": "Test plan - Weekly",     
       "amount": 69900,     
       "currency": "INR",     
       "description": "Description for the test plan"   
    },   
    "notes": {     
       "notes_key_1": "Tea, Earl Grey, Hot",     
       "notes_key_2": "Tea, Earl Grey… decaf."   
    } 
}'instance.plans.create(params)

Depending upon your business, you can create multiple plans with different billing cycles and pricing.

2. Create Subscription

After successfully creation of plan, you can create subscription based on plan by passing the plan id to subscription.

Subscriptions allow you to charge a customer’s card periodically.

const params = { 
   “plan_id”:”plan_00000000000001", 
   “total_count”:6, “quantity”: 1, 
   “customer_notify”:1, 
   “start_at”:1580453311, 
   “expire_by”:1580626111, 
   “addons”:[ 
      { 
         “item”:{ 
            “name”:”Delivery charges”, 
            “amount”:30000, 
            “currency”:”INR” 
         } 
      } 
   ], 
   “offer_id”:”offer_JHD834hjbxzhd38d”, 
   “notes”:{ 
      “notes_key_1”:”Tea, Earl Grey, Hot”, 
      “notes_key_2”:”Tea, Earl Grey… decaf.” 
   } 
}’const response = instance.subscriptions.create(params)

After successfull creation of subscription, you will get the subscription object.
Now you have to authenticate the subscription i.e. Authentication Transaction in checkout step this step will be done in frontend side

3. Checkout (Authentication Transaction and Payment Verification)

load this script in your react project

<script src = “https://checkout.razorpay.com/v1/checkout.js"></script>

Call this function by handling on click

function handleSubscription(){   var options = { 
      “key”: “key_id”,
      “subscription_id”: “sub_00000000000001”, 
      “name”: “Acme Corp.”, 
      “description”: “Monthly Test Plan”, 
      “image”: “/your_logo.png”, 
      “handler”: function(response) { 
         alert(response.razorpay_payment_id)        alert(response.razorpay_subscription_id)      alert(response.razorpay_signature)
      }, 
      “prefill”: { 
         “name”: “Gaurav Kumar”, 
         “email”: “gaurav.kumar@example.com”, 
         “contact”: “+919876543210” 
      }, 
      “notes”: { 
         “note_key_1”: “Tea. Earl Grey. Hot”, 
         “note_key_2”: “Make it so.” 
      }, 
      “theme”: { 
      “color”: “#F37254” 
      } 
   };    var paymentObject = new Razorpay(options);
   paymentObject.open()}

This will open the razorpay payment portal on your website and once the authorization transaction is successful, Razorpay returns the following data in the response:

{
   “razorpay_payment_id”: “pay_00000000000001”,
   “razorpay_subscription_id”: “sub_00000000000001”,
   “razorpay_signature”:            “c04ff297db507f08ab701ea9aa36a1dc90679c2a8c80cb2ea7995e119f3f0c5e”
}

The razorpay_signature received needs to be verified on your backend server.
To verify the signature, you need to fetch the subscription_id from your database, not the one from the checkout response, and use your <key_secret> to generate the signature.
To generate the signature, calculate an HMAC hex digest using SHA256 algorithm

Now this will be done on Server side,
for the verification, we will use crypto module, to create the HMAC

const crypto = require('crypto')app.post("/verification/", async (req, res) => {   const crypt = crypto.createHmac('sha256', razorpay.key_secret)
   crypt.update(req.body.razorpay_payment_id+'|'+req.params.sid)
   const digest = digest('hex');   if(digest === req.body.razorpay_signature){
      console.log('request is legit')
   }else{
      console.log('request is not legit')
   }
})

Now your subscription is in active state.

For more visit,

https://razorpay.com/docs/subscriptions/workflow/
https://razorpay.com/docs/api/subscriptions/#subscriptions

Integrate Razorpay Subscription in react.js and node.js

Written by Abhishek Gupta