#Dan (ClassFit)
half hinge
Hello is this OTP from your site or some Stripe product?
half hinge
Gotcha, that actually looks like it is the bank's form that is having an issue (we create an iframe that uses the bank's site). The customers here should reach out to their bank for help
lyric heart
We've had this from clients in several countries, with many different bank accounts.
Is there a potential problem solution that would be singular rather than pointing to lots of different banks?
either on Stripe's side, or our side?
half hinge
Can you describe the issue a bit more? Are they not able to type anything in to the inputs? Or is this an issue of users not getting the OTP text? Or is the failure different for each client?
dire mica
not able to type anything in to the inputs
lyric heart
also, if helpful. Our clients seem to be fine to add their card details in our settings section (no charge). But when they try to add it at checkout with OTP and an associated charge, this happens (for some).
queen stumpBOT
dire mica
can u help please ?
half hinge
Looking in to this. Trying to determine where this issue might be
lyric heart
Thanks Pompey - much appreciated
fair ocean
Hello 👋
Taking a look too
Do you have a modal or something that renders at the same time as the 3DS modal? I highly suspect its stealing the focus from the 3DS modal
wet spoke
no
dire mica
No we don't have
fair ocean
Can you try logging out document.activeElement when the 3DS modal is shown?
dire mica
ok min please
fair ocean
You can do it before you call confirmPayment or whatever method that launches the 3DS modal and once the modal is shown, you'd want to click in the text field and print document.activeElement again by just typing it in your browser console
lyric heart
@dire mica @wet spoke
dire mica
ok min
fair ocean
So if you look at the element that has the focus, it seems to be the checkout form that you have (and not the 3DS modal)
Looking at the video that you've shared, you clearly have another modal behind the 3DS modal
I'm 99% sure that the modal in the background is stealing the focus from the 3DS modal which is preventing users from inputting values
lyric heart
So essentially even though the 3DS looks like it is on top, from a functionality perspective there is something else on top which is stopping people click on it?
Like when you get ad popups in browsers?
fair ocean
Yup, exactly. If you're using a third-party library for the modal in the background then its possible it forces the elements in it to keep the focus on themselves (by calling .focus(..) function).
You would want to look into that and prevent that from happening
lyric heart
SO right now we have this flow
- Client inputs data
- Clicks checkout
- Checkout prompts OTP
- When client returns they can't add the OTP.
The devs are saying that if this were the case, they wouldn't have been able to perform step 1 and 2?
Unless you're saying that when the client completes step 2, and prompts the OTP - that in tandem, this element pops up with the focus on at at the same time?
fair ocean
Looking at the video, Step 1 & 2 happen inside that modal itself, right? And Step 3 happens in a separate modal?
When the new modal pops up, the focus is still on the old one (as confirmed by running document.activeElement, it is returning the form in the background)
lyric heart
So that makes sense to be... but...
fair ocean
so the modal in the background is stealing the focus back
lyric heart
Everything else in that popup works.
We can click other buttons etc
Your theory (which I though was the case too), would mean we wouldn't be able to do any of that right?
fair ocean
Buttons are different than inputting text values using the keyboard
You could try altering the flow a bit where after clicking on checkout, you dismiss the modal in the background allowing 3DS modal to be the only one on the page. This should help you confirm the issue
lyric heart
@fair ocean
fair ocean
Can you check what document.activeElement is pointing to?
fair ocean
NP! 🙂