Razorpay Integration with Vue js and Nuxt js

Receiving payment is one of the most important part in any online commerce application. Payment Gateways help to achieve this. Razorpay is one of the most popular payment gateway solution in India and it is very easy to integrate into any application. With a minimum amount of javascript coding, you get a beautiful user interface to accept payments online. In this article on Razorpay Integration, I will show you how to integrate Razorpay with Vue js and Nuxt js application

Before you begin, please ensure you have

• An active Razorpay account to accept payments.
• A Vue.js or Nuxt.Js application installed on your local machine.
• Server-side script. In this article, we are using express js with firebase functions.

That’s all ! You are good to go 🙂

Once your Razorpay account, Vue.js or Nuxt app and firebase are ready we need to use Razorpay checkout.js on your frontend and Razorpay npm packages on your backend.

• Add the checkout.js library on your vue or nuxt app. If you are using Vue, you can simply add this script in the index.html file in the public directory. But, if your using Nuxt.js add the below code on your root nuxt.config.js.

head: {
   ---------------
    script: [
      { src: 'https://checkout.razorpay.com/v1/checkout.js' },
    ],
    --------------
  },

• Go to your firebase functions directory and install razorpay, express.

npm i razorpay express

Let’s start our Razorpay integration by adding the following code on our Vue or Nuxt component.

Add a pay button in our component template

<template>
  <button @click="pay">Pay</button>
</template>

Next step, we need to create an order in Razorpay while clicking the pay button. For creating order, we are using firebase functions. Write the following code on your index.js file in the functions directory.

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const express = require("express");
const cors = require("cors");
const Razorpay = require("razorpay");
var crypto = require("crypto");

admin.initializeApp();
const router = express();
router.use(cors({ origin: true }));

// Add your razorpay key and secret
const KEY_ID = "";
const KEY_SECRET = "";

router.post("/createPayment", (req, res, next) => {
  return admin
    .firestore()
    .collection("payments")
    .add(req.body)
    .then(payment => {
      var instance = new Razorpay({
        key_id: KEY_ID,
        key_secret: KEY_SECRET
      });

      var options = {
        amount: req.body.amount * 100,
        currency: "INR",
        receipt: payment.id,
        payment_capture: 1
      };
      instance.orders.create(options, function(err, order) {
        return res.status(201).send(order);
      });
    })
    .catch(er => {
      return res.status(400).send({ er });
    });
});

In the above code, we are importing firebase-functions, firebase-admin, crypto and razorpay that we installed earlier. Update your Razorpay key id & key secret that you will get from your Razorpay dashboard. Then we are creating an order creation web service, we will use this web service when a user clicking the pay button on the client-side. In this web service first, we are saving all payment details to our firestore database collection. Once that data got saved in our database we are creating the order. For that, you need to pass a few parameters.

• amount: Will get the amount from the client, covert that into paisa
• currency: you are free to pass any currency code
• receipt: It must be unique, we are using the payment collection document id for that.
• payment_capture: Automatically capture the payment.

Once the order instance got created, passing the order details to the client-side.

Next step write your pay function in Vue component.

<script>
export default {
  methods: {
    async pay() {
      // Customer details and amount
      const data = {
        amount: 1000,
        name: "",
        email: "",
        phone: ""
      };

      this.$axios
        .post("Your Firebase function root url + /razorpay/createPayment", data)
        .then(res => {
          console.log(res);
          let order = res.data;
          var options = {
            key: "Add your razorpay key here",
            amount: order.amount_due,
            currency: order.currency,
            description: "Payment description",
            order_id: order.id,
            prefill: {
              name: data.name,
              email: data.email,
              contact: data.phone
            },
            theme: {
              color: "#000000" // Set your website theme color
            },
            handler: response => {
              this.verifySignature(response);
            }
          };

          var rzp = new Razorpay(options);
          rzp.open();
        })
        .catch(err => {
          console.error(err);
        });
    },
  }
};
</script>

In the pay method, we are passing the amount and user details to the createPayment web service that we created earlier. It will return the order details. For displaying the Razorpay payment form we need to pass a few parameters. That we are passing through options variable.

• key: The api key you will get from Razorpay dashboard.
• amount: You will get from order details
• currency: You will get from order details
• description: Pass your payment description this will show in your Razorpay dashboard
• order_id: You will get from order details
• prefill: Pass user name, email, and phone number. This will auto-fill in Razorpay payment form
• theme: Pass a theme colour for your payment form
• handler: This will call once the payment is completed. We will create the verifySignature method in the next step.

Next, we are creating verifySignature method in our component

async verifySignature(response) {
      this.$axios
        .post(
          "Your Firebase function root url + /razorpay/verifyPayment",
          response
        )
        .then(response => {
          console.log(response);
          alert("payment received");
        })
        .catch(err => {
          console.log(err);
        });
    }

Next, we are creating verifyPayment web service in firebase functions

router.post("/verifyPayment", (req, res, next) => {
  const order = req.body;

  const text = order.razorpay_order_id + "|" + order.razorpay_payment_id;
  var signature = crypto
    .createHmac("sha256", KEY_SECRET)
    .update(text)
    .digest("hex");

  if (signature === order.razorpay_signature) {
    // You can update payment details in your database here

    return res.status(201).send({ message: "Successful payment" });
  } else {
    return res.status(400).send({ message: "Payment verification failed" });
  }
});

In the above code, we are verifying the signature and then we pass the result to the client-side. We are using crypto.js to generate the hash. Here, you can also update the payment status in your database.

Finally create your firebase function with router

exports.razorpay = functions.https.onRequest(router);

So there! We have successfully integrated Razorpay in our Vue or Nuxt application. Razorpay Integration in any application is almost similar. You are free to use any server-side script or database. It is not mandatory that you need verifyPayment web service, you can confirm the payment in verifySignature function. But it is good to do this on the server side. Also, you can do this payment confirmation with Razorpay webhooks. Hope this helps you in integrating Razorpay into your application quickly and easily without any fuss.

You can find the complete code in the following git repositories.

Vue.js Git Repo

Nuxt.js Git Repo

If you have any suggestions or a better, secured method, please feel free to post in the Comment section below.

<> Happy Coding </>