CODEWITHSUNDEEP
javascriptangulartypescriptbraintree
SeekingMoneky
SeekingMoneky

Reputation: 137

Trying to integrate braintree-web into Angular2

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


}

Upvotes: 10

Views: 4431

Answers (4)

rolu
rolu

Reputation: 398

You can also import it via:

import * as braintree from 'braintree-web';

Upvotes: 3

Malhari
Malhari

Reputation: 155

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;

Upvotes: 3

Maverik
Maverik

Reputation: 421

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.

Upvotes: 0

Fiddles
Fiddles

Reputation: 2916

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.

Upvotes: 3

Related Questions