braintree-web
Advanced tools
The braintree-web npm package is a JavaScript SDK that allows you to integrate Braintree's payment processing services into your web application. It provides a variety of tools to handle different types of payments, including credit cards, PayPal, and more.
Credit Card Payments
This feature allows you to integrate credit card payment forms into your web application using Braintree's hosted fields. The code sample demonstrates how to create a client instance and hosted fields for credit card number, CVV, and expiration date.
const braintree = require('braintree-web');
braintree.client.create({
authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10/2022'
}
}
}, function (err, hostedFieldsInstance) {
if (err) {
console.error(err);
return;
}
hostedFieldsInstance.on('validityChange', function (event) {
var field = event.fields[event.emittedBy];
if (field.isValid) {
console.log('Field is valid');
} else {
console.log('Field is invalid');
}
});
});
});PayPal Payments
This feature allows you to integrate PayPal payments into your web application. The code sample demonstrates how to create a client instance and a PayPal instance, and then tokenize a PayPal payment.
const braintree = require('braintree-web');
braintree.client.create({
authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
braintree.paypal.create({
client: clientInstance
}, function (err, paypalInstance) {
if (err) {
console.error(err);
return;
}
paypalInstance.tokenize({
flow: 'checkout',
amount: '10.00',
currency: 'USD'
}, function (err, payload) {
if (err) {
console.error(err);
return;
}
console.log('PayPal payment tokenized:', payload.nonce);
});
});
});Apple Pay
This feature allows you to integrate Apple Pay into your web application. The code sample demonstrates how to create a client instance and an Apple Pay instance, and then handle the Apple Pay payment process.
const braintree = require('braintree-web');
braintree.client.create({
authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
braintree.applePay.create({
client: clientInstance
}, function (err, applePayInstance) {
if (err) {
console.error(err);
return;
}
var paymentRequest = applePayInstance.createPaymentRequest({
total: {
label: 'Your Label',
amount: '10.00'
},
requiredBillingContactFields: ['postalAddress']
});
var session = new ApplePaySession(1, paymentRequest);
session.onvalidatemerchant = function (event) {
applePayInstance.performValidation({
validationURL: event.validationURL,
displayName: 'Your Store'
}, function (err, merchantSession) {
if (err) {
console.error(err);
session.abort();
return;
}
session.completeMerchantValidation(merchantSession);
});
};
session.onpaymentauthorized = function (event) {
applePayInstance.tokenize({
token: event.payment.token
}, function (err, payload) {
if (err) {
console.error(err);
session.completePayment(ApplePaySession.STATUS_FAILURE);
return;
}
console.log('Apple Pay payment tokenized:', payload.nonce);
session.completePayment(ApplePaySession.STATUS_SUCCESS);
});
};
session.begin();
});
});Stripe is a popular payment processing platform that offers a wide range of tools for handling online payments. It supports various payment methods, including credit cards, Apple Pay, and Google Pay. Compared to braintree-web, Stripe provides a more extensive set of features and a more modern API, but it may be more complex to integrate.
PayPal Checkout is a JavaScript SDK that allows you to integrate PayPal payments into your web application. It provides a simple way to add PayPal buttons and handle transactions. While braintree-web also supports PayPal, PayPal Checkout is more focused on providing a streamlined experience for PayPal payments specifically.
Square is a payment processing platform that offers tools for handling online and in-person payments. It supports various payment methods, including credit cards and digital wallets. Compared to braintree-web, Square provides a more comprehensive solution for businesses that need both online and offline payment processing capabilities.
NOTE: v3 of our JavaScript SDK is currently in beta. If you are interested in using this new major version join our Google Group for updates.
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 any v.zero JavaScript integration.
npm install braintree-web@beta
bower install braintree-web#3.x-beta
For more thorough documentation, visit the JavaScript client SDK docs.
####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();
}
});
}
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
});
});
3.0.0-beta.12
Some error messages have been changed to be more consistent across components
Update BraintreeError to include a code, which can be used to
check for specific errors:
hostedFieldsInstance.tokenize(function (err, payload) {
if (err && err.code === 'FIELDS_EMPTY') {
// Handle user input error
}
});
Fix an incorrect <script> tag example in API docs
Fix an error in Require.js API docs
Hosted Fields
vault as an option to tokenize which allows cards to be
vaulted on tokenizationaddClass and removeClass for updating classes on fieldsinvalid CSS classes to potentiallyValid fields
on tokenization attemptsPayPal
BraintreeError objects when the PayPal
flow is canceledcreate when using a webviewUnionPay
type to tokenize payloadAdd Apple Pay component.
FAQs
A suite of tools for integrating Braintree in the browser
The npm package braintree-web receives a total of 239,996 weekly downloads. As such, braintree-web popularity was classified as popular.
We found that braintree-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.