How to accept payments using Razorpay in your site (with a live demo)

Article #3 of my “1 article a day till lockdown ends”. I am doing this just to keep myself busy.

I recently had to add a payment gateway for one of my project where the client asked for online payments integration.

Since I had never done this before, it was a interesting task, I knew how payment gateways worked but I was a little skeptical on how to implement in one’s site properly. Razorpay surprised me with how easy it was to do it, all I had to do was add a script tag and write a small javascript function, their UI is snappy, fast, and they have put a lot of thought in their payment flows.

Let’s learn how to start accepting payments on your website.

Before starting, you need a KYC activated razorpay account to start accepting payments. Here is my affiliate link to sign up, if you are planning to integrate razorpay in your system.

I will be making a Nuxt project for accepting payments, but the code will be similar on almost all frameworks (since they’re all written in js at the end). If you want me to implement this feature in vanilla js or jquery, let me know in the comments.

1. Make a Nuxt project with npx create-nuxt-app razorpay-payments
2. I will make a small UI with Tailwindcss and I have made use of Contra UI Wireframe Kit by Vijay Verma, do follow him, because his work is amazing. Here is how it looks. Live demo at the end of the article.

1. Add the Razorpay SDK checkout.js script to our head tag, which can be found in their docs.

<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>

1. Now add a button to your website which triggers the razorpay payment intent. Clicking this button will call a function (named order in my example)with the below code.

Whats happening above? we are initializing a options object with the below properties.

1. key : Your Razorpay account api key, which can be found in your razorpay dashboard > Settings > Api Keys. Razorpay lets you test before making your app live, where the payment gateway works exactly like it would when in Live mode, you can change your mode in Razorpay Dashboard.
2. amount : The amount you want your customer to pay you, this shd be always multiplied by 100, since it works is ‘paise’ format.
3. name : The Store Name you want to show when the users are making their payment. You can see it in the below screenshot, My store name is “The Bollywood Store”.
4. description : Some additional information, if you want to show your customer when paying. I am showing the product name in the below screenshot.
5. handler : Handler is a function which is triggered when your customer succesfully makes a payment, it also returns a payment reference number.
6. modal : This object has a callback names ondismiss, which is self explainatory, if the customer dismisses the payment modal, it lets you handle what to do since the payment failed.
7. prefill : Prefill customer details in case you have them, instead of asking again when making a payment.
8. notes : This is a notes section which is saved in your Razorpay dashboard linked to the payment ref.
9. theme : you can pass a color hex to change the color & theme of the payment window for Razorpay to mach your store’s theme.

You can find more details on the razorpay docs.

Once you initialise the above object, you pass it to the razorpay sdk which initializes the payment & you call the razorpay open function. The payment window opens and the rest is handled by razorpay. If everything is done correctly, you will see the below popup, with prefilled name, number, which we had added in the options object are seen below.

Well, you we have completely integrated a modern payment gateway easily in a website in under 10 minutes. The ‘Test Mode’ badge means you are using the test mode api key.

You can find the working demo here & the source code here, which is using my test razorpay key.

Note: The above way of accepting payments works fine if you are a small business and not expecting a large number of payments in a single day, but it has some caveats. Whenever someone pays you, it wont reflect directly in your transactions as succesful. You will have to capture these payments manually by logging in to razorpay dashboard and clicking on “Capture Payment” in the transaction.

Why? because razorpay does not have any reference as to which order this transaction in your system it belongs to, hence you need to make use of the razorpay orders api. Which generates a order ID for you and you pass it to your payment instance and the amount will be auto captured. This will also prevent duplicate payments, since we are passing the same order id whenever something goes wrong during the same payment flow, and you pass the same order id again.

Let me know if you need any article to be written related to frontend, since I will be looking for options to write and continue the streak.