#dfabulich_embedded-checkout-cancel-button
balmy gorgeBOT
đ Welcome to your new thread!
â˛ď¸ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
âąď¸ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
đ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1318262705228087308
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- dfabulich_code, 2 days ago, 6 messages
- dfabulich_code, 3 days ago, 22 messages
uncut wolf
Hi đ
You cannot add any elements inside the checkout UI, that is controled by Stripe
If you want a Cancel button, you can add it outside of the Checkout UI and use the button click to expire the Checkout Session.
https://docs.stripe.com/api/checkout/sessions/expire
weak walrus
That's a bummer, because the Stripe Checkout form has a large margin at the bottom
If I want to put my Cancel button closer to the Pay button, do I have to abandon Stripe Checkout and switch to Stripe Web Elements and Payment Intents?
uncut wolf
If you want that granular level of control, the Payment Element is probably a better fit.
Or you could indicate that navigating back in your site cancels the Session, if you want the Customer to be able to back out at that point.
weak walrus
This is a huge bummer. I'm migrating from the legacy version of Stripe Checkout, which uses a floating dialog with an X button built-in
It really hurts that I'm going to have to throw away my Stripe Checkout integration just so I can get a cancel button in the UI
uncut wolf
I can raise it as a feature request. Looking at existing feature requests, it seems people have already requested the browser's back action be treated as a Cancel mechanism.
But you want the button specifically?
weak walrus
The main thing I'm trying to do is to make Stripe Checkout behave like legacy Stripe Checkout, which means running in a floating dialog, which must therefore have a way to dismiss the dialog
uncut wolf
Okay but we (Stripe) don't put in a floating dialogue. So we (Stripe) won't build in something to dismiss the dialog
The current Checkout UI has much more detail displayed than the legacy approach
weak walrus
I get that, and I did my best to try to emulate it myself, but I've been stymied at every turn
For example, I tried putting the checkout form in a <dialog>
But that doesn't work at all.
We generally recommend not embedding our Elements in a modal/popup for this actual limitation.
uncut wolf
Yeah, that makes sense to me
And handling situations like 3DS are one of the reasons we want the UI loaded on the page
weak walrus
You can see our example legacy Stripe Checkout implementation here https://www.choiceofgames.com/magehunter-phoenix-flame/ (click "Buy It Now")
Does Stripe generally recommend showing Stripe Checkout on a fully separate page, such that the back button is what users should use to cancel their purchase?
It seems confusing to me to have no on-screen cancel UI, and just assume that the user will figure out that the back button will cancel
hmm, I see that even in the Stripe-hosted page, the cancel button is pretty subtle
It's that tiny little âŹ ď¸ button in the upper left corner
uncut wolf
Yeah. I can make a feature request that they add a more clear cancel button. I cannot guarantee if/when the feature would be developed/deployed though
weak walrus
Does Stripe generally recommend showing Stripe Checkout on a fully separate page, such that the back button is what users should use to cancel their purchase?
Just to clarify, is that "Yeah" the answer to this question?
uncut wolf
I was refering the subtle nature of the cancel mechanism. We do not have an explicit recommendation for which mechanism you use to cancel the checkout session
weak walrus
In that case, I think I'd like to file another request, hopefully an easier one, to add a documentation page about canceling Stripe Checkout sessions
I'd love it if the documentation would say "in hosted mode, provide a cancel URL. In embedded mode, you can't use cancel_url, but you could do it like this, or like this, or like this"
uncut wolf
Yes I can file that request! It's a good call out and hopefully will make embedded checkout easier for users to integrate.
weak walrus
For now, I think I'll make the embedded UI appear on its own page, so the back button will cancel, and I'll include a âŹ ď¸ UI at the top of the screen, roughly matching the Stripe-hosted version
Earlier you mentioned using the expire API. If I just don't do that, does anything bad happen?
uncut wolf
No, it just means that Checkout Session has the potential to be used to create a payment. If you never re-render the UI, I don't see how a customer would actually trigger that event but it's still technically possible.
I just think it's a way to be thorough.
weak walrus
OK, I think I've got a plan for now. Thanks for your help.
uncut wolf
Okay great. I'm glad this chat was useful.