Node JS - Posting HTML form (or FormData) from my Node server to a 3rd party server

user_3034412 0
Viewed 44

Problem:

I have a HTML form I would like to send to a 3rd party server (a credit card processor). When I render the form from my React client side, it gets submitted and I receive responses I am supposed to receive.

The problem is it contains a lot of sensitive information like Merchant ID and Sha1Hash that I would like to hide from the client. So I would like to be able to action the form from my Node server instead of doing it on the client.

What I want to do:

  1. post some not so sensitive client information to my Node server (I know how to do this),
  2. then have Node server complete a new form with sensitive info and post it to the 3rd party server (I don't know how to do this)
  3. receive response from the server (the response is a Hosted Payment Page) and display it on the client (I don't know if I know how to do this)

I didn't know how to use HTML form on Node side so I tried using FormData and sending it via axios, but it was giving me ECONRESET error when I didn't set the header. I didn't know what to set as the header, I basically copied and pasted the Request Header section from Chrome Dev tool. It stopped giving me ECONRESET error, but it's not reading the data correctly.

let formData = generateFormData(req.body, hash)
let header = {
    "Connection": "keep-alive",
    "Content-Length": "907",
    "Cache-Control": "max-age=0",
    "Content-Type": "application/x-www-form-urlencoded",
    "Upgrade-Insecure-Requests": "1",
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36",
    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    "Sec-Fetch-Site": "cross-site",
    "Sec-Fetch-Mode": "navigate",
    "Sec-Fetch-Dest": "document",
    "Accept-Encoding": "gzip, deflate, br",
    "Accept-Language": "en-CA,en;q=0.9,ko-KR;q=0.8,ko;q=0.7,en-GB;q=0.6,en-US;q=0.5,fr;q=0.4"
}
console.log('formdata', formData)

axios({
    method: "post",
    url: actionUrl,
    data:formData,
    headers: header
})
.then(function (response) {
    //handle success
    console.log('succeeeeeeeeeeeeeeeeeeeeeeeed')
    console.log('response', response)
    return res.send(response)
  })
  .catch(function (response) {
    //handle error
    console.log('faaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaail')
    console.log(response)
    return res.send(response)
  });
reactjs node.js forms html
1 Answers

I came across with the same problem Here is my solution, make sure to add required headers same as in html page

const FormData = require('form-data');
const formData = new FormData();
formData.append('firstname', "yourname");
const requestConfig = {
    method: 'POST',
    url: actionUrl,
    headers: {
        ...formData.getHeaders(),
        'Content-Type': 'application/x-www-form-urlencoded'
//add required headers 
    },
    data: formData
};
Axios(requestConfig)
    .then((response) => {
        if (response) {
            console.log("RESPONSE:", response);
        }
    })
    .catch((err) => {
        if (err) {
            console.error("ERR:", err);
        }
    })
user_61276720
Related