Tools/
Client SDK/
Setup

Set up the JavaScript SDK

Accept payments with a Hosted Fields integration using the Braintree JavaScript SDK.

This integration preserves your user experience and maintains PCI compliance through SAQ A.

The SDK supports credit cards, PayPal, and other payment methods. Each payment method is its own component, so you load only the files you need.

Complete the prerequisites, then follow these instructions to load the SDK and install it with npm.

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/4.0.0-alpha.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>

After the scripts load, create a client instance with your client authorization:

  1. Async/Await
async function setupClient() {
  try {
    const clientInstance = await braintree.client.create({
      authorization: 'CLIENT-AUTHORIZATION'
    });
    // Use the clientInstance to create other components.
  } catch (err) {
    // Handle client creation error
  }
}

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
import { client } from 'braintree-web/client'
const hostedFields = require('braintree-web/hosted-fields');
import { hostedFields } from 'braintree-web'

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

See also