Passing data from a react form to expressJS and also redirecting to the PayuMoney website to make payment

Question

Problem Description: I am trying to integrate payuMoney in a website which uses ReactJS NodeJS and express. I have a form for taking inputs from the user. What I'm trying to do is pass the data from react form to API which is in index.js where we request the test PayuMoney URL ie https://sandboxsecure.payu.in/_payment and get a body in response which is the HTML code for the payment page.

What I'm trying to achieve: Take the input data from user, feed it to the backend API, where I'll add another private keys and generate a hash string. Request the PayuMoney test URL ie https://sandboxsecure.payu.in/_payment with the form and redirect to it and make the payment.

I have tried three methods here.

1. First is directly sending data from the frontend to the test URL using <form action="https://sandboxsecure.payu.in/_payment" method="POST" > -- This case work fine but is dangerous because it would expose private keys
2. Second is sending the post request to backend API using <form action="/api/payumoney" method="POST" > -- This one redirects to the payment page but does not send the data from the form to the backend.
3. Third is using axios/fetch POST request to the "api/payumoney" using a handler function which uses e.preventDefault() -- This one sends the data to the backend and even makes a request to the PayuMoney Test URL but doesn't redirect to the payment page.

App.js

function handleClick(e) {
var pd = {
  key: formValue.key,
  salt: formValue.salt,
  txnid: formValue.txnid,
  amount: formValue.amount,
  firstname: formValue.firstname,
  lastname: formValue.lastname,
  email: formValue.email,
  phone: formValue.phone,
  productinfo: formValue.productinfo,
  service_provider: formValue.service_provider,
  surl: formValue.surl,
  furl: formValue.furl,
  hash: ''
};


axios.post("/api/payumoney",{
  pd
}).then((res)=> {
  console.log(res);
}).catch((error)=>{
  console.log(error);
});
}


return (
  <div className="App">

  <form onSubmit={handleClick} method="POST" action="/api/payumoney">
    <label>
      FirstName:
      <input type="text" name="firstname" onChange={handleChange} value={formValue.firstname} />
    </label>
    <label>
      TxnID:
      <input type="text" name="txnid" onChange={handleChange} value={formValue.txnid} />
    </label>
    <label>
      Amount:
      <input type="text" name="amount" onChange={handleChange} value={formValue.amount} />
    </label>
    <label>
      ProductInfo:
      <input type="text" name="productinfo" onChange={handleChange} value={formValue.productinfo} />
    </label>
    <label>
      Email:
      <input type="email" name="email" onChange={handleChange} value={formValue.email} />
    </label>
    <label>
      Phone:
      <input type="text" name="phone" onChange={handleChange} value={formValue.phone} />
    </label>
    <label>
      Hash:
      <input type="text" name="hash" onChange={handleChange} value={formValue.hash} />
    </label>
    <input type="hidden" id="key" name="key" value="MERCHANTKEYVALUE"></input>
    <input type="hidden" id="salt" name="salt" value="MERCHANTSALT"></input>
    <input type="hidden" id="surl" name="surl" value="/payment/success"></input>
    <input type="hidden" id="furl" name="furl" value="/payment/fail"></input>

    <input type="submit" value="Submit" />
  </form>
</div>
);

index.js

app.post("/api/payumoney",(req,res) => {

 if (!req.body.txnid || !req.body.amount || !req.body.productinfo || !req.body.firstname || !req.body.email) {
     res.status(400).json("Mandatory fields missing");
 }
var pd = req.body;

var hashString = pd.key + '|' + pd.txnid + '|' + pd.amount + '|' + pd.productinfo + '|' + pd.firstname + '|' + pd.email + '|' + '||||||||||' + pd.salt; // Your salt value
var sha = new jsSHA('SHA-512', "TEXT");
sha.update(hashString);
var hash = sha.getHash("HEX");
pd.hash = hash;

request.post({
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    url: 'https://sandboxsecure.payu.in/_payment', //Testing url
    form: pd,
}, function (error, httpRes, body) {
    if (error){
    console.log("Error",error);
        res.status(400).json(
            {
                status: false,
                message: error
            }
        );
    }
    if (httpRes.statusCode === 200) {
        res.send(body);
    } else if (httpRes.statusCode >= 300 &&
        httpRes.statusCode <= 400) {
        res.redirect(httpRes.headers.location.toString());
        console.log("error 300 and 400");
    }
})
})

I'm using proxy to have the same origin for both the client and server endpoints.

Thanks:)

Answer 1

Solution:

Add body-parser

var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });


app.post("/api/payumoney", urlencodedParser, (req,res) => {
   console.log(req.body);
}