braintree-web

braintree-web

A suite of tools for integrating Braintree in the browser.

This is the repo to submit issues if you have any problems or questions about a Braintree JavaScript integration.

For a ready-made payment UI, see Braintree Web Drop-in.

Install

npm install braintree-web

bower install braintree-web

Usage

For more thorough documentation, visit the JavaScript client SDK docs.

If you are upgrading from version 2.x, take a look at our migration guide.

Hosted Fields integration

<form action="/" id="my-sample-form">
  <input type="hidden" name="payment_method_nonce" />
  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

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

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

  <input id="my-submit" type="submit" value="Pay" disabled />
</form>

var submitBtn = document.getElementById("my-submit");
var form = document.getElementById("my-sample-form");

braintree.client.create(
  {
    authorization: CLIENT_AUTHORIZATION,
  },
  clientDidCreate
);

function clientDidCreate(err, client) {
  braintree.hostedFields.create(
    {
      client: client,
      styles: {
        input: {
          "font-size": "16pt",
          color: "#3A3A3A",
        },

        ".number": {
          "font-family": "monospace",
        },

        ".valid": {
          color: "green",
        },
      },
      fields: {
        number: {
          selector: "#card-number",
        },
        cvv: {
          selector: "#cvv",
        },
        expirationDate: {
          selector: "#expiration-date",
        },
      },
    },
    hostedFieldsDidCreate
  );
}

function hostedFieldsDidCreate(err, hostedFields) {
  submitBtn.addEventListener("click", submitHandler.bind(null, hostedFields));
  submitBtn.removeAttribute("disabled");
}

function submitHandler(hostedFields, event) {
  event.preventDefault();
  submitBtn.setAttribute("disabled", "disabled");

  hostedFields.tokenize(function (err, payload) {
    if (err) {
      submitBtn.removeAttribute("disabled");
      console.error(err);
    } else {
      form["payment_method_nonce"].value = payload.nonce;
      form.submit();
    }
  });
}

Advanced integration

To be eligible for the easiest level of PCI compliance (SAQ A), payment fields cannot be hosted on your checkout page. For an alternative to the following, use Hosted Fields.

braintree.client.create(
  {
    authorization: CLIENT_AUTHORIZATION,
  },
  function (err, client) {
    client.request(
      {
        endpoint: "payment_methods/credit_cards",
        method: "post",
        data: {
          creditCard: {
            number: "4111111111111111",
            expirationDate: "10/20",
            cvv: "123",
            billingAddress: {
              postalCode: "12345",
            },
          },
        },
      },
      function (err, response) {
        // Send response.creditCards[0].nonce to your server
      }
    );
  }
);

For more examples, see the reference.

Promises

All the asynchronous methods will return a Promise if no callback is provided.

var submitBtn = document.getElementById("my-submit");
var yourStylesConfig = {
  /* your Hosted Fields `styles` config */
};
var yourFieldsConfig = {
  /* your Hosted Hields `fields` config */
};

braintree.client
  .create({ authorization: CLIENT_AUTHORIZATION })
  .then(function (client) {
    return braintree.hostedFields.create({
      client: client,
      styles: yourStylesConfig,
      fields: yourFieldsConfig,
    });
  })
  .then(function (hostedFields) {
    submitBtn.addEventListener("click", function (event) {
      event.preventDefault();
      submitBtn.setAttribute("disabled", "disabled");

      hostedFields
        .tokenize()
        .then(function (payload) {
          // send payload.nonce to your server
        })
        .catch(function (err) {
          submitBtn.removeAttribute("disabled");
          console.error(err);
        });
    });
  });

Storybook

Storybook is used for isolated component demonstration and integration testing.

Setup

Retrieve your sandbox tokenization key from your Braintree sandbox account and add it to .env.

For full functionality please ensure the sandbox account used for testing is fully configured to use any payment methods that will be tested

STORYBOOK_BRAINTREE_TOKENIZATION_KEY="your-sandbox-tokenization-key"

Development server

To run the Storybook development server

npm run storybook:dev

Static build

To run the Storybook static build on a local secure server(required for Apple Pay flow to initialize)

First create a private key and certificate in the root directory of the repo

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem -subj "/CN=127.0.0.1"

Build the Storybook static files

npm run storybook:build

Start the secure server

npm run storybook:run-build

Browserstack Testing

Follow setup and static build instructions for Storybook.

Add the following environment variables to your .env. Utilize credentials from either your own Browserstack account or utilize team Browserstack account credentials.

export BROWSERSTACK_USERNAME="******"
export BROWSERSTACK_ACCESS_KEY="******"

To run all test Browserstack test suites run:

npm run test:integration

Test results will be viewable in the terminal. A link will also be output in the terminal to view test runs in the Browserstack UI.

Releases

Subscribe to this repo to be notified when SDK releases go out.

Versions

This SDK abides by our Client SDK Deprecation Policy. For more information on the potential statuses of an SDK check our developer docs.

Major version number	Status	Released	Deprecated	Unsupported
3.x.x	Active	August 2016	TBA	TBA
2.x.x	Unsupported	November 2014	February 2022	February 2023

License

The Braintree JavaScript SDK is open source and available under the MIT license. See the LICENSE file for more info.

Changelog

3.129.1 (2025-09-17)

• PayPalCheckout
  • Fix bug with the observability enhancements introduced in version 3.129.0

Similar packages

Other packages similar to braintree-web

stripe

Stripe is a popular payment processing platform that offers a wide range of tools for handling online payments. It supports various payment methods, including credit cards, Apple Pay, and Google Pay. Compared to braintree-web, Stripe provides a more extensive set of features and a more modern API, but it may be more complex to integrate.

paypal-checkout

PayPal Checkout is a JavaScript SDK that allows you to integrate PayPal payments into your web application. It provides a simple way to add PayPal buttons and handle transactions. While braintree-web also supports PayPal, PayPal Checkout is more focused on providing a streamlined experience for PayPal payments specifically.

square

Square is a payment processing platform that offers tools for handling online and in-person payments. It supports various payment methods, including credit cards and digital wallets. Compared to braintree-web, Square provides a more comprehensive solution for businesses that need both online and offline payment processing capabilities.