将数据从反应表单传递到 expressJS 并重定向到 PayuMoney 网站进行付款

问题描述

问题描述：我正在尝试将 payuMoney 集成到使用 ReactJS NodeJS 和 express 的网站中。我有一个用于从用户那里获取输入的表单。我想要做的是将数据从反应表单传递到 index.js 中的 API，我们在其中请求测试 PayuMoney URL，即 https://sandboxsecure.payu.in/_payment 并获取响应正文，即付款页面的 HTML 代码.

我想要实现的目标： 从用户那里获取输入数据，将其提供给后端 API，在那里我将添加另一个私钥并生成一个哈希字符串。使用表单请求 PayuMoney 测试 URL，即 https://sandboxsecure.payu.in/_payment 并重定向到它并进行付款。

我在这里尝试了三种方法。

首先是使用直接从前端发送数据到测试 URL <form action="https://sandBoxsecure.payu.in/_payment" method="POST" > -- 这种情况工作正常但很危险，因为它会暴露私钥
其次是使用 <form action="/api/payumoney" method="POST" > 将 post 请求发送到后端 API -- 这会重定向到付款页面，但不会将数据从表单发送到后端。
第三种是使用 axios/fetch POST 请求到 "api/payumoney" 使用处理函数，它使用 e.preventDefault() -- 这个将数据发送到后端，甚至制作一个请求到 PayuMoney 测试 URL，但不重定向到付款页面。

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");
    }
})
})

我使用代理为客户端和服务器端点提供相同的来源。

谢谢:)

解决方法

解决方案：

添加正文解析器

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


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

express payumoney reactjs reactjs rest