So I´m currently trying to redirect from my checkout page to the "pending-payment-status" page using Stripe.
Works as follows: As soon as you hit the Pay Now- Button Stripe automatically creates the payment and afterwards redirects you to a URL, which you can define:
await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: `${process.env.REACT_APP_WEBSITE_DOMAIN}/createAudit/`
}
});
When redirecting, Stripe puts the payment-ID and the Stripe Promise in the URL at the end, so that the URL would look something like this:
websitedomain/createAudit/?paymentID=...&stripepromise=...
It´s needed, so you can fetch the payment status on the redirected page. Problem is, as soon as I start to use a redirect route, in case someone misstypes the url I redirect to the default page-route. My App-Routes:
<Routes>
<Route element={<AnimationLayout />}>
<Route path="/audit" element={<Audit />} />
<Route
path="/createAudit/:params"
element={<CheckingPayment />}
/>
<Route path="/smartx" element={<TokenSelection />} />
<Route path="/faq" element={<FAQ />} />
<Route path="/support" element={<Support />} />
<Route path="/terms" element={<Terms />} />
<Route path="/policy" element={<Policy />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<Navigate to="/audit" replace />} />
</Route>
</Routes>
As you can see, I´m using a /:params URL so I can access these parameters on the pending page, but like I said, I´m still getting redirected to the homepage again. Any ideas?
Glad for any help!