将数据从react表单传递到expressJS，并重定向到PayuMoney网站进行支付

Question

问题描述:我试图整合payuMoney在一个网站，使用ReactJS NodeJS和express。我有一个接收用户输入的表单。我要做的是将数据从react表单传递到API，这是在index.js中，我们请求测试PayuMoney URL，即https://sandboxsecure.payu.in/_payment，并在响应中获得一个主体，这是支付页面的HTML代码。

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

我已经尝试了三种方法。

1. 第一个是从前端直接发送数据到测试URL使用<form action="https://sandboxsecure.payu.in/_payment" method="POST" >——这种情况可以正常工作，但很危险，因为它会暴露私钥
2. 第二个是使用<form action="/api/payumoney" method="POST" >发送post请求到后端API——这一个重定向到支付页面，但不从表单发送数据到后端。
3. 第三是使用axios/fetch POST请求到api/PayuMoney;使用一个处理函数，使用e.p 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");
}
})
})

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

谢谢:)

Answer 1

解决方案:

添加分析体

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

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