Braintree 托管字段未在 Polymer 上呈现

Question

我正在尝试在 Polymer 应用程序上使用 braintree 的托管字段，但运行遇到了代表托管字段的输入框未呈现的问题。没有出现错误，通常包含输入框的 iFrame 可以正确呈现。

这是我的部分代码，与 braintree 在其网站 here 上提供的基本示例代码非常相似，只是进行了修改，以便它在自定义聚合物元素中正常运行。

<script src="https://js.braintreegateway.com/web/3.5.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.5.0/js/hosted-fields.min.js"></script>

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
    </style>
    <form action="/" method="post" id="cardForm" >
      <div class="horizontal layout center-justified card-container">
        <div class="vertical layout center-justified">
          <paper-card id="creditCardDetails" heading="Credit Card Information" class="card-content" elevation="2" style="">
            <div class="field-label">
              <label class="hosted-field-braintree--label" for="card-number">Card Number</label>
              <div id="card-number" class="hosted-field-braintree"></div>
            </div>
            <div class="field-label">
              <label class="hosted-field-braintree--label" for="expiration-date">Expiration Date</label>
              <div id="expiration-date" class="hosted-field-braintree"></div>
            </div>
            <div class="field-label">
              <label class="hosted-field-braintree--label" for="cvv">CVV</label>
              <div id="cvv" class="hosted-field-braintree"></div>
            </div>
            <div>
              <paper-button id="creditButton" raised class="custom-color" on-click="_onCreditButtonClick">Submit</paper-button>
            </div>
          </paper-card>
        </div>
      </div>
    </form>
  </template>

  <script>
    Polymer({
    is: 'payment'
    ...
    });

    var form = document.querySelector("*/deep/#cardForm");
    braintree.client.create({
    authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
    }, function (clientErr, clientInstance) {
      if (clientErr) {
        console.error(clientErr);
        return;
      }

      braintree.hostedFields.create({
        client: clientInstance,
        styles: {
          'input': {
            'font-size': '14px'
          },
          'input.invalid': {
            'color': 'red'
          },
          'input.valid': {
            'color': 'green'
          }
        },
        fields: {
          number: {
            selector: '*/deep/#card-number',
            placeholder: '4111 1111 1111 1111'
          },
          cvv: {
            selector: '*/deep/#cvv',
            placeholder: '123'
          },
          expirationDate: {
            selector: '*/deep/#expiration-date',
            placeholder: '10/2019'
          }
        }
      }, function (hostedFieldsErr, hostedFieldsInstance) {
           if (hostedFieldsErr) {
             console.error(hostedFieldsErr);
             return;
           }
           console.log(hostedFieldsInstance)
         });
       });           
     }); 
   });
  </script>

感谢任何正确方向的帮助。

Answer 1

_{完全披露：我在 Braintree 工作。如果您有任何其他问题，请随时联系 support。}

目前，Polymer 库和 Braintree Javascript 库不兼容。我们正在与 Polymer 团队开始对话，希望找到一种他们可以一起工作的方式。

Braintree 的托管字段在您在设置中指定的每个选择器中插入 iFrame。要初始化这些框架并与它们通信，它依赖于在商家页面上的 window.frames 属性中引用创建的 iframe。

Polymer 的 Shadow DOM 抽象并隐藏了 DOM 中的许多内容，并且部分工作阻止 Shadow DOM 中的 iframe 包含在 window.frames 中。这意味着当运行与 Polymer 一起使用时，Braintree Javascript SDK 无法访问它创建的 iframe，使它们呈现，但未初始化且无用。

Braintree 托管字段未在 Polymer 上呈现

Braintree Hosted Fields not rendering on Polymer

html

javascript

braintree

polymer

polymer-starter-kit