braintree-angular.js

angular.module('braintree-angular', []);

angular.module('braintree-angular').factory('braintreeWeb', [function() {
  // braintree must already be loaded on the page
  // see https://github.com/braintree/braintree-web for package
  return window.braintree;

}]);

angular.module('braintree-angular').factory('$braintree', [
  'clientTokenPath',
  '$http',
  'braintreeWeb',
  function(
    clientTokenPath,
    $http,
    braintreeWeb
  ) {

    var $braintree = {};

    $braintree.clientToken = null;

    Object.keys(braintreeWeb).forEach(function (key) {
      $braintree[key] = braintreeWeb[key]
    });

    $braintree.getClientToken = function (params) {
      var path = clientTokenPath

      if (params) {
        // TODO: Use a library for this
        path += '?'
        path += Object.keys(params).map(function (key) {
          var value = params[key]
          return key + '=' + value
        }).join('&')
      }

      return $http.get(path)
    }

    $braintree.setupDropin = function (options) {
      $braintree.getClientToken()
        .success(function (token) {
          braintreeWeb.setup(token, 'dropin', options)
        })
        .error(function (data, status) {
          console.error('error fetching client token at ' + clientTokenPath, data, status)
        });
    };

    $braintree.setupPayPal = function (options) {
      $braintree.getClientToken()
        .success(function (token) {
          braintreeWeb.setup(token, 'paypal', options)
        })
        .error(function (data, status) {
          console.error('error fetching client token at ' + clientTokenPath, data, status)
        });
    };

    return $braintree;
  }
]);

angular.module('braintree-angular').directive('braintreeDropin', function () {
  return {
    restrict: 'AEC',
    scope: {
      options: '='
    },
    template: '<div id="bt-dropin"></div>',
    controller: ['$scope', '$braintree', function ($scope, $braintree) {
      var options = $scope.options || {}
      options.container = 'bt-dropin'

      $braintree.setupDropin(options)
    }]
  }
});

angular.module('braintree-angular').directive('braintreePaypal', function () {
  return {
    restrict: 'AEC',
    scope: {
      options: '='
    },
    template: '<div id="bt-paypal"></div>',
    controller: ['$scope', '$braintree', function ($scope, $braintree) {
      var options = $scope.options || {}
      options.container = 'bt-paypal'

      $braintree.setupPayPal(options)
    }]
  }
});

adapted from the AMD format in https://github.com/jeffcarp/braintree-angular