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

  • December 1, 2021

    Future Scope of Backend Developer

    Back-end developers are the backbone of any web application. They work on the back end to get data into a web page and ensure that it looks good. In this a ....

  • July 8, 2022

    Automatic Batching in React 18

    React is a popular JavaScript library for building user interfaces. The version 18 of React brought some new features that make it easier to manage and org ....

  • box model
    November 8, 2021

    What is Box Model in CSS

    Box Model is a CSS property that controls how elements are displayed on the screen. It was created to model the way elements are drawn in print. The Box Mo ....