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/braintree-web@3.0.1

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


}

Yes. A pretty recent version. After they switched over to WebPack. I will edit this when I get back to my dev machine and can get a version number. — SeekingMoneky, Nov 04 '16 at 16:00
I guess I can't edit a comment. Here is my cli version info... >ng -v angular-cli: 1.0.0-beta.11-webpack.8 node: 6.5.0 os: win32 x64 — SeekingMoneky, Nov 05 '16 at 01:48

score 3 · Answer 1 · answered Nov 01 '16 at 06:09

3

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.

answered Nov 01 '16 at 06:09

Fiddles

2,790
1
32
35

2

Note: I work at Braintree. Wanted to add support to this answer in saying that it looks like you are pulling in v3 of our JS SDK but attempting to use v2 methods in your code. I would try integrating via [v3](https://developers.braintreepayments.com/start/hello-client/javascript/v3) and see if this solves your issue. – Brian K Nov 02 '16 at 21:19
@BrianK I was able to incorporarte this into angular2 using v3 thanks to this answer from Fiddles. However, now I get an error saying, 'Cannot read property 'create' of undefined' on the braintree.client.create method. I am able to console log and view the version if I do a braintree.version in my component. So I know I'm definitely pulling in BrainTree into my component. I'm just trying to figure out why braintree.client is undefined. Any suggestions? – user875139 Dec 17 '16 at 13:59

Malhari · Answer 2 · 2017-06-29T17:34:31.610

3

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/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 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;

edited Jun 29 '17 at 17:34

answered Dec 08 '16 at 11:36

Malhari

155
1
9

When I implement it, it says "cannot find property setup of undefined" – Maverik Jun 28 '17 at 13:38
after i install npm install @types/braintree-web@3.0.1er and try to import using import * as braintree from 'braintree-web'; I get error message "File '...../node_modules/@types/braintree-web/braintree-web.d.ts' is not a module." – Maverik Jun 28 '17 at 13:49
@Marverik just declare the var after import `declare var braintree:any;` – Malhari Jun 29 '17 at 17:25
@Maverik don't import braintree instead require the file in component as `braintree = require('braintree-web');` – Malhari Jun 29 '17 at 17:37
if require is throwing an error then declare it as `declare var require:any;` – Malhari Jul 01 '17 at 13:05

score 3 · Answer 3 · answered Nov 10 '17 at 03:41

3

You can also import it via:

import * as braintree from 'braintree-web';

answered Nov 10 '17 at 03:41

rolu

378
2
3
19

score 0 · Answer 4 · answered Jun 28 '17 at 14:55

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.

Trying to integrate braintree-web into Angular2

4 Answers4

Linked