braintree-web-drop-in

Braintree Drop-in for the web

Showing:

Popularity

Downloads/wk

43.2K

GitHub Stars

151

Maintenance

Last Commit

1mo ago

Contributors

47

Package

Dependencies

8

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Braintree Web Drop-in

Build Status Build Status Build Status Build Status

npm version

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.

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
  • Open source and open development

Getting started

For setup and usage, see our reference.

Full example

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.31.2/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>

Browser support

Drop-in is supported in all browsers supported by the Braintree JavaScript Client SDK.

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.

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.

License

Drop-in is open source and available under the MIT license. See the LICENSE file for more info.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100