Braintree託管字段不在聚合物上呈現

Question

我正在嘗試在聚合物應用程序上使用braintree的託管字段，並遇到代表託管字段的輸入框未呈現的問題。沒有錯誤出現，並且通常包含輸入框的iFrame正在呈現正確。

這裏是我的代碼的一部分，它與braintree提供的基本示例代碼在他們的webisite 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

_{完全披露：我在布倫特裏工作。如果您有任何其他問題，請隨時聯繫support。}

目前，Polymer庫和Braintree Javascript庫不兼容。我們正在與Polymer團隊開始交談，希望找到一種可以一起工作的方式。

Braintree的Hosted Fields會在設置中的每個選擇器中插入iFrame。要初始化這些框架並與它們進行通信，它將依賴商家頁面上window.frames屬性中引用的已創建的iframe。

聚合物的Shadow DOM在DOM中提取和隱藏了很多東西，部分工作可以防止Shadow DOM中的iframe被包含在window.frames中。這意味着，當與Polymer一起運行時，Braintree Javascript SDK無法訪問它創建的iframe，使它們呈現，但未初始化和無用。