https://github.com/braintree/braintree-web-drop-in-bower
Braintree Drop-in for the web
https://github.com/braintree/braintree-web-drop-in-bower
Last synced: 10 months ago
JSON representation
Braintree Drop-in for the web
- Host: GitHub
- URL: https://github.com/braintree/braintree-web-drop-in-bower
- Owner: braintree
- License: mit
- Created: 2017-09-08T21:04:10.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2023-06-15T15:47:13.000Z (about 3 years ago)
- Last Synced: 2025-09-25T12:33:27.026Z (10 months ago)
- Language: JavaScript
- Size: 2.68 MB
- Stars: 1
- Watchers: 21
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Braintree Web Drop-in
[](https://github.com/braintree/braintree-web-drop-in/actions?query=workflow%3A%22Unit+Tests%22) [](https://github.com/braintree/braintree-web-drop-in/actions?query=workflow%3A%22Integration+Tests+-+Chrome%2C+Firefox+%26+Safari%22) [](https://github.com/braintree/braintree-web-drop-in/actions?query=workflow%3A%22Publishing+Tests%22)
[](https://badge.fury.io/js/braintree-web-drop-in)
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).
If you have any feedback or questions, create an [issue](https://github.com/braintree/braintree-web-drop-in/issues) or [contact Braintree support](https://developer.paypal.com/braintree/help).
## What's new
- Updated UI to easily accommodate multiple payment methods
- Not in an iframe; feel free to style Drop-in to blend in with your website
- Now available in [23 languages](https://braintree.github.io/braintree-web-drop-in/docs/current/#localization)
- Open source and open development
## Getting started
For setup and usage, see our [reference](https://braintree.github.io/braintree-web-drop-in/docs/current/).
## Full example
This is a full example of a Drop-in integration that only accepts credit cards.
```html
Checkout
Purchase
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
});
});
});
```
## Browser support
Drop-in is supported in all browsers supported by the [Braintree JavaScript Client SDK](http://braintree.github.io/braintree-web/current/#browser-support).
## Customization
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](https://developer.paypal.com/braintree/docs/guides/drop-in/customization/javascript/v3#customize-your-ui).
For more substantial changes, you may [fork](https://help.github.com/articles/fork-a-repo/) 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 `` tag to your page with the id `braintree-dropin-stylesheet`.
Drop-in uses the [Braintree JavaScript SDK](http://github.com/braintree/braintree-web). 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.
## License
Drop-in is open source and available under the MIT license. See the [LICENSE](LICENSE) file for more info.