angle2アプリでbraintreeのドロップインUIを使用するにはどうすればいいですか？

Question

私はangle2アプリのUIにbraintreesドロップを含めるための解決策を探していましたが、適切なものを見つけることができません。私はthis angular2/braintree solutionを見ましたが、これは最早、これはもはや維持されておらず、ブレーンツリーのウェブサイトへの訪問者を指しています。私はクレジットカードフォームを初期化するのに問題はありませんが、payment_nonceをサーバーに送信すると、値はnullになります。

誰かが提案を持っているか、またはangular2アプリでbraintreesをuiにドロップする方法の例を参照してください。ありがとう！

Answer 1

コメントに記載されているとおり、これは醜い解決策でした。しかし、私はonPaymentMethodReceivedでトークンを取得できました。そして、その値を非表示の入力に追加して、フォームをサーバーに送信しました。私のフォームには特別な要件がありますので、ngNoForm属性を使用する必要がありました。

... 
     <input id="nonce" type="text" hidden [(ngModel)]="nonce" name="nonce"> 

... 

</form> 

ngOnInit() { 

    var url = window.location.href; 
    var id = this.getEmployeeUserId(url); 
    this.employeeId = id; 

    this.ghttp.getEmployeeByuserId(id) 
     .then((data)=>{ 
     this.day30Price = data._addAmount; 
     this.day60Price = data._add2month; 
     this.day90Price = data._add3month; 
     }); 

    this.splashhttp.getToken() 
     .then((res)=>{ 
     var id = res._body; 

     braintree.setup(id, 'dropin', { 
      container: 'dropin-container', 
      onPaymentMethodReceived: function (obj) { 

      document.getElementById("nonce").value = obj.nonce; 

      var myForm = document.getElementById("myForm"); 

      myForm.submit(); 
      } 
     }); 
     }); 

    }