Trying to integrate braintree-web into Angular2

Question

I am trying to use the Braintree SDK (braintree-web) in my Angular2 app. I'd really appreciate any pointers on how to get this working. I think it is because I am not importing the braintree-web module, but I can't figure out how to to that either. I can find any exports in the whole module.

Here is where I am:

I've imported the braintree-web library and a typings file I found.

ng install --save braintree-web
npm install @types/[email protected]

I tried to hack the JS example Braintree provides into a Angular2 TS Component, but I keep getting an error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./UpaccountComponent class UpaccountComponent - inline template:5:7 ORIGINAL EXCEPTION: TypeError: this.braintree.setup is not a function

Here is the .ts file.

import { Component, OnInit } from '@angular/core';


declare var braintree:any;

@Component({
  selector: 'up-btcheckoutform',
  templateUrl: './btcheckoutform.component.html',
  styleUrls: ['./btcheckoutform.component.css']
})
export class BtCheckoutFormComponent implements OnInit {
  braintree = require('BrainTreeWeb');
  // braintree = require('braintree-web');
  integration: any

  constructor() {   }

  ngOnInit() {
    var c = this;
    var clientToken = "CLIENT_TOKEN_GOES_HERE";
    braintree.setup(clientToken, "dropin", {
      container: "payment-form",
      onReady: function(int) {
        c.integration = int
        }
      });
  }

  ngOnDestroy() {
    this.integration.teardown();
  }


}

Answer 1

I'm not sure about the usage of braintree-web specifically, but if you're using webpack, remove the lines declare var braintree:any; and braintree = require('BrainTreeWeb');

You'll also need to add the braintree-web/index.js file to the bundle, unless they've got a UMD module.

From a quick glance at braintree-web, it looks like braintree.setup(..) isn't a function. Something like this might be equivalent:

braintree.client.create({ 
      authorization: "long-token-string"},
      (err, client) => {
            // Do stuff here
            client.request({..});
      });

With the package installs, you'll need to have added --save-dev to the types install.