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,
});

Parameter	Required	Type	Description
type	true	string	Type of the element you want to create
options	false	object	Options 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>

Parameter	Required	Type	Description
selector	true	string	CSS 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>

Parameter	Required	Type	Description
element	true	Element	DOM 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);

Parameter	Required	Type	Description
options	false	object	Options 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.