Question

我尝试将Braintree托管字段与Polymer一起使用，但没有用（显然Braintree表示尚无支持），所以我决定将iframe嵌入Polymer中，该指向iframe指向将提供付款的nodejs服务器后端页面，但是当我直接访问该URL时，我得到： err = null

但是，当我将页面嵌入到聚合物中时，我得到：{名称：“ BraintreeError”，代码：“ HOSTED_FIELDS_TIMEOUT”，消息：“托管字段在尝试设置时超时。”，键入：“ UNKNOWN”，详细信息：未定义}。

试图使用https://codepen.io/braintree/pen/NbqPVO使它在聚合物中运行，但是似乎不适用于聚合物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方法上失败

Answer 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字段）

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

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

1 个答案: