Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Recurly (3DS) in Test Mode with <dialog /> elements #876

Closed
simeydotme opened this issue Mar 15, 2024 · 3 comments
Closed

Recurly (3DS) in Test Mode with <dialog /> elements #876

simeydotme opened this issue Mar 15, 2024 · 3 comments

Comments

@simeydotme
Copy link

simeydotme commented Mar 15, 2024 •
edited
Loading

Hi,

I'm trying to build out the 3DSecure flow with Recurly, using the test environment.
I have the checkout flow open in a side-panel utilising <dialog /> and the HTML Api for TopLayer.

When the challenge test screen appears (<iframe name="__privateStripeFrame****"> inside of a <div>), it is BEHIND the TopLayer and attached to the very beginning of the <body>. I have tried two things;

  1. set the attach() to my <dialog />
const topModal = document.querySelector('dialog[data-is-top=true]');
const attachTo = topModal || document.body;
threeDSecure.attach(attachTo);
  • this has no effect (at least for test flow)
  1. move the <iframe /> after it's attached
  • this causes the second (inner) <iframe name="stripe-challenge-frame" /> to disappear completely (.ThreeDS2-container is empty)

In the screenshot (with some redaction) you can see the Visa Test Card Modal is stuck behind my <dialog />'s ::backdrop . The reason is because the <dialog /> API promotes it to the ::TopLayer which cannot be overwritten with a non-top-layer element.

Screenshot 2024-03-15 at 15 28 31

So the questions are;

  • is this an error only for the test modal?
  • is .attach() broken?
  • what can I do about this?
@chrissrogers
Copy link
Member

chrissrogers commented Mar 20, 2024 •
edited
Loading

For Stripe's 3-D Secure implementation, we're somewhat limited in our attachment controls. See code. From that call, they are making some assumptions about modal placement, and aren't going to make use of the DOM attachment point passed to attach.

Moving an <iframe> would cause it to re-render, and likely to break the communication between the controlling entity on the parent (Stripe.js) and the application inside of the iframe.. that's likely the cause of the disappearance you're seeing.

I'll admit my familiarity with the dialog element and the TopLayer are limited, so I'm not sure I can provide any direct help with those.. but if there is no way to lift the Stripe modal element into the TopLayer, then it may be best to go the "classic" modal render route, unfortunately.

@simeydotme
Copy link
Author

Thanks for the response @chrissrogers :)
Sadly, our entire frontend design system was recently moved over to <dialog />

But for now, I'm closing the side-panel drawer upon triggering the 3DS flow. And re-opening upon an error or failed challenge.
It's not ideal, as it can wipe out the creditcard fields, but it's the only thing I could come up with.

don't hesitate to @ me if anything changes with the way modals/iframes are rendered 👍

@simeydotme
Copy link
Author

https://stackoverflow.com/a/75947179/1121532

According to this, it may only be a test-env issue, so I will monitor how it works with a real card payment in prod, and if there's no issue I'll put a flag in to close only in staging/dev.

recurly-integrations pushed a commit that referenced this issue Jul 30, 2024
4.29.2
1ea4ec5 
[Full Changelog](v4.29.1...v4.29.2)

**Merged Pull Requests**

- Adds billing address override to CashApp implementation [#890](#890) ([chrissrogers](https://github.com/chrissrogers))
- Small venmo tweaks for development debugging [#841](#841) ([douglasmiller](https://github.com/douglasmiller))

**Closed Issues**

- SyntaxError: Invalid regular expression: missing terminating ] for character class [#880](#880)
- Recurly (3DS) in Test Mode with `<dialog />` elements [#876](#876)
- Recurly-JS is no longer updating the DefinitelyTyped repo [#875](#875)
- Formatting on DefinitelyTyped update [#856](#856)
- Inconsistent Autofill behavior with Recurly.js Elements [#845](#845)

##### Minified MD5 Checksum
```
3b362833dcadd2e6b87b06f217b1591a ./build/recurly.min.js
```
##### [SRI Hash](https://www.srihash.org/)
```
IMfB8TGNE8AccY/XLO+r19nboApM3KhPF7e8WcxhLMUpJLR92z+p6n2XpmiaYjSJ
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chrissrogers @simeydotme