Web Elements

Web Elements

web-elements

Loading Stars

Loading Contributors

The Basis Theory Web elements makes it easy to build secure web applications that collect or reveal sensitive data using Elements.

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

Before You Begin

This SDK requires the use of an API Key associated with a Public Application, which only allows token:create or token:update permissions to mitigate the risk that these API keys may be publicly exposed within your frontend applications.

To create one, login into our Portal and create a new "Public" Application with the permissions you require.

Considerations

Basis Theory Web Elements SDK uses conventional camel case for most methods and converts these properties to snake case when sending requests to the API. One notable exception to this is the Tokenize method which uses snake case for the request body.

Installation

To install web elements you can choose either our ES module or CDN hosted bundle through a script tag.

npm

npm install --save @basis-theory/web-elements

yarn

yarn add @basis-theory/web-elements

CDN

<!-- Including this tag will export a global/window "basistheory" variable -->
<!-- 
  You can either pin the version to a specific release for stability 
  or use the latest tag to always pull the most recent version. 
  However, relying on latest can be risky, as it may introduce unexpected changes or breaking updates. 
  For detailed information about each version, refer to our changelog.
-->

<script src="https://js.basistheory.com/web-elements/latest/index.js"></script>
<!-- or -->
<script src="https://js.basistheory.com/web-elements/1.0.0/index.js"></script>

Initialization

ES Module

import { basistheory } from "@basis-theory/web-elements";

const bt = await basistheory("<PUBLIC_API_KEY>")
// use Elements

CDN

<script>
  // you can initialize it wherever it suits your workflow best
  // here we are waiting for the window to load, to make sure BasisTheory instance
  // has been injected in the window variable
  let bt;

  window.addEventListener("load", async () => {
    try {
      // global/window variable basistheory is an instance, but requires initialization
      bt = await basistheory("<PUBLIC_API_KEY>");
      // use Elements
    } catch (e) {
      // handle errors that could happen while loading elements script
    }
  });
</script>

Parameter	Required	Type	Description
apiKey	true	string	The API Key used to identify an Application.

Elements are meant to be used in browser environments only. If you installed web-elements as a module, make sure the instance that loads elements runs on the browser-side code.