braintree-web
A suite of tools for integrating Braintree in the browser.
This is the repo to submit issues if you have any problems or questions about a Braintree JavaScript integration.
For a ready-made payment UI, see Braintree Web Drop-in .
Install
npm install braintree-web
bower install braintree-web
Usage
For more thorough documentation, visit the JavaScript client SDK docs .
If you are upgrading from version 2.x, take a look at our migration guide .
Hosted Fields integration
< form action = " / " id = " my-sample-form " >
< input type = " hidden " name = " payment_method_nonce " >
< label for = " card-number " > Card Number </ label >
< div id = " card-number " > < / div >
< label for = " cvv " > CVV </ label >
< div id = " cvv " > < / div >
< label for = " expiration-date " > Expiration Date </ label >
< div id = " expiration-date " > < / div >
< input id = " my-submit " type = " submit " value = " Pay " disabled />
</ form >
var submitBtn = document . getElementById ( ' my-submit ' ) ;
var form = document . getElementById ( ' my-sample-form ' ) ;
braintree . client . create ( {
authorization : CLIENT_AUTHORIZATION
} , clientDidCreate ) ;
function clientDidCreate ( err , client ) {
braintree . hostedFields . create ( {
client : client ,
styles : {
' input ' : {
' font-size ' : ' 16pt ' ,
' color ' : ' #3A3A3A '
} ,
' .number ' : {
' font-family ' : ' monospace '
} ,
' .valid ' : {
' color ' : ' green '
}
} ,
fields : {
number : {
selector : ' #card-number '
} ,
cvv : {
selector : ' #cvv '
} ,
expirationDate : {
selector : ' #expiration-date '
}
}
} , hostedFieldsDidCreate ) ;
}
function hostedFieldsDidCreate ( err , hostedFields ) {
submitBtn . addEventListener ( ' click ' , submitHandler . bind ( null , hostedFields ) ) ;
submitBtn . removeAttribute ( ' disabled ' ) ;
}
function submitHandler ( hostedFields , event ) {
event . preventDefault ( ) ;
submitBtn . setAttribute ( ' disabled ' , ' disabled ' ) ;
hostedFields . tokenize ( function ( err , payload ) {
if ( err ) {
submitBtn . removeAttribute ( ' disabled ' ) ;
console . error ( err ) ;
} else {
form [ ' payment_method_nonce ' ] . value = payload . nonce ;
form . submit ( ) ;
}
} ) ;
}
Advanced integration
To be eligible for the easiest level of PCI compliance (SAQ A), payment fields cannot be hosted on your checkout page. For an alternative to the following, use Hosted Fields.
braintree . client . create ( {
authorization : CLIENT_AUTHORIZATION
} , function ( err , client ) {
client . request ( {
endpoint : ' payment_methods/credit_cards ' ,
method : ' post ' ,
data : {
creditCard : {
number : ' 4111111111111111 ' ,
expirationDate : ' 10/20 ' ,
cvv : ' 123 ' ,
billingAddress : {
postalCode : ' 12345 '
}
}
}
} , function ( err , response ) {
} ) ;
} ) ;
For more examples, see the reference .
Promises
All the asyncronous methods will return a Promise
if no callback is provided.
var submitBtn = document . getElementById ( ' my-submit ' ) ;
var yourStylesConfig = { } ;
var yourFieldsConfig = { } ;
braintree . client . create ( { authorization : CLIENT_AUTHORIZATION } ) . then ( function ( client ) {
return braintree . hostedFields . create ( {
client : client ,
styles : yourStylesConfig ,
fields : yourFieldsConfig
} ) ;
} ) . then ( function ( hostedFields ) {
submitBtn . addEventListener ( ' click ' , function ( event ) {
event . preventDefault ( ) ;
submitBtn . setAttribute ( ' disabled ' , ' disabled ' ) ;
hostedFields . tokenize ( ) . then ( function ( payload ) {
} ) . catch ( function ( err ) {
submitBtn . removeAttribute ( ' disabled ' ) ;
console . error ( err ) ;
} ) ;
} ) ;
} ) ;
Releases
Subscribe to our Google Group to
be notified when SDK releases go out.
License
The Braintree JavaScript SDK is open source and available under the MIT license. See the LICENSE file for more info.