Braintree Hosted Fieldsがポリマーでレンダリングされない

Question

ポリマーアプリケーションでbraintreeのホストフィールドを使用しようとしていますが、ホストされたフィールドを表す入力ボックスがレンダリングされない問題が発生しています。エラーは表示されず、通常は入力ボックスを含むiFrameが適切にレンダリングされます。

ここに私のコードの一部があります。これは、webintite hereでbraintreeが提供している基本的なサンプルコードとかなり似ていて、カスタムポリマー要素内で正しく機能するように変更されたばかりです。

<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は、セットアップで指定した各セレクタにiFramesを挿入します。これらのフレームを初期化してそれらと通信するためには、作成したiframeが商人のページのwindow.framesプロパティで参照されている必要があります。

PolymerのShadow DOMはDOM内の多くのものを抽象化して隠し、その一部はShadow DOM内のiframeがwindow.framesに含まれないようにします。これは、Polymerと並行して実行される場合、Braintree Javascript SDKは作成したiframeにアクセスできず、レンダリングされたままになりますが、初期化されず、無駄になります。