How to use npm module in angular?

Question

I am trying to use braintree-web npm module with AngularJS since I get errors when I try and include it in the template with:

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

I have a state called billing that I use to route to my template with the controller, 'BillingController'. I want to be able to inject braintree-web and myscript.js:

<script>
  braintree.setup(
          // Replace this with a client token from your server
          clientToken,
          "dropin", {
            container: "payment-form",
            form: "checkout",
          });
</script>

Please help. how can I do this?

EDIT:

Currently, this is placed a the bottom of my

<!-- braintree sdk -->
    <script src="https://js.braintreegateway.com/v2/braintree.js"></script>

    <!-- braintree setup -->
    <script>
      var clientToken = removed;
      braintree.setup(
          // Replace this with a client token from your server
          clientToken,
          "dropin", {
            container: "payment-form",
            form: "checkout",
          });
    </script>

These are the errors I'm getting:

Looks to me like the braintree script is not loading(?)

Thanks for the help

Answer 1

Do you use braintree-web from this url? https://github.com/jeffcarp/braintree-angular

This is module special for angular. Then you should create file like app.js and paste this code:

var yourApp = angular
  .module('yourApp', ['braintree-angular'])
  .constant('clientTokenPath', '/path-or-url-to-your-client-token');

For example:

(function () {
    'use strict';

    var app = angular.module('yourModuleName', [
        'braintree-angular'
    ]);

    app.constant('clientTokenPath', '/path-or-url-to-your-client-token');

    app.config(['$interpolateProvider', function ($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }]);


}());

Your controller.js could be like this:

(function() {
    'use strict';

    angular
            .module('yourModuleName')
            .controller('DashboardCtrl', DashboardCtrl);

    DashboardCtrl.$inject = ['$scope', '$braintree'];

    function DashboardCtrl($scope, $braintree) {

        var client;
        $scope.creditCard = {
            number: '',
            expirationDate: ''
        };

        var startup = function() {
            $braintree.getClientToken().success(function(token) {
                client = new $braintree.api.Client({
                    clientToken: token
                });
            });
        };

        $scope.payButtonClicked = function() {

            // - Validate $scope.creditCard
            // - Make sure client is ready to use

            client.tokenizeCard({
                number: $scope.creditCard.number,
                expirationDate: $scope.creditCard.expirationDate
            }, function (err, nonce) {

                // - Send nonce to your server (e.g. to make a transaction)

            });
        };

        startup();

    }


}());

Notice that app.js should be included before rest of your controllers, factories and services, and after you angular.js and braintree.js library.

Answer 2

I think your best hope is browserify. I have never tried it myself but I think the idea behind it is converting NodeJS code into a format the browser can understand.

npm i braintree
npm i browserify

Maybe try a small test and see if it works?

Answer 3

To expand on @danday74 we use browserify like this at work.

In a nutshell this is how we use it.

So Browserify if your not aware its a nodejs CLI that lets you use NodeJs style require for client code. It allows you to write well structured, modular client code and build it into a single file to include into your page. Another benefit is every file is scoped to that single file. So no more accidental global's (if your not using strict mode). The only things exposed from your files are things that you explicitly export.

Because its a CLI you to have to install it globally so you can use it on the command line.

npm install -g browserify

Then to run it simply from the command line do

browserify main.js > output.js

and include that on your page

<script src="output.js"></script>

We personally alias that in our package.json as we do other things like linting and sass. here's an example

{
  "name": "some app",
  "scripts": {
    "build:js": "browserify src/index.js > dist/built.js",
    "build:css": "node-sass sass/main.scss dist/built.css",
    "build": "npm run build:js && npm run build:css"
  }
}

Now we just run npm run build and it will build out sass and js.

What browserify will do is recursively traverse your file looking for require calls, it will then travel into that file and repeat. As part of its search path it will look in your node_modules folder. This is why you can include modules installed through npm.

Here's a small example

//In a file called data.js located in same folder as main.js
module.exports = [1, 2, 2, 3, 4, 5, 5, 6];


//in a file called main.js
var unique = require('uniq'),
    data = require('./data');

console.log(unique(data)); //[1, 2, 3, 4, 5, 6]

What this will do is first look for a module called uniq installed through NPM (as there is no relative or absolute path). It will then look for our own file called data.js located in the same folder.

When would build this with browserify main.js > out.js

I hope this helps explain what browserify is and how it can be helpful to manage you structure when you wish to include NPM modules in the client. I'm aware this won't be suitable for all especially if you have a large application that doesn't use browserify but now i use a build tool like this to write modular code i would never go bacl.

Answer 4

In console do: npm install braintree --save

then in your javascript require('braintree'), now you will have the braintree functions available