Have ideas to improve npm?Join in the discussion! »

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/braintree-web-drop-in package

    1.27.0 • Public • Published

    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">
       <meta charset="utf-8">
       <div id="dropin-container"></div>
       <button id="submit-button">Purchase</button>
       <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
         var submitButton = document.querySelector('#submit-button');
           authorization: 'CLIENT_AUTHORIZATION',
           selector: '#dropin-container'
         }, function (err, dropinInstance) {
           if (err) {
             // Handle any errors that might've occurred when creating Drop-in
           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.


    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.




    npm i braintree-web-drop-in

    DownloadsWeekly Downloads






    Unpacked Size

    1.38 MB

    Total Files


    Last publish


    • avatar