javascript - Braintree 托管字段未在 Polymer 上渲染

Question

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

这是我的代码的一部分，与 Braintree 在其网站 here 上提供的基本示例代码非常相似，刚刚进行了修改，以便它在自定义 polymer 元件中正常运行。

<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，从而使它们处于渲染状态，但未初始化且无用。