Braintree Web Client Reference v3.87.0

• Overview
  • Module Hierarchy
  • Callbacks
  • Promises
• Browser Support
  • Desktop
  • Mobile
  • Webviews
• Teardown
• Content Security Policy

Overview

The Braintree JavaScript SDK is split up into several modules. Each module is also represented by a class encapsulating the actions that module can perform. In general, each SDK feature is represented by its own standalone module. You can include as many or as few of these modules in your page depending on the Braintree features you will be using.

Each module exports a create function which is responsible for returning an instance of that module's class. For instance, the braintree-web/paypal module's create method will return an instance of the PayPal class.

Module hierarchy

Many modules of this SDK require an instance of our Client for communicating to our servers. In these cases, a single Client instance can be used for the creation of several other module instances.

braintree.client.create(...) --------> Client ─┐
                         ┌─────────────────────┤
braintree.paypal.create(...) --------> PayPal  │
                               ┌───────────────┘
braintree.hostedFields.create(...) --> HostedFields

Callbacks

This SDK uses the Node.js callback style, with callbacks passed as the last argument to a function. Callbacks are expected to receive possible errors as the first parameter, and any returned data as the second:

braintree.client.create({...}, callback);

function callback(err, clientInstance) { ... }

Promises

In addition to callbacks, all asynchronous methods will return a Promise if no callback is provided:

braintree.client
  .create({
    authorization: CLIENT_AUTHORIZATION,
  })
  .then(function (client) {
    // Create other components
  });

Browser support

The Braintree JS SDK provides support for numerous browsers and devices. There are, however, caveats with certain integrations and browser combinations.

While braintree-web will work in browsers other than the ones below, these represent the platforms against which we actively test. If you have problems with a specific browser or device, contact our Support team.

Desktop

• Chrome latest
• Firefox latest
• Internet Explorer 9+ (see caveats below)
• Microsoft Edge latest
• Safari 8+

Internet Explorer caveats

Testing

Our code is ES5 compliant, but we only run automated tests in Internet Explorer 11+. The next major version of the SDK will drop support for Internet Explorer 9 and 10 entirely.

Quirks Mode

Quirks Mode is not supported for any version of IE. See our general best practices to learn more.

Older TLS versions

Braintree is ending support for server-side API requests via TLS 1.0 and 1.1 on June 30, 2017, and plans to do the same for client requests in the future. The sandbox no longer accepts connections using these older TLS versions as of December 13, 2016. Internet Explorer 9 and 10 do not use TLS 1.2 by default; this SDK will only work if customers have explicitly enabled TLS 1.2 in their IE settings.

PayPal Support

The PayPal SDK supports Internet Explorer 11+.

3D Secure Support

The SDK from our MPI provider, Cardinal Commerce, supports Internet Explorer 10+.

Mobile

iOS

• Safari 8+ (9+ for 3D Secure)
• Chrome 48+ (iOS 9+)

Android

• Native browser 4.4+
• Chrome
• Firefox

Webviews and hybrid environments

If you are using PayPal in a mobile webview, we recommend using PopupBridge for iOS or Android to open the PayPal authentication flow in a mobile browser for improved security.

Additionally, braintree-web is neither tested nor developed for hybrid runtimes such as Cordova, PhoneGap, Ionic, React Native, and Electron. While some success may be had in such environments, our SDK is optimized for the browser and its security policies and may not function correctly outside of them.

Teardown

In certain scenarios you may need to remove your braintree-web integration. This is common in single page applications, modal flows, and other situations where state management is a key factor. Any module returned from a braintree.component.create call that can be torn down will include a teardown function.

Invoking teardown will clean up any DOM nodes, event handlers, popups and/or iframes that have been created by the integration. Additionally, teardown accepts a callback which you can use to know when it is safe to proceed.

hostedFieldsInstance.teardown(function (err) {
  if (err) {
    console.error("Could not tear down Hosted Fields!");
  } else {
    console.log("Hosted Fields has been torn down!");
  }
});

If you happen to call this method while the instance's teardown is in progress, you'll receive an error. Once completed, calling any methods on the instance will throw an error.

Using braintree-web with a Content Security Policy (CSP)

Content Security Policy is a feature of web browsers that mitigates cross-site scripting and other attacks. By limiting the origins of resources that may be loaded on your page, you can maintain tighter control over any potentially malicious code. We recommend considering the implementation of a CSP when available.

Basic Directives

PayPal Specific Directives

If using the PayPal Checkout component, include these additional directives:

Google Pay Specific Directives

If using the Google Pay component, include these additional directives:

3D Secure Specific Directives

If using the 3D Secure component, include these additional directives:

3D Secure 2 utilizes an iframe implementation that requires the use of the issuing bank's full ACS URL. In contrast to 3D Secure 1, the 3D Secure 2 core framework does not allow masked URLs or redirects. Given that the list of possible ACS URLs changes regularly and varies between issuers and ACS providers, there is not a strict CSP configuration available for 3D Secure 2.

Additionally, 3D Secure 2 includes a data collection flow called "3DS Method" or "Method URL Collection", which also utilizes the ACS URL directly. This process increases authentication success significantly and is considered mandatory by Visa. Blocking this process through a CSP can potentially result in authentication failures and increased friction within the checkout experience.

If maintaining a CSP in an integration that uses 3D Secure, merchants can consider setting frame-src * to whitelist all potential ACS URLs that could be utilized during the 3D Secure authentication process.

Data Collector Specific Directives

If using Kount with the Data Collector component, adhere to the Kount CSP guide.

For Braintree Fraud Protection, use these directives: