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
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 |