The checkout wizard reads the URL so 3D Secure returns land on the right step
When a client pays with a card that requires 3D Secure verification, Stripe redirects the browser to the bank's authentication page. After the client confirms, the bank redirects back to the return URL. The problem is that the checkout wizard is a client component with local state. A full page navigation wipes that state. The wizard solves this with four lines in the initial state function. When the component mounts, it reads the URL search parameters. If step equals confirmation and redirect_status equals succeeded, it sets the initial state to confirmation and immediately calls window.history.replaceState to strip the query parameters from the URL. The browser address bar shows the clean product URL. The wizard opens on the confirmation screen. The client sees the payment confirmed message, the consultation booking calendar, and the what happens next steps — exactly as if the payment had succeeded without a redirect. If the query parameters are missing or the status is not succeeded, the wizard starts on the package step as normal. The state initialiser is a lazy function passed to useState so it only runs once on mount, not on every render. The replaceState call uses an empty object for state and an empty string for title because those parameters are ignored by modern browsers — only the URL matters. The confirmation step itself does not know or care how the client got there. It renders the same full-screen overlay with backdrop blur, the same checkmark in a tinted circle, the same consultation picker with real Google Calendar availability. The name and email fields are empty after a redirect because local state was lost, but the greeting falls back to there — Thanks, there — and the Stripe webhook has already sent the confirmation email with the full details. The booking request still works because the form fields are not required for the consultation. One URL check, one state initialiser, one replaceState call, and the redirect flow is invisible to the client.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.