React - Added Query Parameter getting disappeared after payment gateway redirection

Question

Initial Parameter: https://test.website.com/Form?value=testing&key=

Based on the user selection I'm adding the query parameter value key = "some_value" using the below code

      const value = new URLSearchParams(this.props.location.search).get("value");
      const key = new URLSearchParams(this.props.location.search).get("key");
      if (key === "") {
        this.props.history.push({
          pathname: "/Form",
          search: `?value=${value}&key=${key}`,
        });
      }

https://test.website.com/Form?value=testing&key=some_value But After this I've Payment Gateway Integration where on click of button in same tab page will be redirected to payment page and after success message it'll redirect back to the parent page with the one more addition of query param related to payment. At that time, the added key is missing

ie https://test.website.com/Form?value=testing&key=&paymentStatus=Success

Answer 1

The payment gateway ultimately controls where your user will be redirected to after they complete the transaction. It sounds like in your case, the gateway is doing some magic to redirect the user back to the URL they came from.

It's common for payment gateways to allow you, the integrator, to customize the url they get sent back to. Stripe accepts a successUrl in their client side JavaScript client. Adyen accepts a returnUrl in their payment flow. You don't mention the gateway you're using, but I suspect it'll have a similar feature.

If they don't - you'll have to lean into the magic. I'd suggest making sure the https://test.website.com/Form?value=testing&key=some_value url is making it all the way into the browser's history. The code snippet you've displayed here pushes it into a history prop of a component but it's unclear if that history is the same as the browser's history .