ReactJS - Handle POST requests using react router dom

Question

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)

To clarify a bit, are you trying to POST data to your browser? — imjared
– imjared, Commented Aug 27, 2018 at 15:13
@imjared Yes, I'm trying to receive data not via the url parameters but some 'secret' way that nobody can see it. — Michiel
– Michiel, Commented Aug 27, 2018 at 15:14
Because it's a visual response for the user that the payment was successful. I need data from the payment so I can't just show a default page. — Michiel
– Michiel, Commented Aug 27, 2018 at 15:26

imjared · Accepted Answer · 2018-08-27 16:01:58Z

5

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:

store data in LocalStorage when user submits
deliver server-rendered, static HTML upon redirect that contains purchase information
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

answered Aug 27, 2018 at 16:01

imjared

20.7k4 gold badges56 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michiel Over a year ago

Third option seems perfect! Thanks for giving your insights on this topic :)

Waqar Ali Over a year ago

Hello Sir i have the same Situation But I have react app with PHP Backend which are communicating using GraphQL how to handle it?

Dyo · Accepted Answer · 2018-08-27 15:37:02Z

5

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');
    }
});

answered Aug 27, 2018 at 15:37

Dyo

4,4641 gold badge18 silver badges30 bronze badges

2 Comments

Michiel Over a year ago

Thanks you for your answer, but this doesn't solve the problem that I want to display the user's payment information.

SKManX Over a year ago

Maybe too late but if paymentOk, backend might save payment data to db first and redirect link would be '..../payment_success&id={savedPaymentId}', then frontend payment_success page as soon as it loads would send a get request to fetch the payment data by using id param in the url.

Joe Cabezas · Accepted Answer · 2021-06-01 08:28:50Z

1

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

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
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

edited Jun 1, 2021 at 8:28

answered May 29, 2021 at 10:56

Joe Cabezas

1,5473 gold badges16 silver badges23 bronze badges

3 Comments

Michiel Over a year ago

Exactly, all communication between machines (non-user) should go via a REST API or something similar. A token save is a MUST for security reasons, but you also pointed that out :)

Joe Cabezas Over a year ago

@Michiel thanks for your insight, I added an update for future readers, thanks again

silveur Over a year ago

This is a great response, definitely having the return url pointed at the backend is the right approach in this case

Collectives™ on Stack Overflow

ReactJS - Handle POST requests using react router dom

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related