braintree-web/three-d-secure

Members

(static) VERSION :string

The current version of the SDK, i.e. 3.113.0.

Source:

Methods

(static) create(options, callbackopt) → {Promise|void}

Parameters:
Name Type Attributes Description
options object

Creation options:

Properties
Name Type Attributes Default Description
cardinalSDKConfig object <optional>

A config for the underlying Cardinal SDK.

Properties
Name Type Attributes Description
logging object <optional>

The logging configuration for the Cardinal SDK. See Cardinal's documentation for the logging object for more information.
timeout number <optional>

The time in milliseconds to wait before a request to Cardinal's API times out. See Cardinal's documentation for root level configuration for more information.
maxRequestRetries number <optional>

How many times a request should be re-attempted to Cardinal's API before giving up as a failure. See Cardinal's documentation for root level configuration for more information.
payment object <optional>

An object to describe how you want the user interactions to behave. Only a subset of the Cardinal SDK payment configuration object are supported: displayLoading and displayExitButton.
client Client <optional>

A Client instance.
authorization string <optional>

A tokenizationKey or clientToken. Can be used in place of options.client.
version number | string <optional>
 1

The version of 3D Secure to use. Possible options:

  • 1 - The legacy 3D Secure v1.0 integration.
  • 2 - A 3D Secure v2.0 integration that uses a modal to host the 3D Secure iframe.
  • 2-bootstrap3-modal - A 3D Secure v2.0 integration that uses a modal styled with Bootstrap 3 styles to host the 3D Secure iframe. Requires having the Bootstrap 3 script files and stylesheets on your page.
  • 2-inline-iframe - A 3D Secure v2.0 integration that provides the authentication iframe directly to the merchant.
callback callback <optional>

The second argument, data, is the ThreeDSecure instance. If no callback is provided, it returns a promise that resolves the ThreeDSecure instance.
Source:
Examples

Creating a v2 3D Secure component using 2 version (Cardinal modal) 

braintree.threeDSecure.create({
  client: clientInstance,
  version: '2'
}, function (createError, threeDSecure) {
  // set up lookup-complete listener
  threeDSecure.on('lookup-complete', function (data, next) {
    // check lookup data

    next();
  });

  // using Hosted Fields, use `tokenize` to get back a credit card nonce

  threeDSecure.verifyCard({
    nonce: nonceFromTokenizationPayload,,
    bin: binFromTokenizationPayload,
    amount: '100.00'
  }, function (verifyError, payload) {
    // inspect payload
    // send payload.nonce to your server
  });
});

Creating a v2 3D Secure component using 2-bootstrap3-modal version 

// must have the boostrap js, css and jquery files on your page
braintree.threeDSecure.create({
  client: clientInstance,
  version: '2-bootstrap3-modal'
}, function (createError, threeDSecure) {
  // set up lookup-complete listener
  threeDSecure.on('lookup-complete', function (data, next) {
    // check lookup data

    next();
  });

  // using Hosted Fields, use `tokenize` to get back a credit card nonce

  // challenge will be presented in a bootstrap 3 modal
  threeDSecure.verifyCard({
    nonce: nonceFromTokenizationPayload,
    bin: binFromTokenizationPayload,
    amount: '100.00'
  }, function (verifyError, payload) {
    // inspect payload
    // send payload.nonce to your server
  });
});

Creating a v2 3D Secure component using 2-inline-iframe version 

braintree.threeDSecure.create({
  client: clientInstance,
  version: '2-inline-iframe'
}, function (createError, threeDSecure) {
  // set up lookup-complete listener
  threeDSecure.on('lookup-complete', function (data, next) {
    // check lookup data

    next();
  });
  // set up iframe listener
  threeDSecure.on('authentication-iframe-available', function (event, next) {
    var element = event.element; // an html element that contains the iframe

    document.body.appendChild(element); // put it on your page

    next(); // let the sdk know the element has been added to the page
  });

  // using Hosted Fields, use `tokenize` to get back a credit card nonce

  threeDSecure.verifyCard({
    nonce: nonceFromTokenizationPayload,,
    bin: binFromTokenizationPayload,
    amount: '100.00'
  }, function (verifyError, payload) {
    // inspect payload
    // send payload.nonce to your server
  });
});