Home » Integrate Payumoney Using React

Integrate Payumoney Using React

PayuMOney React

Payumoney is the most popular and the best online payment gateway provider that allows anyone to explore a lot of benefits. To start with integration, you need to have a merchant account on payumoney. Then, after verifying your account, you can start accepting payments directly to your bank accounts. Unlike any other options, payumoney is the best option because it does not have any integration kit available for JavaScript.

Steps To Use:

  • First, install the package
  • Set Merchant Key & Salt Key
  • First of all, you will get Merchant as well as Salt key on your pay money dashboard. After that, you need to set the Authorization header. Most importantly, you need to set both keys for production and sandbox use.
  • After that you have the ability to switch between payment modes by using prod mode to true or false. If you prefer to use sandbox mode, set prod mode to false. 

To integrate it, you need to follow the steps.

 First, you need to Add Metadata and include Scripts

 After that, you need to make the API call to the Merchant/Developer Server, and then you get the Hash value bypassing the data

 By getting the hash value from the response, you can easily pass it to the Launch function of the BOLT

After that, Handle the response as well as store the values

 Step 1:

  • First, you need to add the tags in the head part of your html file.
  • Metadata for viewport configuration:
  • It would help if you scripted the tag to include the BOLT library:

Step 2:

Generating Hash:

Most importantly, the values of parameters are to be hashed. Here udf1, udf2 are user-defined fields even these are considered as completely optional. So when you don’t use them, then it is important to replace them with empty spaces. But, of course, this will also go wrong for most of the developers.

Step 3:

Now we have the required data, which will be useful to make a hassle-free payment along with their hash.  In general, BOLT has a method which is also named LAUNCH, and it gets an object as input as well as possesses two promise blocks:

Response Handler will be useful to handle the response, be it Success, Failure or even it can be useful to handle the Cancelled transaction.

Catch Exception is useful to handle the error that occurred during the transaction.

Once the data object is passed, this will overlay gets activated simultaneously the user will be able to make payments.

One is the new hash generated, and then it has to be validated. Of course, this is also considered combined with the hash value even if it is sent in response by payumoney.  When you have both Hashes match each other, the transaction is easy and successful; else, there is some error, of course, possibly an attempt to hack.

Related to the response from the API, you need to store details and make UI changes or anything that you wish to from the response handler promise of Launch.

Related Blogs

  • express js
    December 8, 2021

    What is Express JavaScript

    Express is a web application framework that helps you build the web apps of your dreams. It was originally developed by TJ Holowaychuk and some of the core ....

  • tailwind
    March 1, 2022

    What is Tailwind CSS and how to use it?

    Tailwind CSS is an open-source, responsive utility framework for rapidly developing websites. Tailwind was first released in 2015 by Adam Denning, the crea ....

  • CSS 3.0
    November 7, 2021

    New in CSS 3

    CSS 3.0 is a new version of the CSS specification that adds many new features to improve the overall experience on websites by improving compatibility with ....