HOSTED_FIELDS_TIMEOUT; braintree inside iframe and shadow DOM

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="https://webviews.dock.bot/qe/address?placeId=5e79f33fbc72b5c3ace13294&&source=QE&&rate=45&&itemName=Bug 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: https://github.com/braintree/braintree-web-drop-in/issues/296

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

Any other idea how to fix this?

[crookedneighbor]

👋 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.

[crookedneighbor]

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.