# VaultingElement

> Vaulting binding card element, used to collect the buyer's credit card/debit card information and complete the card binding process. Card binding refers to saving the buyer's payment method to the merchant system for quick payment later.

Vaulting binding card element, used to collect the buyer's credit card/debit card information and complete the card binding process. Card binding refers to saving the buyer's payment method to the merchant system for quick payment later.

> **Note**: VaultingElement is only responsible for rendering the card binding form and collecting information. The actual card binding submission requires calling [`antom.confirmCardSetup()`](https://docs.antom.com/ac/sdks/web_antom-confirmPayment.md), passing the VaultingElement instance as the _elements_ parameter.

## **Method signature**

When calling this method, please use the following standard method signature format.

#### Tab: JavaScript

```javascript
antom.createElement('vaulting', options)
```

#### Tab: TypeScript

```typescript
antom.createElement(elementType: 'vaulting', options?: VaultingAppConfig): VaultingElement
```

## Parameters

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _elementType_ | String | Yes | Element type. In this scenario, pass in `vaulting`, used to collect the buyer's credit card/debit card information and complete the card binding process. |
| [_options_](#3twpC) | Object | No | A configuration object used to set the appearance theme and multilingual environment of components. |

### _options_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _sessionData_ | String | Yes | Card binding session data. Used to identify the current card binding session, this value is generated and returned by the merchant server. |
| _locale_ | String | No | Multilingual configuration. > **Note**: If the _locale_ parameter is set in the [`loadAntom()`](https://docs.antom.com/ac/sdks/web_loadAntom.md) method, the _locale_ value in the [`antom.createElement()`](https://docs.antom.com/ac/sdks/web_antom-createElement.md) method takes precedence. Valid values are: - `en_US`: Default value. English - `pt_BR`: Portuguese (Brazil) - `pt_PT`: Portuguese - `es_ES`: Spanish - `ko_KR`: Korean - `zh_CN`: Simplified Chinese - `zh_HK`: Traditional Chinese - `ms_MY`: Malay - `in_ID`: Indonesian - `th_TH`: Thai - `vi_VN`: Vietnamese - `tl_PH`: Filipino - `it_IT`: Italian - `de_DE`: German - `fr_FR`: French - `nl_NL`: Dutch - `ja_JP`: Japanese - `ro`: Romanian - `pl_PL`: Polish - `ar_SA`: Arabic - `tr_TR`: Turkish - `hi_IN`: Hindi |
| _appearance_ | Object | No | Used for custom appearance configuration. For more information, refer to [Appearance customization](https://docs.antom.com/ac/cashierpay/appearance.md). It contains the following parameters: - _theme_: Theme color. - _variables_: Override underlying CSS custom properties using CSS design tokens (e.g., `color-primary`) to implement theme customization. |

## Return value

This method returns a VaultingElement instance object, providing methods for mounting, unmounting, destroying, registering event listeners, and updating configuration:

| **Method name** | **Description** |
| --- | --- |
| [`element.on()`](https://docs.antom.com/ac/sdks/web_element-on.md) | Register event listeners for the Element instance. |
| [`element.mount()`](https://docs.antom.com/ac/sdks/web_element-mount.md) | Used to mount the Element to the DOM. |
| [`element.destroy()`](https://docs.antom.com/ac/sdks/web_element-destroy.md) | Destroy the current Element (cannot be mounted again). |
| [`element.unmount()`](https://docs.antom.com/ac/sdks/web_element-unmount.md) | Unmount the current Element (can be mounted again). |
| [`element.updateConfig()`](https://docs.antom.com/ac/sdks/web_antom-updateConfig.md) | Update the configuration of the Element. |