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 decided to embed an iframe in polymer which will point to a nodejs server backend that will render the payments page, however when I visit that URL directly I get: err=null

But when I embed the page in polymer I get: {name: "BraintreeError", code: "HOSTED_FIELDS_TIMEOUT", message: "Hosted Fields timed out when attempting to set up.", type: "UNKNOWN", details: undefined}.

Tried to make it work within polymer using https://codepen.io/braintree/pen/NbqPVO however it doesn't seem to work with Polymer 3. // setup shadow dom var btfields = document.querySelector('#braintree-fields') var shadow = btfields.createShadowRoot() var template = document.querySelector('#braintree-fields-template')

    shadow.appendChild(template.content)

    template.remove()

    // setup bt
    braintree.client.create({
      authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
    }, function (clientErr, clientInstance) {
      if (clientErr) {
        // Handle error in client creation
        return;
      }

      var options = {
        client: clientInstance,
        styles: {
          'input': {
            'font-size': '14px'
          },
          'input.invalid': {
            'color': 'red'
          },
          'input.valid': {
            'color': 'green'
          }
        },
        fields: {
          number: {
            selector: '#card-number',
            placeholder: '4111 1111 1111 1111'
          },
          cvv: {
            selector: '#cvv',
            placeholder: '123'
          },
          expirationDate: {
            selector: '#expiration-date',
            placeholder: '10/2019'
          }
        }
      };

      braintree.hostedFields.create(options, function (hostedFieldsErr, hostedFieldsInstance) {
        if (hostedFieldsErr) {
          // Handle error in Hosted Fields creation
          return;
        }

        var btn = shadow.querySelector('#submit')

        btn.addEventListener('click', function (event) {
          event.preventDefault()

          hostedFieldsInstance.tokenize(function (tokenizeError, payload) {
            if (tokenizeError) {
              console.error(tokenizeError)
            } else {
              alert('Send payload.nonce to server: ' + payload.nonce)
            }
          })
        })
      });
    });

I fails on braintree.hostedFields.create method

Solution

Found an answer at: https://github.com/braintree/braintree-web/issues/226 @runia1

<!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 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 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>