Trying to integrate a web interface into Angular2

Question

I am trying to use the Braintree SDK (braintree-web) in my Angular2 application. I would really appreciate how to make this work. I think this is because I do not import the braintree-web module, but I cannot figure out how to do this. I can find any export in the whole module.

This is where I am:

I imported the braintree-web library and the sample file I found.

ng install --save braintree-web npm install @types/braintree-web@3.0.1 

I tried to hack the JS example. Braintree provides the Angular2 TS component, but I get an error all the time:

EXCEPTION: Error: not shown (in the promise): EXCEPTION: error in. / UpaccountComponent class UpaccountComponent - built-in 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 I use braintree-web specifically, but if you use webpack, delete the declare var braintree:any; and braintree = require('BrainTreeWeb');

You will also need to add the braintree-web / index.js file to the kit, unless they have a UMD module.

With a quick look at braintree-web, it seems that braintree.setup(..) not a function. Something like this might be equivalent:

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

When installing the package, you need to add --save-dev to the installation types.

Answer 2

I have combined the brain tree just like you, and it works. I just installed another command

install first

 npm install @types/braintree-web@3.0.1er 

then install

 npm install --save braintree-web@2.30.0 

and use

 braintree = require('braintree-web'); 

Again, if it asks braintree not defined, delete declare var braintree:any; and replace the following code

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

from

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

Edit:

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

Answer 3

Note: Undo third-party JS libraries in angular 2

This is a universal solution. You do not even need to use any npm packages. Just submit the BrainTree JS libarary to index.html and follow the steps in the link above. It is applicable to any JS library.

Answer 4

You can also import it through:

 import * as braintree from 'braintree-web';