braintree-web-drop-in
Advanced tools
A pre-made payments UI for accepting cards and alternative payments in the browser built using version 3 of the [Braintree JS client SDK](https://github.com/braintree/braintree-web).
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.4.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.
1.4.0
paymentOptionSelected event
dropinInstance.requestPaymentMethod will return a promise if no
callback is provideddropinInstance.teardown will return a promise if no callback is
provideddropin.create will return a promise if no callback is providedFAQs
[](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
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.