Braintree's JavaScript SDK lets you easily accept payments while maintaining PCI compliance.

The SDK lets you accept payments from credit cards, PayPal, and many other payment methods. Each of these payment methods is its own component, so you only need to pull in the files you need.

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

Drop-in Hosted Fields
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.

Using a custom integration, you can take advantage of Hosted Fields to preserve your user experience while maintaining SAQ A compliance.

Integrate with Drop-in, or continue reading for details on a Hosted Fields integration.

Loading the SDK

The JavaScript SDK is split into a number of components. You can load these components directly from our servers:

HTML
<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/3.48.0/js/client.min.js"></script>

<!-- Load additional components when required. -->

<!-- Use the components. We'll see usage instructions next. -->
<script>
braintree.client.create(/* ... */);
</script>

Other ways to install

We also publish these packages in a few other ways.

npm

We ship an npm package to be used with tools like Browserify or Webpack. Install it as you would any other npm package:

bash
npm install --save braintree-web

You can then include each component as needed.

var client = require('braintree-web/client');
var hostedFields = require('braintree-web/hosted-fields');

client.create({
  authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
  hostedFields.create(/* ... */);
});

Bower

We also publish the SDK to Bower. Install it like any other package:

bash
bower install --save braintree-web#3.48.0

And load the components you need:

HTML
<!-- Load the required client component. -->
<script src="path/to/bower_components/braintree-web/client.js"></script>

<!-- Load additional components if desired. -->
<script src="path/to/bower_components/braintree-web/hosted-fields.js"></script>
<script src="path/to/bower_components/braintree-web/paypal.js"></script>
<script src="path/to/bower_components/braintree-web/data-collector.js"></script>

<!-- Use the components. We'll see usage instructions next. -->
<script>
braintree.client.create(/* ... */);
</script>

AMD (using Require.js)

You can also use the JavaScript SDK with AMD just like any other library.

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

You can require only the components that you need, which can reduce the file size of your code.

// Inside main.js:
require.config({
  paths: {
    braintreeClient: 'https://js.braintreegateway.com/web/3.48.0/js/client.min',
    hostedFields: 'https://js.braintreegateway.com/web/3.48.0/js/hosted-fields.min'
  }
});

require(['braintreeClient', 'hostedFields'], function (client, hostedFields) {
  client.create({
    authorization: 'CLIENT_AUTHORIZATION'
  }, function (err, clientInstance) {
    hostedFields.create(/* ... */);
  });
});

Once you have access to the braintree namespace, you can initialize your integration.

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

See also