#marceloatg_payment-element-modals
forest bronzeBOT
👋 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/1337125290844880896
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
stray herald
Hi 👋
The modal you are referring to is the 3DS authentication flow. Are you using a 3rd party package like stripe-vue or creating the payment element yourself?
If you are using a pre-built component, it will likely automatically trigger 3DS when required. In that scenario, you cannot track the modal opening/closing.
heavy blade
I don't mean 3DS, I mean any modal, anything that uses full screen with a darker backdrop.
stray herald
If it is an authentication, which is when Stripe.js will present a modal, we do not expose any events you can listen for that will inform you of when this is occurring.
What is the use case you are considering here?
heavy blade
my vue component is telling the iframe parent about it's height, so I can have auto-height for my iframe, so the iframe does not mess up the parent html. But when modals open inside the stripe element it's using all vertical space possible, making the Agree/proceed buttons too low on the page, which might be inconvenient for users. so I was thinking if I could know when stripe opens modals, so I can reduce the height of the iframe accordinly, and then reset it back to normal.
stray herald
Are you creating the Payment Element yourself or are you loading a component?
heavy blade
vua app creates payment element using js libary <- lwc loads vue app in iframe
stray herald
Hmmm yeah not sure what you mean by all of that. It sounds like there are layers and layers here.
Unfortunately, there isn't anything I can think of that would allow you to identify when this is occurring (at least that Stripe.js exposes).
I built a large set of test integrations using Nuxt.js but I don't load the app within an <iframe>
heavy blade
yeah, I knew this would be a long shot, there are a couple more layers that I've ommited for simplicity, but it's a pretty complicated process at the moment
but thanks anyways, I guess what I needed to know is that stripe js is not exposing anything to identify what going on inside it
thanks!
stray herald
Happy to shed what little 💡 I can 🙂
heavy blade
👍