braintree-web-drop-in
Advanced tools
[](https://github.com/braintree/braintree-web-drop-in/actions?query=workflow%3A%22Unit+Tests%22) [
A pre-made payments UI for accepting cards and alternative payments in the browser built using version 3 of the Braintree JS client SDK.
If you have any feedback or questions, create an issue or contact Braintree support.
For setup and usage, see our reference.
This is a full example of a Drop-in integration that only accepts credit cards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Checkout</title>
</head>
<body>
<div id="dropin-container"></div>
<button id="submit-button">Purchase</button>
<script src="https://js.braintreegateway.com/web/dropin/1.42.0/js/dropin.min.js"></script>
<script>
var submitButton = document.querySelector('#submit-button');
braintree.dropin.create({
authorization: 'CLIENT_AUTHORIZATION',
selector: '#dropin-container'
}, function (err, dropinInstance) {
if (err) {
// Handle any errors that might've occurred when creating Drop-in
console.error(err);
return;
}
submitButton.addEventListener('click', function () {
dropinInstance.requestPaymentMethod(function (err, payload) {
if (err) {
// Handle errors in requesting payment method
}
// Send payload.nonce to your server
});
});
});
</script>
</body>
</html>
Drop-in is supported in all browsers supported by the Braintree JavaScript Client SDK.
The design of Drop-in is intentionally opinionated, and while we aimed to make the design work in many scenarios, the design of your website may conflict with the default design of Drop-in.
For minor UI customizations, review our documentation.
For more substantial changes, you may fork Drop-in, make your desired changes and build the assets by running npm run build. By default, Drop-in uses a hosted version of the built stylesheet. To override this behavior and use a custom stylesheet instead, simply add <link> tag to your page with the id braintree-dropin-stylesheet.
Drop-in uses the Braintree JavaScript SDK. So if a fully customized UI is what you're looking for, Drop-in may be used as a reference implementation for using the JavaScript SDK.
Drop-in is open source and available under the MIT license. See the LICENSE file for more info.
FAQs
[](https://github.com/braintree/braintree-web-drop-in/actions?query=workflow%3A%22Unit+Tests%22) [
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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.