Lightrun
question-mark
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.

HostedFields v3 do not render inside shadow root.

See original GitHub issue

Hi there,

I am trying to setup hosted fields inside a shadow container. The iframe loads as it should, <script>braintree.hostedFields.create();</script> is injected but no label or input is rendered.

At the moment, I am tracing the issue but i’d appreciate more useful insights from the contributors.

My init code looks like:

...

braintree.hostedFields.create({
  client: clientInstance,
  styles: {},
  fields: {
    number: {
      selector: '::shadow #card-number',
      placeholder: '4111 1111 1111 1111'
    },
    cvv: {
      selector: '::shadow #cvv',
      placeholder: '123'
    },
    expirationDate: {
      selector: '::shadow #expiration-date',
      placeholder: 'MM/YYYY'
    }
  }
}, callback);

...

Thanks in advance, Sokratis

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
runia1commented, Apr 28, 2017

@crookedneighbor Just in case you’re wondering and for anyone else out there…

You CAN use braintree and polymer 2 together, you just have to put the form outside the shadow dom and use <slot> to tell polymer where it should end up. This way the braintree lib can find the elements to bind the iframes to, and you still get your form showing up where you want it.

Example:

In index.html add your braintree-fields inside your app container <my-app>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    
    <!-- Load redux library -->
    <script src="/redux/dist/redux.js"></script>

    <!-- Load the Client component -->
    <script src="https://js.braintreegateway.com/web/3.12.0/js/client.min.js"></script>

    <!-- Load the Hosted Fields component -->
    <script src="https://js.braintreegateway.com/web/3.12.0/js/hosted-fields.min.js"></script>

    <!-- Load your application shell -->
    <link rel="import" href="/src/my-app.html">

    <!-- Add any global styles for body, document, etc. -->
    <style>
      body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <my-app>
      <div id="braintree-fields">
        <div class="field" id="card-number-container">
          <label for="card-number">Card Number</label>
          <div id="card-number"></div>
        </div>
        <div id="cvv-container">
          <label for="cvv">CVV</label>
          <div id="cvv"></div>
        </div>
        <div id="expiration-date-container">
          <label for="expiration-date">Expiration Date</label>
          <div id="expiration-date"></div>
        </div>
      </div>
    </my-app>
  </body>
</html>

then in <my-app> <slot id="#braintree-fields"> where you want to put it.

          <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            role="main">
          <my-home name="home"></my-home>
          <my-give name="give"></my-give>
          <my-checkout name="checkout">
            <slot id="#braintree-fields"></slot>
          </my-checkout>
          <my-view404 name="view404"></my-view404>
        </iron-pages>

Finally, in <my-checkout> just slot in any content (which should be only the #braintree-fields)

<iron-form id="giveForm" on-iron-form-presubmit="_giveFormSubmitted">
  <slot></slot>
</iron-form>
0reactions
crookedneighborcommented, Nov 24, 2020

@paulhulatt please jump in on the issue in the Drop-in repo: https://github.com/braintree/braintree-web-drop-in/issues/296

Read more comments on GitHub >

github_iconTop Results From Across the Web

Braintree hosted fields do not work inside iframe
I have tried to use Braintree hosted fields with Polymer but it didn't work (apparently braintree says no support yet) so I have...
Read more >
Using shadow DOM - Web Components | MDN
High-level view · Shadow host: The regular DOM node that the shadow DOM is attached to. · Shadow tree: The DOM tree inside...
Read more >
Your Checkout. Our iframes - Braintree
By default, Hosted Fields will only render static input states. For example, a focus event on the input will not propagate out to...
Read more >
Getting math to render inside custom elements (shadow DOM)
Hi. Custom elements are a pretty important par of the book i'm writing, but i'm facing difficulty getting math to render at all....
Read more >
braintree-web/CHANGELOG.md - UNPKG
544, * Hosted Fields. 545, * Fix issue where some series 2 Mastercard bin ranges were not being detected (internal assets for v3.19.1...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

`Cannot read property 'sjcl' of undefined`

Next page

Create Client Error For Bundled JS