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
- yarn
- CDN
npm install --save @basis-theory/3ds-web
yarn add @basis-theory/3ds-web
<!-- Including this tag will export a global/window "BasisTheory3ds" method -->
<script src="https://3ds.basistheory.com"></script>
Initialization
- ES Module
- CDN
import { BasisTheory3ds } from "@basis-theory/3ds-web";
const bt3ds = BasisTheory3ds("<API_KEY>");
<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 |