Skip to main content

Elements Lifecycle

After initialization, Elements are available through BasisTheory instance.

Create Element

This lifecycle method returns a new instance of an element type.

var cardElement = BasisTheory.createElement("card", options);

var textElement = BasisTheory.createElement("text", {
targetId: "myInputId",
...options,
});
ParameterRequiredTypeDescription
typetruestringType of the element you want to create
optionsfalseobjectOptions for customizing the element
Unknown type values will throw an error.

Mount Element

This lifecycle method attaches the element to the DOM, under a specific DOM container.

Using a Selector

<div id="my-card"></div>

<script>
cardElement.mount("#my-card");
</script>
ParameterRequiredTypeDescription
selectortruestringCSS selector that matches the DOM container where your element will be mounted

Using a DOM Element

<div id="my-card"></div>

<script>
var container = document.querySelector("#my-card");
cardElement.mount(container);
</script>
ParameterRequiredTypeDescription
elementtrueElementDOM Element where your Basis Theory element will be mounted
Multiple calls to element.mount will result in an error.
If the Application key used to initialize BasisTheory doesn't exist or doesn't have the required permissions, an error will be thrown by this method.

Update Element

This lifecycle method updates the element options the element was initialized with. The values are merged into the previous options.

cardElement.update(options);
ParameterRequiredTypeDescription
optionsfalseobjectOptions for customizing the element

Unmount Element

This lifecycle method safely removes the element from the DOM, stopping any further communication with it.

cardElement.unmount();
Trying to mount an element that has been unmounted will result in an error.