I have website on React/Node.js
. Since the request.post
is deprecated I am trying to refactor the code to use the axios.post
instead to submit form to the payment engine. The problem is that using axios.post
it does not submit/encodes the params correctly because the payment engine does not return the payment page. Using request.post
it works perfectly.
Test form:
<form method="post" action="https://secure.wayforpay.com/pay" accept-charset="utf-8">
<input name="merchantAccount" value="test_merch_n1">
<input name="merchantAuthType" value="SimpleSignature">
<input name="merchantDomainName" value="www.market.ua">
<input name="orderReference" value="DH1720520981">
<input name="orderDate" value="1415379863">
<input name="amount" value="1547.36">
<input name="currency" value="UAH">
<input name="orderTimeout" value="49000">
<input name="productName[]" value="Процессор Intel Core i5-4670 3.4GHz">
<input name="productName[]" value="Память Kingston DDR3-1600 4096MB PC3-12800">
<input name="productPrice[]" value="1000">
<input name="productPrice[]" value="547.36">
<input name="productCount[]" value="1">
<input name="productCount[]" value="1">
<input name="clientFirstName" value="Вася">
<input name="clientLastName" value="Пупкин">
<input name="clientAddress" value="пр. Гагарина, 12">
<input name="clientCity" value="Днепропетровск">
<input name="clientEmail" value="[email protected]">
<input name="defaultPaymentSystem" value="card">
<input name="merchantSignature" value="35340784620809a3b85c1f1f11023c40">
<input type="submit" value="Test">
</form>
Code:
const data = {
merchantAccount: "test_merch_n1",
merchantAuthType: "SimpleSignature",
merchantDomainName: "www.market.ua",
orderReference: "DH1720514976",
orderDate: "1415379863",
amount: "1547.36",
currency: "UAH",
orderTimeout: "49000",
productName: ["Процессор Intel Core i5-4670 3.4GHz", "Память Kingston DDR3-1600 4096MB PC3-12800"],
productPrice: ["1000", "547.36"],
productCount: ["1", "1"],
clientFirstName: "Вася",
clientLastName: "Пупкин",
clientAddress: "пр. Гагарина, 12",
clientCity: "Днепропетровск",
clientEmail: "[email protected]",
defaultPaymentSystem: "card",
merchantSignature: "5c287e8fb6a3ade049864c8838f8af41"
};
const wfpPaymentPageRes = await axios.post("https://secure.wayforpay.com/pay", data, {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Accept-Charset": "utf-8"
}
});
console.log("wfpPaymentPageRes.headers.location: ", wfpPaymentPageRes.headers.location);
return res.json(wfpPaymentPageRes.headers.location);
wfpPaymentPageRes.headers.location: undefined
I can not find what causes such issue. Why reques.post
works but axios.post
does not?
I have fixed this issue. When using Axios
library it gets 303
code and redirected to this payment url and returns html page instead of the url from headers.location
.
So, to fix this issue the following parameters need to be set to Axios request:
maxRedirects: 0,
validateStatus: (status) => {
return status >= 200 && status < 400;
}
When you only set maxRedirects: 0
then you will get -
AxiosError: Request failed with status code 303
You can use try/catch and handle it in the catch block but according to the official Axios documentation: https://axios-http.com/docs/req_config
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
You need to set validateStatus
:
validateStatus: function (status) {
return status >= 200 && status < 400; // Accept 303 as a valid status
},
This issue is resolved. Thank you.