Skip to content

aflorea4/braintree-web-drop-in

 
 

Repository files navigation

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.

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.16.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>

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.

Releases

Subscribe to our Google Group to be notified when SDK releases go out.

License

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

About

Braintree Drop-in for the web

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 84.5%
  • HTML 9.0%
  • Ruby 3.3%
  • CSS 3.1%
  • Shell 0.1%