Describe the bug
When the checkout is embedded in an iframe (including the embeddable widget), completing a Stripe card payment redirects the top-level / parent window to the return URL instead of staying inside the embedded frame. The host page is navigated away mid-checkout.
To Reproduce
Steps to reproduce the behavior:
- Embed an event's checkout in an iframe on another page (or use the embeddable widget).
- Add tickets, go to checkout, and enter the Stripe test card
4242 4242 4242 4242.
- Click Pay.
- The entire top-level tab navigates to
/checkout/{eventId}/{orderShortId}/payment_return — the page that embedded the checkout is replaced.
Expected behavior
Payment confirmation should complete within the embedded frame; the parent / host page should not be navigated away.
Screenshots
N/A — behavioural: the embedding page is replaced by the Hi.Events return page.
Logs
No errors; this is Stripe.js's default confirmPayment redirect behaviour.
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome / Safari
- Version: latest
Hi.Events Version and platform
v1.9.0-beta, self-hosted via Docker (all-in-one image).
Additional context
Root cause: frontend/src/components/forms/StripeCheckoutForm/index.tsx calls stripe.confirmPayment({ elements, confirmParams: { return_url } }) without redirect: 'if_required', so the Payment Element performs a top-level redirect after confirmation. (Stripe advises against placing the Payment Element inside an iframe when relying on that redirect — see the Stripe Payment Element docs.)
Setting redirect: 'if_required' lets card payments confirm inline; the app can then navigate to the existing payment_return route itself (mirroring the offline-payment navigate(...) in Payment/index.tsx), keeping the flow inside the frame. Redirect-based methods (iDEAL, Bancontact, …) and hard 3DS challenges still redirect as before.
Happy to open a small, one-file PR for this.
Describe the bug
When the checkout is embedded in an iframe (including the embeddable widget), completing a Stripe card payment redirects the top-level / parent window to the return URL instead of staying inside the embedded frame. The host page is navigated away mid-checkout.
To Reproduce
Steps to reproduce the behavior:
4242 4242 4242 4242./checkout/{eventId}/{orderShortId}/payment_return— the page that embedded the checkout is replaced.Expected behavior
Payment confirmation should complete within the embedded frame; the parent / host page should not be navigated away.
Screenshots
N/A — behavioural: the embedding page is replaced by the Hi.Events return page.
Logs
No errors; this is Stripe.js's default
confirmPaymentredirect behaviour.Desktop (please complete the following information):
Hi.Events Version and platform
v1.9.0-beta, self-hosted via Docker (all-in-one image).
Additional context
Root cause:
frontend/src/components/forms/StripeCheckoutForm/index.tsxcallsstripe.confirmPayment({ elements, confirmParams: { return_url } })withoutredirect: 'if_required', so the Payment Element performs a top-level redirect after confirmation. (Stripe advises against placing the Payment Element inside an iframe when relying on that redirect — see the Stripe Payment Element docs.)Setting
redirect: 'if_required'lets card payments confirm inline; the app can then navigate to the existingpayment_returnroute itself (mirroring the offline-paymentnavigate(...)inPayment/index.tsx), keeping the flow inside the frame. Redirect-based methods (iDEAL, Bancontact, …) and hard 3DS challenges still redirect as before.Happy to open a small, one-file PR for this.