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

Question

I have been trying to look for a solution to include braintrees drop in UI in my angular2 app, but I cannot find a suitable one. I looked at this angular2/braintree solution but it says at the top that this is no longer maintained and refers the visitor to the braintree website. I have no trouble initializing the credit card form, but when I send the payment_nonce to the server, the value is null.

Does anybody have a suggestion or refer to an example of how to include braintrees drop in ui in an angular2 app? Thanks!

Answer 1

As mentioned in the comment, this was an ugly solution. But I was able to get the token with onPaymentMethodReceived, and then I added that value to a hidden input and sent the form to the server. My form has special requirements so I had to use the ngNoForm attribute.

...
      <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();
          }
        });
      });

  }