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.
npm install braintree-web
bower install braintree-web
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.
<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();
}
});
}
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) {
// Send response.creditCards[0].nonce to your server
});
});
For more examples, see the reference.
All the asyncronous methods will return a Promise
if no callback is provided.
var submitBtn = document.getElementById('my-submit');
var yourStylesConfig = { /* your Hosted Fields `styles` config */ };
var yourFieldsConfig = { /* your Hosted Hields `fields` config */ };
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) {
// send payload.nonce to your server
}).catch(function (err) {
submitBtn.removeAttribute('disabled');
console.error(err);
});
});
});