Submit form to pament engine using Axios issue

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="some@mail.com">
  <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: "some@mail.com",
  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?

Solution

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.