Question

I'm attempting to use braintree's hosted fields on a polymer application and am running into an issue where the input boxes representing the hosted fields are not rendering. No errors are appearing, and iFrame that would normally contain the input boxes are rendering properly.

Here is part of my code, which is fairly similar the the basic example code provided by braintree on their webisite here, just modified so that it functions properly within a custom polymer element.

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

Any help in the right direction is appreciated.

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 Hosted Fields not rendering on Polymer

1 个答案: