ReactJS - Handle POST requests using react router dom

user_9437734 0
Viewed 10681

Is there a way to handle POST requests using the react-router-dom (npm) library?

Why? The payment gateway will redirect the user, who successfully payed, back to the platform. I can use a GET or POST request to transfer data with the redirection page. But I don't like having the data visible in the URL. Other options are always welcome, I'm using a REST API (Node.JS, Express) and a website/dashboard (ReactJS)

react-router-dom react-router reactjs javascript
3 Answers

I get what you're after but you can't POST to the browser. If you're uncomfortable passing data as GET params in a URL, you could:

  1. store data in LocalStorage when user submits
  2. deliver server-rendered, static HTML upon redirect that contains purchase information
  3. asynchronously get user's purchase data upon page load with AJAX or fetch() (or your favorite data-grabbing util).

Since you're in a React world, I'd recommend the third option here. How to fetch data, build an API endpoint, store data, then display it goes well beyond the scope of this question so I'd suggest some Googling. Here's a starting point: https://code.tutsplus.com/tutorials/introduction-to-api-calls-with-react-and-axios--cms-21027

user_6286990

You can handle the POST request on your express server then redirect to a static page of your app :

app.post('/payment_webhook', (req, res) => {
    const paymentOk = req.body.payment // handle POST data
    if (paymentOk) {
        res.redirect('http://app.com/payment_success');
    } else {
        res.redirect('http://app.com/payment_failed');
    }
});
user_89008390

I was discussing the same with a friend and so far we saw 2 ways of doing this:

  1. let the payment gateway return_url be an endpoint of the backend API (rails api), which will do the commit to the payment gateway (and probably updating the order in the BD), and then it will do a redirect back to your frontend app

  2. store the gateway trasaction token on the order object in the DB, and let the payment gateway return_url to return to a dynamic order url, therefore, react will now which order should render, then asynchronously ask the backend (rails service) to extract the token from the order object and do the commit (confirmation) and update it's status and return the order object back to react, then react can now show if the order was successful or not.

we opted for option #2, since I feel that the frontend (react) shall be the main communication gateway to our system, and the only one communicating to the backend shall be the frontend.

UPDATE: option #2 did not work since you cant do POST to a react-app therefore, we make the return_url to be dynamic, and we immediately redirect to the frontend with a url with the order_id as query param, then, the frontend when tries to load the order, in the backend we do the payment gatway confirmation, update the order object and return the updated order object to the frontend

user_9012960
Related