Client SDK

Setupanchor

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-inCustom
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.jsanchor

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

Install it with npmanchor

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:

  1. Bash
npm install --save braintree-web@2.32.1

Install it with Boweranchor

Install it like you would any other Bower package:

  1. Bash
bower install --save braintree-web#2.32.1

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

  1. 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.jsanchor

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)anchor

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

  1. 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)anchor

Include the require.js library.

  1. HTML
<script
  data-main="main.js"
  src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"
></script>
  1. 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.

See also