Uncategorized

Technology

Design

Development

Best Blogs of Blockchain Technology 

Blockchain

Installation of package

Understanding how it works

Setup Backend for Razorpay Payment Object

Configuration of Razorpay

Trigger Razorpay Payment Window

Extra Setup & Methods

Razorpay is an Indian fintech company that provides online payment solutions for businesses. It enables businesses to accept various digital payment methods and offers features like subscription billing and vendor payouts to streamline payment processes.

Razorpay is the leading payment gateway and choice of most of the businesses across India. It is being used by major businesses despite its high transaction charges is because of its innovative features and least failure rate.

Razorpay

This guide on razorpay integration with reactjs or nextjs is all what you need to make your life easier while setting up razorpay payment gateway

Total We will Learn How to Integrate or Setup Razorpay with React , Nextjs or any other js framework

Install, Setup & Gather Essential components for Razorpay Integration

Install Razorpay NPM Package

Install Any Unique ID Generator Package (optional)

Nano ID NPM Package for short Unique ID generation

Make sure to collect key & secret from razorpay dashboard of Test Mode.

Collect Razorpay Key & Secret

API Keys can be Found and Generated at Shown Location on the Dashboard Below.

Use Collected Razorpay Key & Secret in dot env file.

Create Environment Variable File in Root Directory of your Project

To make dot env work perfectly we might have to restart server.

Restart Server

Understanding How Razorpay Payments Work from Server to Frontend End Step By Step

A Razorpay Object is generated always on the server to prevent tampering.

Initialize Razorpay SDK by loading razorpay checkout js in script tag

Use Razorpay Payment Object which is already generated on the server by calling our api to trigger payment window.


Handle all the events properly on the frontend to avoid any unexpected behaviour

Payment Object needs to be generated only on the server to avoid any value tampering

How to setup backend in reactjs or nextjs for Razorpay Payment Object Generation?

In NextJS We can utilize api folder to create a serverless function

It should be in the location [YOUR PROJECT]/pages/api/payments.js

Create file named payment.js in api folder inside pages folder of your project.

Once backend is done , move to frontend part to work on frontend mechanics.

Now Let's see How to Setup Nextjs or React for Razorpay Frontend

Let's see how we can write init function for razorpaySDK.

Init Function is required to load razorpay checkout js in a script tag.

Let's Write Code to Trigger Payment Window

Setup Frontend Element to Trigger Payment Window

If everything is done correctly you would be able to see the payment window like the image below

Once Everything is Done, Press the button to trigger Window.

Once Testing & Implementation is complete , you may switch to live mode and replace the given api keys with the old values we used in our .env.local file.

Don't Forget to Switch to Live Mode & Replace Key & Secret in .env file

Explore more options & customizations allowed by the razorpay SDK but not generally used and are completely optional.

Extra Tips & Tricks

How to Setup Razorpay in React or Next.js

When Schema.org arrived on the scene I thought we might have arrived at the point where library metadata  could finally blossom; adding value outside of library systems to help library curated resources become first class citizens, and hence results, in the global web we all inhabit.  But as yet it has not happened.

Library Metadata Evolution: The Final Mile

The recent release of the Schema.org vocabulary (version 3.5) includes new types and properties, proposed by the W3C Schema Architypes Community Group, specifically target at facilitating the web sharing of archives data to aid discovery. When the Group, which I have the privilege to chair, approached the challenge of building a proposal to make Schema.org useful for archives, it was identified that the vocabulary could be already used to describe the things &amp; collections that you find in archives.  What was missing was the ability to identify the archive holding organisation, and the fact that an item is being held <span class="readmore"><a href="https://www.dataliberate.com/2019/04/03/something-for-archives-in-schema-org/">...</a></span>

Something For Archives in Schema.org

Thoughts about Linked Data, Schema.org, Structured Data, Cultural Heritage Meta Data, and associated technologies

How to Setup Razorpay in React or Next.js

Comments ()

Add a Comment

Category

Tools

JOIN US

Follow Me On

Subscribe to our Newsletters

SUPPORT ME

Follow Me On