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
bower install braintree-angular
Run the example
git clone git@github.com:jeffcarp/braintree-angular.git
cd braintree-angular
npm install
npm run example
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
< form action = " /buy-something " method = " post " >
< h1 > Buy some things </ h1 >
< braintree-dropin > < / 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 ( ) {
client . tokenizeCard ( {
number : $scope . creditCard . number ,
expirationDate : $scope . creditCard . expirationDate
} , function ( err , nonce ) {
} ) ;
} ;
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 .