tfh-3ds-modalconflict | Stripe Developers | Page 1

brave cargoBOT Nov 9, 2023, 5:54 PM

#

twilit peak Nov 9, 2023, 5:55 PM

#

tfh-3ds-modalconflict

#

@lavish minnow Hello! I don't think it makes sense for you to switch to that approach. It's extremely complex to build right and highly discouraged.
I don't fully grasp what you are describing but you need to make sure you don't have any modal/overlay/UI that conflicts with our own modal

lavish minnow Nov 9, 2023, 5:58 PM

#

That's fair. The trouble is, it seems, the Stripe iframe gets injected at the beginning of the body tag and our modal is at the end, so even though the z-index of the iframe is extremely large and it appears over our modal, our backdrop seems to still obscure it. Is there any way to control where in the document the iframe is injected/rendered?

twilit peak Nov 9, 2023, 5:58 PM

#

No you have no control over this. You should hide your backdrop/overlay/modal before calling confirmPayment() and then show it after it's done

lavish minnow Nov 9, 2023, 5:59 PM

#

I see

#

I shall see what I can do. Thank you, though. You did confirm what I suspected and that was the complexity of taking control of the iframe rendering. It felt like the wrong approach but I was hoping there was some alternative I hadn't known of or considered

twilit peak Nov 9, 2023, 6:02 PM

#

yeah this is definitely tough. We also see devs that have third-party libraries that "steal" the keyboard focus

#

it's so hard to debug all of this 😦

lavish minnow Nov 9, 2023, 6:05 PM

#

Yeah no doubt. Well I appreciate your help, regardless 🙏

twilit peak Nov 9, 2023, 6:06 PM

#

happy to help!

brave cargoBOT Nov 9, 2023, 6:14 PM

#

lavish minnow Nov 9, 2023, 6:42 PM

#

Hey there, I actually had a small update. I've found that if I add this one CSS property to the div Stripe creates for the 3D Secure iframe, it works!
pointer-events: all;

Screenshot_2023-11-09_at_11.41.52_AM.png

sweet patrol Nov 9, 2023, 6:42 PM

#

Hello! I'm taking over and catching up...

lavish minnow Nov 9, 2023, 6:42 PM

#

Thank you kindly 🙏

#

I'm wondering if there is any realistic way I could modify this in code?

sweet patrol Nov 9, 2023, 6:43 PM

#

I doubt it. Do you have this page online where I can look at it? Really difficult to debug this kind of thing without being able to inspect it.

lavish minnow Nov 9, 2023, 6:44 PM

#

Of course. Unfortunately I do not. But I will try to get something for you. Will need 20-30 mins or so

#

I'll put it out there that adding that property to the div that's created might not be a bad addition to the Stripe SDK, regardless

sweet patrol Nov 9, 2023, 6:47 PM

#

Yeah, I can flag that internally. Kinda surprised it's not already there, but there might be a good reason we don't have it.

lavish minnow Nov 9, 2023, 6:47 PM

#

Fair enough

sweet patrol Nov 9, 2023, 7:26 PM

#

How's it going?

#tfh-3ds-modalconflict