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.

Answer 2

I have integrated the brain-tree the same way as you have done and it works. I've just installed one more command

first install

npm install @types/[email protected]

then install

npm install --save [email protected]

and use

braintree = require('braintree-web');

Again if it asks for braintree is not defined then remove declare var braintree:any; and replace bellow code

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

with

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

Edit:

just declare the var after import declare var braintree:any; if your working with angular 4 then declare declare var require: any;

Answer 3

You can also import it via:

import * as braintree from 'braintree-web';

Answer 4

Refer this: Refrring 3rd party JS libraries in angular 2

It's a universal solution. You don't even need to use any npm packages. Just simply refer BrainTree JS libarary in index.html and follow the steps documented in above link. It's applicable for any JS library.