3DS Web SDK

Enterprise

3D Secure is an Enterprise feature. Contact support@basistheory.com to request access.

The Basis Theory 3DS Web SDK makes it easy to start a 3DS transaction from the browser.

Get started with our guide or continue reading the reference docs.

Before You Begin

The Web 3DS SDK uses methodFrameContainer and challengeFrameContainer as pre-defined HTML element IDs for its operation. Avoid creating elements with the same id as they could be modified by the SDK.

This SDK requires the use of an API Key associated with a Public Application.

To create one, login into our Portal and create a new "Public" Application with the 3ds:session:create permission.

Installation

npm

npm install --save @basis-theory/3ds-web

yarn

yarn add @basis-theory/3ds-web

CDN

<!-- Including this tag will export a global/window "BasisTheory3ds" method -->
<script src="https://3ds.basistheory.com"></script>

Initialization

ES Module

import { BasisTheory3ds } from "@basis-theory/3ds-web";

const bt3ds = BasisTheory3ds("<API_KEY>");

CDN

  <script>
    // you can initialize it wherever it suits your workflow best
    // here we are waiting for the window to load, to make sure BasisTheory3ds method
    // has been injected in the window variable
    window.addEventListener("load", async () => {
      try {
        // get the SDK methods onto a variable
        const bt3ds = BasisTheory3ds("<API_KEY>");
      } catch (e) {
        // handle errors that could happen during initialization
      }
    });
  </script>

Initialization Parameters

Parameter	Required	Type	Description
apiKey	true	string	The API Key used to identify the Application
options	false	object	Options for customizing the SDK usage

Initialization Options

Usage

import { BasisTheory3ds } from "@basis-theory/3ds-web";

const bt3ds = BasisTheory3ds("<API_KEY>", {
  apiBaseUrl: 'https://some-custom-url',
  challengeContainerOptions: {
    id: 'myCustomContainer',
  },
});

Attributes

Attribute	Required	Type	Description
apiBaseUrl	false	string	The base URL for the Basis Theory API, if using a mock API
challengeContainerOptions	false	object	Customizations applied to the challenge container

Challenge Container Options

Attribute	Required	Type	Description
id	false	string	The id for the HTML container which will hold the challenge window. Set as challengeFrameContainer by default