New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

braintree-web-drop-in

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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](https://github.com/braintree/braintree-web).

1.0.0
Source
npm

Version published: 8 years ago

Weekly downloads: 15K; decreased by-71.21%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

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

Setup

Drop-in is currently available directly from our servers, which you can save locally or include in your project through a script tag:

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

Basic 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 as shown below.

For credit cards, this attempts 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.

Other payment methods may behave differently. Refer to their documentation for details.

In your create call, provide an authorization and a selector:

authorization: Your client authorization should be a client token from your server or a tokenization key that can be found in the Braintree Control Panel. If you pass a customer ID when generating the client token, Drop-in will display that customer's saved payment methods and automatically store any newly-added payment methods in their Vault record.
selector: This must be the selector for an empty element, such as a <div>, where Drop-in will be included on your page.

var submitButton = document.querySelector('#submit-button');

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  selector: '#dropin-container'
}, function (err, dropinInstance) {
  submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(function (err, payload) {
      if (err) {
       // Handle errors in requesting payment method
       // This includes invalid card form or no payment method available
       // Errors relevant to customers will be show in the UI as well

       return;
      }

      // Send payload.nonce to your server
    });
  });
});

The structure of the credit card payment method object returned in the callback of requestPaymentMethod can be found here.

Using PayPal

If PayPal is enabled for your merchant account, include PayPal configuration options in the create call. The required flow property can be either vault or checkout, depending on whether you want to use the PayPal Vault or Checkout flow.

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  selector: '#dropin-container',
  paypal: {
    flow: 'checkout',
    amount: 10.00,
    currency: 'USD'
  }
}, callback);

You can find more PayPal configuration options in the Braintree JS client SDK v3 reference.

The structure of the PayPal payment method object returned in the callback of requestPaymentMethod can be found here.

PayPal Credit

PayPal Credit can also be enabled in Drop-in by including paypalCredit configuration options in the create call:

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  selector: '#dropin-container',
  paypalCredit: {
    flow: 'checkout', // Required for PayPal Credit
    amount: 10.00,
    currency: 'USD'
  }
}, callback);

PayPal Credit configuration parameters are the same as those for PayPal.

More details about PayPal Credit can be found in the Braintree support articles.

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

Localization

You can pass a locale property to translate the Drop-in into other languages. Possible values are:

da_DK
de_DE
en
en_AU
en_GB
es_ES
fr_CA
fr_FR
id_ID
it_IT
ja_JP
ko_KR
nl_NL
no_NO
pl_PL
pt_BR
pt_PT
ru_RU
sv_SE
th_TH
zh_CN
zh_HK
zh_TW

Payment option priority

By default, Drop-in displays the credit/debit card form first, followed by PayPal (if enabled). You can customize this ordering with paymentOptionPriority as shown in this example:

braintree.dropin.create({
  // ...
  paymentOptionPriority: ['paypal', 'card'] // Display PayPal first
}, /* ... */);

Payment options omitted from this array will not be offered to the customer.

Events

`paymentMethodRequestable` and `noPaymentMethodRequestable`

paymentMethodRequestable fires when a payment method can be retrieved using requestPaymentMethod. The event includes an object that provides the type of payment method (CreditCard, PayPalAccount, etc) that is ready to be requested.

noPaymentMethodRequestable fires when a payment method can no longer be retrieved with requestPaymentMethod.

Using these events, you can dynamically enable or disable your submit button based on whether or not the payment method is requestable:

var submitButton = document.querySelector('#submit-button');

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  selector: '#dropin-container'
}, function (err, dropinInstance) {
  submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(function (err, payload) { /* send to payload.nonce to server */ });
  });

  if (dropinInstance.isPaymentMethodRequestable()) {
    // this will be true if you generated the client token
    // with a customer ID and there is a saved payment method
    // available to tokenize with that customer
    submitButton.removeAttribute('disabled');
  }

  dropinInstance.on('paymentMethodRequestable', function (event) {
    event.type; // the type of Payment Method, IE CreditCard, PayPalAccount

    submitButton.removeAttribute('disabled');
  });

  dropinInstance.on('noPaymentMethodRequestable', function () {
    submitButton.setAttribute('disabled', true);
  });
});

Teardown

When you want to cleanly tear down anything set up by dropin.create, use teardown(). This may be useful in a single-page app.

var dropinInstance;

braintree.dropin.create({
    // ...
  }, function (err, dropin) {
    // ...
    dropinInstance = dropin;
  });

// ...
dropinInstance.teardown(function (err) {
  // Called once teardown is complete. No data is returned if teardown completes successfully.
  if (err) { /* an error occurred during teardown */ }
});

Browser support

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

FAQs

What is braintree-web-drop-in?

Is braintree-web-drop-in popular?

Is braintree-web-drop-in well maintained?

Package last updated on 04 May 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

braintree-web-drop-in

Braintree Web Drop-in

What's new

Setup

Basic usage

Using PayPal

PayPal Credit

Full example

Localization

Payment option priority

Events

paymentMethodRequestable and noPaymentMethodRequestable

Teardown

Browser support

1.0.0

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation

`paymentMethodRequestable` and `noPaymentMethodRequestable`