Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HOSTED_FIELDS_TIMEOUT; braintree inside iframe and shadow DOM

See original GitHub issue

General information

  • SDK/Library version: v1.16.1 & v1.22.1
  • Environment: Production
  • Browser and OS Chrome Version 80.0.3987.163 (Official Build) (64-bit)

Issue description

We host an iframe with the checkout process inside a shadow DOM. But it fails with the following Error: {name: "BraintreeError", code: "HOSTED_FIELDS_TIMEOUT", message: "Hosted Fields timed out when attempting to set up.", type: "UNKNOWN", details: undefined}

Our DOM structure:

  • html
    • body
    • shadow root
      • iframe (<iframe src=" Out Bag" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation" allowfullscreen="" width="100%" height="100%" data-openedfrombotcopy="true"></iframe>) - website with react and braintree-web-drop-in
        • div.braintree-dropin-react
          • div.braintree-dropin-react-form

I have read through the code (braintree-web-drop-in & braintree-web), and found that iframe stuff. But I dont understand why you need to access the parent if the checkout is hosted within the iframe.

When using the iframe without the wrapping shadow DOM everything works. (But I cant change this because we are using another plugin that creates the shadow DOM)

Related issue:

But that workaround doesnt work for us, as we use another plugin that creates the shadow DOM.

Any other idea how to fix this?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

crookedneighborcommented, Apr 20, 2020

👋 The hosted fields iframes need access to each of the frames on the parent window so they can easily sync up the checkout form data between the various frames. In a standard DOM environment, this works without a problem. The iframe can access all the other iframes on the parent window that share the same domain with it. Within the shadow DOM, the iframe does not get access to those sibling frames.

We’re looking to address this on the SDK level, but there’s no set timeline for it.

crookedneighborcommented, Sep 8, 2020

This should work now with the card view in v1.24.0.

Other payment methods will likely not work at this time. Going to close this for now, but we’ll be adding support as we can for the shadow DOM for other payment methods as part of the work for version 2 of Drop-in.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to handle Shadow DOM inside iframe | Q&A Session
Register for the training to be expert in XPath, Selectors, WebElement, DOM, SelectorsHub & TestCase Studio.
Read more >
Learn how to handle iframe which are inside shadow dom in ...
Take my Udemy Course and learn A to Z with deep concepts about XPath, cssSelector, WebElements, Shadow DOM, iframes, SVG, SelectorsHub, ...
Read more >
Braintree hosted fields do not work inside iframe
But when I embed the page in polymer I get: {name: "BraintreeError", code: "HOSTED_FIELDS_TIMEOUT", message: "Hosted Fields timed out when ...
Read more >
Your Checkout. Our iframes - Braintree
To address this, we launched Hosted Fields -- an extension to our custom integration that offers merchants control of the visual experience ...
Read more >
Playing with Shadow DOM - CSS-Tricks
The only styles used will be those you include in that document. Twitter does this iframe-injection in a progressive enhancement and syndication ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found