Need help with braintree-web-drop-in?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

154 Stars 112 Forks MIT License 1.2K Commits 36 Opened issues


Braintree Drop-in for the web

Services available


Need anything else?

Contributors list

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.

<meta charset="utf-8">

<div id="dropin-container"></div>
<button id="submit-button">Purchase</button>

<script src=""></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
 tag to your page with the id 

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.