Set Up Your Client

The Braintree JavaScript SDK has several ways for you to collect customer payment information. The easiest way to get up and running is via the Drop-in UI. For other integrations, please see the JS SDK Overview.

Setup

Add Drop-in to your page:

HTML

<head>
  <meta charset="utf-8" />
  <script src="https://js.braintreegateway.com/web/dropin/1.43.0/js/dropin.min.js"></script>
</head>
<body>
  <!-- Step one: add an empty container to your page -->
  <div id="dropin-container"></div>

  <script type="text/javascript">
    // call 'braintree.dropin.create' code here
  </script>
</body>

Callback

Promise

// Step two: create a dropin instance using that container (or a string
//   that functions as a query selector such as '#dropin-container')
braintree.dropin.create({
  container: document.getElementById('dropin-container'),
  // ...plus remaining configuration
}, (error, dropinInstance) => {
  // Use 'dropinInstance' here
  // Methods documented at https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html
});

Get a client token

To start up, Braintree.js needs a client token generated by your Braintree server SDK. To see how to generate one, please follow Simple Server (the next page) until you've completed the Generate a client token section.

Once you've generated a client token, embed it into your template.

Callback

Promise

braintree.dropin.create({
  // Step three: get client token from your server, such as via
 //    templates or async http request
  authorization: CLIENT_TOKEN_FROM_SERVER,
  container: '#dropin-container'
}, (error, dropinInstance) => {
  // Use 'dropinInstance' here
  // Methods documented at https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html
});

There are a number of ways to get your client token into JavaScript so you can set up Braintree. Many people choose to interpolate the client token into the HTML/JavaScript itself; alternatively, you could load the client token from an AJAX call to an exposed client token URL on your server.

Test your integration

Create a sandbox account

If you haven't already, sign up for a free Braintree sandbox account:

Sandbox merchant ID
Public key
Private key

Use these credentials for your development and testing.

important
When you go live, you will need to replace your sandbox API credentials with production API credentials.

Test values

When testing in the sandbox, be sure to use our test card numbers (e.g. 4111111111111111) and nonces (e.g. fake-valid-nonce). Real payment method data will not work in the sandbox. See our Testing page for more details.

Send payment method nonce to server

A Braintree client-side integration sends payment information – like a credit card or a PayPal authorization – to Braintree in exchange for a payment method nonce, a one time use value that represents that payment method.

HTML

<head>
  <meta charset="utf-8" />
  <script src="https://js.braintreegateway.com/web/dropin/1.43.0/js/dropin.min.js"></script>
</head>
<body>
  <form id="payment-form" action="/route/on/your/server" method="post">
    <!-- Putting the empty container you plan to pass to
      'braintree.dropin.create' inside a form will make layout and flow
      easier to manage -->
    <div id="dropin-container"></div>
    <input type="submit" />
    <input type="hidden" id="nonce" name="payment_method_nonce" />
  </form>

  <script type="text/javascript">
    // call braintree.dropin.create code here
  </script>
</body>

Callback

Promise

const form = document.getElementById('payment-form');

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container'
}, (error, dropinInstance) => {
  if (error) console.error(error);

  form.addEventListener('submit', event => {
    event.preventDefault();

    dropinInstance.requestPaymentMethod((error, payload) => {
      if (error) console.error(error);

      // Step four: when the user is ready to complete their
      //   transaction, use the dropinInstance to get a payment
      //   method nonce for the user's selected payment method, then add
      //   it a the hidden field before submitting the complete form to
      //   a server-side integration
      document.getElementById('nonce').value = payload.nonce;
      form.submit();
    });
  });
});

On your server, use a payment method nonce with a Braintree server SDK to charge a card or update a customer's payment methods.

world.greeted = true

At this point, you should have a working client-side checkout flow. When your user provides payment information, you receive a payment method nonce and send it to your server.

Next, your server closes the loop by using the payment method nonce to create a transaction.

Next Page: Simple Server →