Set Up Your Client

This guide shows you how to set up a basic Hosted Fields integration with the Braintree JavaScript SDK to collect customer payment information. For advanced configuration and styling options, see the Hosted Fields guide.

Add Hosted Fields to your page

For your form, create containers for each field that you will pass in when you create your Hosted Fields component.

HTML

<form action="/" id="my-form" method="post">
  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

  <label for="expiration-date">Expiration Date</label>
  <div id="expiration-date"></div>

  <label for="cvv">CVV</label>
  <div id="cvv"></div>

  <label for="postal-code">Postal Code</label>
  <div id="postal-code"></div>

  <input disabled type="submit" value="Submit Transaction" />
</form>

Load the SDK

Load the client and Hosted Fields components from the Braintree CDN:

HTML

<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/4.0.0-alpha.0/js/client.min.js"></script>
<!-- Load the Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/4.0.0-alpha.0/js/hosted-fields.min.js"></script>

Get a client token

To start using the Braintree Web SDK, you need a client token generated by your Braintree server SDK. To generate one, follow Simple Server until you complete the Generate a client token section.

Create the Braintree client:

Async/Await

async function setupBraintreeClient() {
  try {
    const clientInstance = await braintree.client.create({
      authorization: 'CLIENT-TOKEN-FROM-SERVER'
    });
  } catch (error) {
    // Handle client creation errors here.
  }
}

There are a number of ways to get your client token into JavaScript so you can set up Braintree. Many people choose to interpolate the client token into the HTML/JavaScript itself. Alternatively, you can load the client token from an AJAX call to an exposed client token URL on your server.

Test your integration

Create a sandbox account

If you haven't already, sign up for a free Braintree sandbox account:

Sandbox merchant ID
Public key
Private key

Use these credentials for your development and testing.

Important

When you go live, you will need to replace your sandbox API credentials with production API credentials.

Use test values

When testing in the sandbox, use our test card numbers, such as 4111111111111111, and nonces, such as fake-valid-nonce. Real payment method data will not work in the sandbox. See our Testing page for more details.

Send a payment method nonce to your server

A Braintree client-side integration sends payment information, such as a credit card or a PayPal authorization, to Braintree in exchange for a payment method nonce, a one-time-use value that represents that payment method.

Async/Await

async function setupHostedFields() {
  try {
    const clientInstance = await braintree.client.create({
      authorization: 'CLIENT-TOKEN-FROM-SERVER'
    });
    const hostedFieldsInstance = await braintree.hostedFields.create({
      client: clientInstance,
      fields: {
        number: { container: '#card-number' },
        expirationDate: { container: '#expiration-date' },
        cvv: { container: '#cvv' },
        postalCode: { container: '#postal-code' }
      }
    });
    submit.removeAttribute('disabled');
    form.addEventListener('submit', async function (event) {
      event.preventDefault();
      try {
        const result = await hostedFieldsInstance.tokenize();
        // Send the nonce to your server here.
        console.log('Got a nonce: ' + result.nonce);
      } catch (tokenizeErr) {
        console.error(tokenizeErr);
        return;
      }
    });
  } catch (error) {
    // Handle client or Hosted Fields creation errors here.
  }
}

If tokenization succeeds, your browser console logs the nonce, for example Got a nonce: fake-valid-nonce-....

On your server, use a payment method nonce with a Braintree server SDK to charge a card or update a customer's payment methods.

Next steps

At this point, you should have a working client-side checkout flow. When your user provides payment information, you receive a payment method nonce and send it to your server.

Next, your server closes the loop by using the payment method nonce to create a transaction.

Next Page: Simple Server →