Client SDK

Setupanchor

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-inHosted Fields
Include a pre-formatted payment form with a sleek UI in just a few simple lines of code.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 SDKanchor

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

  1. HTML
	<!-- Load the required client component. -->
	<script src="https://js.braintreegateway.com/web/3.111.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>

It goes without saying, but we’ll say it anyway: we always recommend using the latest versions of our SDKs.

note

Our JS SDK and its components follow semantic versioning. When updating your integration, be sure to update each component to the latest version.

Other ways to installanchor

We also publish these packages in a few other ways.

npmanchor

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

  1. Bash
npm install --save braintree-web

You can then include each component as needed.

  1. Callbacks
  2. Promises
var client = require('braintree-web/client');
var hostedFields = require('braintree-web/hosted-fields');

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

Boweranchor

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

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

And load the components you need:

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

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

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

  1. Callbacks
  2. Promises

// Inside main.js:
require.config({
  paths: {
    braintreeClient: 'https://js.braintreegateway.com/web/3.111.0/js/client.min',
    hostedFields: 'https://js.braintreegateway.com/web/3.111.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