0

I am trying to integrate PayFast into my React / NodeJS app. Using Express, my NodeJS successfully retrieves a payment uuid from the PayFast endpoint (I see this uuid in my console log) -

app.get("/api", async (req, res) => {

    paymentData["signature"] = generateSignature(paymentData, phrase);
    console.log(paymentData["signature"])

    const str = dataToString(paymentData)
    const id = await getPaymentId(str)
    res.json({uuid: id})
})

However, in my front end (ReactJS) I am getting an undefined response & possible CORS issue from my backend API end point when trying to retrieve this uuid -

My custom fetch hook:

export default function useFetch(baseUrl) {
  const [loading, setLoading] = useState(true);

  function get() {
    return new Promise((resolve, reject) => {

      fetch(baseUrl)
        .then(res => {
            console.log(res)
            res.json()
        })
        .then(data => {
          console.log(data);
          if (!data) {
            setLoading(false);
            return reject(data);
          }
          setLoading(false);
          
          resolve(data);
        })
        .catch(error => {
          setLoading(false);
          reject(error);
        });
    });
  }

  return { get, loading };
};

The error:

Response {type: 'cors', url: 'http://localhost:3001/api', redirected: false, status: 200, ok: true, …}
undefined

If I test my NodeJS end point from my browser, it successfully comes back with my payment uuid. Any one have any ideas why my React app is acting up?

imim
  • 53
  • 1
  • 8
  • You need to configure CORS to allow requests from the browser: https://expressjs.com/en/resources/middleware/cors.html – Pádraig Galvin Apr 03 '22 at 12:37
  • I have included cors in my NodeJS file using - app.use(cors()); ...however I am still getting this error. – imim Apr 03 '22 at 12:52

3 Answers3

0

Update your CORS config to accept connections from the React app host.

app.use(cors({
  origin: 'http://localhost:3000',
}));
Pádraig Galvin
  • 1,065
  • 8
  • 20
  • Thanks for this input. I have tried this as well, but the error remains. As a side note, the PayFast API mentions that "Please note that for security reasons Onsite Payments requires that your application be served over HTTPS." ..do you think that this could be causing the issue? – imim Apr 03 '22 at 19:20
  • I'm not familiar with the PayFast API, but if you are only using it from the Node.js app and not the frontend, it shouldn't matter if you are using HTTPS. If it does make use of a frontend library, then you should look into using a self-signed certificate for development. – Pádraig Galvin Apr 04 '22 at 18:09
  • Have you checked the network tab in your browser dev tools? It might help you understand what is happening with the requests. – Pádraig Galvin Apr 04 '22 at 18:11
0

Open package.json of your react app and add a line on the bottom of the json file:

"proxy":"http://localhost:3001"

3001 is the PORT that your Node http server is running on locally, if it's another PORT just change it accordingly. This will redirect all http traffic from your webpack dev server running on PORT 3000, to your Node server running on 3001.

Cesare Polonara
  • 3,473
  • 1
  • 9
  • 19
  • Thanks for this input. I have tried this, but I am still getting the same error. – imim Apr 03 '22 at 19:18
  • Is it just this route to give CORS issues or all of your routes return CORS issues ? – Cesare Polonara Apr 03 '22 at 19:21
  • It's all routes. I created a test route, works fine in the browser, but getting the CORS / undefined response from my react app. – imim Apr 04 '22 at 06:49
  • Then check this [https://create-react-app.dev/docs/proxying-api-requests-in-development/](https://create-react-app.dev/docs/proxying-api-requests-in-development/) – Cesare Polonara Apr 04 '22 at 09:28
0

For those others who might encounter a similar type of an issue, I have attached a blog post with the method that I have used to solve the CORS issue, as well as integrate with the PayFast API.

https://codersconcepts.blogspot.com/2022/04/nodejs-payfast-integration.html

imim
  • 53
  • 1
  • 8