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
Click to copy
Copied
<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/3.22.2/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
Click to copy
Copied
npm install --save braintree-web

You can then include each component as needed:

JavaScript
Click to copy
Copied
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
Click to copy
Copied
bower install --save braintree-web#3.22.2

And load the components you need:

HTML
Click to copy
Copied
<!-- 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
Click to copy
Copied
<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.

JavaScript
Click to copy
Copied
// Inside main.js:
require.config({
  paths: {
    braintreeClient: 'https://js.braintreegateway.com/web/3.22.2/js/client.min',
    hostedFields: 'https://js.braintreegateway.com/web/3.22.2/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

Still have questions?

If you can’t find an answer, contact our Support team.