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.
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 asynchronous 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);
});
});
});
Subscribe to this repo to be notified when SDK releases go out.
This SDK abides by our Client SDK Deprecation Policy. For more information on the potential statuses of an SDK check our developer docs.
| Major version number | Status | Released | Deprecated | Unsupported |
|---|---|---|---|---|
| 3.x.x | Active | August 2016 | TBA | TBA |
| 2.x.x | Unsupported | November 2014 | February 2022 | February 2023 |
The Braintree JavaScript SDK is open source and available under the MIT license. See the LICENSE file for more info.
3.102.0
amountBreakdown and its subfields in the updatePayment methodFAQs
A suite of tools for integrating Braintree in the browser
The npm package braintree-web receives a total of 243,837 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 1 open source maintainer 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
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.