Tools/
Client SDK/
Setup

Set up the JavaScript SDK

This page explains how to load the Braintree JavaScript SDK and install it with npm or AMD, so you can build a Hosted Fields integration.

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

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

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

PrerequisitesAnchorIcon

Before you load the SDK, get a CLIENT-AUTHORIZATION value from your server. See Client Authorization for how to generate a tokenization key or client token.

Load the SDKAnchorIcon

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

We recommend using the latest version of each SDK component.

Install using other methodsAnchorIcon

We also publish these packages in a few other ways.

npmAnchorIcon

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. JavaScript
const client = require('braintree-web/client');
const hostedFields = require('braintree-web/hosted-fields');

async function setup() {
  try {
    const clientInstance = await client.create({
      authorization: 'CLIENT-AUTHORIZATION'
    });
    hostedFields.create(/* ... */);
  } catch (err) {
    // Handle error
  }
}

AMD using Require.jsAnchorIcon

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.146.0/js/client.min',
    hostedFields: 'https://js.braintreegateway.com/web/3.146.0/js/hosted-fields.min'
  }
});

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

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

For more specifics, see the documentation for Hosted Fields.

See also