Question

我一直在尝试寻找一个解决方案，在我的angular2应用程序中包含UI中的braintrees drop，但我找不到合适的。我查看了this angular2/braintree solution，但它在顶部说不再维护它并将访问者引用到braintree网站。我在初始化信用卡表单时没有问题，但是当我将payment_nonce发送到服务器时，该值为空。

是否有人有建议或参考如何在angular2应用程序中包含ui中的braintrees drop的示例？谢谢！

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的drop-in UI？

1 个答案: