Braintree Web Drop-in Reference v1.25.0

Overview

Drop-in is a pre-made payments UI for desktop and mobile browsers to be used with cards, PayPal, and PayPal Credit. It can be used as a one-time guest checkout or to offer saved payment methods with a client token created using a customer ID.

Test out our demo app with one of our test card numbers or a sandbox PayPal account.

If you have any feedback or questions, create a GitHub issue or contact Braintree support.

Setup

The Drop-in source is available from our CDN, that you can include in your project with a script tag:

<script src="https://js.braintreegateway.com/web/dropin/1.25.0/js/dropin.min.js"></script>

<script>
braintree.dropin.create({ /* options */ }, callback);
<script>

You can also get Drop-in from npm.

npm install --save braintree-web-drop-in
var dropin = require('braintree-web-drop-in');

dropin.create({ /* options */ }, callback);

Usage

Drop-in provides a payment method object containing the payment method nonce to send to your server. To get this object, use the requestPaymentMethod function.

If you are using a script tag integration, a hidden payment_method_nonce input will be added to the form with the nonce value. The following instructions specify usage of a JavaScript integration.

Accepting cards

By default, Drop-in is configured to accepted cards and does not require any additional parameters in the create call. If you are only accepting cards, Drop-in will appear as a card form. If you are accepting multiple payment options, Card will appear as an option in the list. CVV and Postal Code inputs are rendered conditionally based on AVS and CVV settings.

For credit cards, calling requestPaymentMethod will attempt to validate the card form and will call the supplied callback with a payload, including the payment method nonce, if successful. If not successful, an error will be shown in the UI and the callback will be called with an error. Errors include invalid card details as well as card types not enabled by your merchant account.

Use events to know when the card form could be considered valid. This does not necessarily mean the card form is complete, but it means it is considered valid by our client side validation.

Accepting PayPal

For PayPal and PayPal Credit, users will click the PayPal button and continue through the PayPal authentication flow. After successful completion, the PayPal account will be visible in the UI and that payment method can be requested. Use events to know when the authentication flow has been completed and the payment method can be requested.

More details about PayPal and PayPal Credit can be found in the Braintree developer docs.

Accepting Venmo

For Venmo, users will click the Venmo button on their mobile device, which will open up the Venmo app to authenticate the purchase and then return back to the webpage. After successful completion, the Venmo account will be visible in the UI and that payment method can be requested. Use events to know when the authentication flow has been completed and the payment method can be requested.

More details about Venmo can be found in the Braintree developer docs.

Accepting Apple Pay

For Apple Pay, users will click the Apple Pay button. After successful completion, the payment method can be requested. Use events to know when the authentication flow has been completed and the payment method can be requested.

More details about Apple Pay can be found in the Braintree developer docs.

Accepting Google Pay

For Google Pay, users will click the Google Pay button. After successful completion, the payment method can be requested. Use events to know when the authentication flow has been completed and the payment method can be requested.

More details about Google Pay can be found in the Braintree developer docs.

Localization

To translate Drop-in into different languages, pass a supported locale code in your create call:

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  selector: '#dropin-container',
  locale: 'de_DE'
}, callback);

Events

Use events to know whether or not a payment method is currently available from Drop-in. This can be used to dynamically enable and disable a submit button or automatically submit a nonce to your server after the PayPal flow has successfully completed.

See on for more details and an example of event usage.

Styling

The stylesheet for Drop-in will load automatically when Drop-in is initialized.

If you are using a custom build of Drop-in or would like to use an alternative stylesheet, you can provide a link tag on your page with the id braintree-dropin-stylesheet. This will prevent the external stylesheet from loading.

If you are using npm to manage your assets and would prefer to use a local version of the CSS, you can use the dropin.css file found in node_modules/braintree-web-drop-in/dropin.css and put it on your page in a link tag with the id braintree-dropin-stylesheet.

Browser support

Drop-in and the Braintree JS SDK have the same browser support.

Using braintree-web-drop-in with a Content Security Policy

Content Security Policy is a feature of web browsers that mitigates cross-site scripting and other attacks. By limiting the origins of resources that may be loaded on your page, you can maintain tighter control over any potentially malicious code. We recommend considering the implementation of a CSP when available.

Basic Directives

Sandbox Production
script-src js.braintreegateway.com
assets.braintreegateway.com
js.braintreegateway.com
assets.braintreegateway.com
img-src assets.braintreegateway.com
data:
assets.braintreegateway.com
data:
child-src assets.braintreegateway.com assets.braintreegateway.com
frame-src assets.braintreegateway.com assets.braintreegateway.com
connect-src api.sandbox.braintreegateway.com
client-analytics.sandbox.braintreegateway.com
*.braintree-api.com
api.braintreegateway.com
client-analytics.braintreegateway.com
*.braintree-api.com

PayPal Specific Directives

If using PayPal, include these additional directives:

Sandbox Production
script-src www.paypalobjects.com
*.paypal.com
'unsafe-inline'
www.paypalobjects.com
*.paypal.com
'unsafe-inline'
style-src 'unsafe-inline' 'unsafe-inline'
img-src checkout.paypal.com checkout.paypal.com
child-src *.paypal.com *.paypal.com
frame-src *.paypal.com *.paypal.com

Google Pay Specific Directives

If using Google Pay, include these additional directives:

Sandbox Production
script-src pay.google.com pay.google.com
style-src 'unsafe-inline' 'unsafe-inline'

The style-src directive is required so that the styles for the Google Pay button can be generated by the Google Pay SDK. You may omit this directive, so long as you include style rules for the Google Pay button to satisfy Google's brand guidelines.

3D Secure Specific Directives

If using 3D Secure, include these additional directives:

Sandbox Production
script-src songbirdstag.cardinalcommerce.com songbird.cardinalcommerce.com
frame-src *.cardinalcommerce.com *.cardinalcommerce.com
connect-src *.cardinalcommerce.com *.cardinalcommerce.com

Data Collector Specific Directives

If using Kount with Data Collector, adhere to the Kount CSP guide.

Additional resources