如何在 angular2 应用程序中使用 braintree 的插件 UI？

Question

我一直在寻找一种解决方案，以便在我的 angular2 应用程序中包含 braintrees drop in UI，但我找不到 suitable 。我查看了 this angular2/braintree solution，但它在顶部表示不再维护，并将访问者引至 braintree 网站。我在初始化信用卡表格时没有遇到任何问题，但是当我将 payment_nonce 发送到服务器时，该值为空。

有人建议或参考如何在 angular2 应用程序中包含 braintrees drop in 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();
          }
        });
      });

  }

如何在 angular2 应用程序中使用 braintree 的插件 UI？

How to use braintree's drop-in UI in an angular2 app?

braintree

angular