Client SDK

Setup

In a nutshell, Braintree's JavaScript SDK requires you to load Braintree.js and initialize it with some options. Once you've done that, you can start easily accepting payments while easily being compliant with relevant regulations.

Our JavaScript SDK can be initialized with one of two integrations:

Drop-in	Custom
Include a pre-formatted payment form with a sleek UI in just a few simple lines of code.	Customize your checkout to fit the look and feel of your website.<br /><br />Using a Custom integration, you can take advantage of Hosted Fields to preserve your user experience while maintaining SAQ A compliance.

Both of these integrations allow you to accept credit cards, PayPal, and many other payment methods.

Getting Braintree.js

There are several ways to include Braintree.js into your project. You can:

Install it with npm

We ship as a CommonJS-compliant module via npm which means that you can use tools like Browserify or Webpack to include it in your project. Install it just like you would any other npm module:

Bash

npm install --save braintree-web@2.32.1

Install it with Bower

Install it like you would any other Bower package:

Bash

bower install --save braintree-web#2.32.1

Use the direct link

You can also load Braintree.js directly from here. Once loaded, braintree will be available on the global namespace.

HTML

<script src="https://js.braintreegateway.com/js/braintree-3.111.0.min.js"></script>

This file is distributed as a UMD bundle to support a variety of module systems. This means you can use tools like Browserify, Webpack, or Require.js to include it in your project.

Loading Braintree.js

If you include Braintree.js in a <script> tag, the braintree object will be available on the global namespace. If you use a build system, we support that too.

CommonJS (Browserify or Webpack)

Simply require the braintree-web module like you would any other module:

JavaScript

var braintree = require('braintree-web');

braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'INTEGRATION-TYPE', options);

This approach supports tools like Browserify and Webpack.

AMD (using Require.js)

Include the require.js library.

HTML

<script
  data-main="main.js"
  src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"
></script>

JavaScript

// main.js
require.config({
  paths: {
    braintree: 'https://js.braintreegateway.com/js/braintree-3.111.0.min'
   }
  });
  
  require(['braintree'], function (braintree) {
    braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'INTEGRATION_TYPE', options);
  });

Once you have access to the braintree namespace, you can initialize your integration using braintree.setup().

Note

CSE capabilities previously available as the Braintree global object are deprecated and live under the braintree.cse namespace.

For more specifics about each integration, see the documentation for Drop-in or custom. For more documentation on Hosted Fields, visit the guide.