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
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.