'How to add PAYTM gateway integration in react js web application?

I got it working from here https://github.com/paytm/paytm-pg-node-sdk-sample/blob/master/javascript/DemoApp.js I used this in express and it is working but now I want do it from react and payment has to be done from frontend.



Solution 1:[1]

I was also wondering how I can do that, then I tried the youtube video mentioned by Robokishan, But I found that things were not that good. As we use Reactjs we don't want to redirect our user to another page. So I contacted the Paytm dev support team and they suggested js checkout solution.

Let me go through the steps you can use to implement it in your react app

  1. You have to create a transaction token in your backend. This link will help you with that: https://developer.paytm.com/docs/api/initiate-transaction-api/
  2. Then go to this GitHub repo https://github.com/paytm/paytm-blink-checkout-react just download it and extract it here you will find two folders 1st named lib and 2nd example. You don't need the lib folder as you can install that package from npm so just ignore it.
  3. Now install the package mentioned above in your react project https://www.npmjs.com/package/paytm-blink-checkout-react
  4. Now to go that download repo go to example/src/component/app.js here you will find all the codes you need to implement Paytm gateway in your code just copy it and modify it as your need

Please feel free to suggest some improvement or if you have any other better solution

Solution 2:[2]

You can use paytm blink checkout solution as you already integrated node sdk for backend. Please refer the link blink checkout available on developer section of paytm. Sample code for react is available on github for blink checkout. https://github.com/paytm/paytm-blink-checkout-react

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Frustrated Artist
Solution 2 ravindra malviya