Braintree 托管字段在 iframe 中不起作用答案

【问题标题】：Braintree hosted fields do not work inside iframeBraintree 托管字段在 iframe 中不起作用
【发布时间】：2019-06-19 14:06:38
【问题描述】：

我曾尝试将 Braintree 托管字段与 Polymer 一起使用，但它不起作用（显然 Braintree 表示尚不支持）所以我决定在 Polymer 中嵌入一个 iframe，它将指向将呈现付款的 nodejs 服务器后端页面，但是当我直接访问该 URL 时，我得到：错误=空

但是当我将页面嵌入聚合物中时，我得到：{name: "BraintreeError", code: "HOSTED_FIELDS_TIMEOUT", message: "Hosted Fields timed out when trying to setup.", type: "UNKNOWN", details:未定义}。

尝试使用 https://codepen.io/braintree/pen/NbqPVO 使其在聚合物中工作，但它似乎不适用于 Polymer 3。 // 设置阴影 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)
            }
          })
        })
      });
    });

braintree.hostedFields.create 方法失败

【问题讨论】：

标签： polymer braintree

【解决方案1】：

找到答案：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>

然后放在你想放的地方。

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

最后，插入任何内容（应该只是#braintree-fields）

<iron-form id="giveForm" on-iron-form-presubmit="_giveFormSubmitted">
  <slot></slot>
</iron-form>

【讨论】：