🚨 This module is no longer maintained. 🚨 Please refer to the braintree-web v3 docs to get started. 🚨

braintree-angular

A module for using braintree-web in your Angular app.

Disclaimer: braintree-angular is not an official Braintree module.

Install

npm install braintree-angular

As of version 2.0.0, Bower is no longer supported.

Run the example

git clone git@github.com:jeffcarp/braintree-angular.git
cd braintree-angular
npm install
npm run example
# Open localhost:8000/dropin.html

Setup

For all integrations, first declare a clientTokenPath constant to tell Braintree where to fetch your client token.

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

Client tokens are generated with your Braintree server library. Here are guides on how to set up the server library and how to generate a client token.

Currently supported integrations:

Drop-in UI

The Braintree Drop-In directive accepts an options attribute which in turn accepts any options available in the Braintree JS SDK docs (except container).

<form action="/buy-something" method="post">
  <h1>Buy some things</h1>

  <braintree-dropin options="{...}"></braintree-dropin>

  <input
    type="submit"
    value="Buy for $14"
    />

</form>

angular.module('example', ['braintree-angular'])
  .constant('clientTokenPath', '/client-token');

PayPal Standalone Button

<braintree-paypal></braintree-paypal>

Advanced Integration (tokenization)

<div ng-app="yourApp" ng-controller="yourCtrl">

  <input
    ng-model="creditCard.number"
    placeholder="4111111111111111"
    />

  <input
    ng-model="creditCard.expirationDate"
    placeholder="10/18"
    />

  <input
    type="submit"
    value="Purchase"
    onClick="payButtonClicked()"
    />

</div>

angular.module('yourApp', ['braintree-angular'])
  .constant('clientTokenPath', '/client-token')
  .controller('yourCtrl', ['$scope', '$braintree', function($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();
  }]);

The full set of options you can pass to client.tokenizeCard are available in the Braintree docs. Please be advised that using the advanced integration method widens your PCI compliance scope from SAQ A to SAQ A-EP.