# mount()

> Use the mount() method in the instance object to render the payment component into the specified DOM container. This method allows you to initialize and display the payment interface on the checkout page, supports custom appearance, and handles exceptional situations through callback functions.

Use the `mount()` method in the instance object to render the payment component into the specified DOM container. This method allows you to initialize and display the payment interface on the checkout page, supports custom appearance, and handles exceptional situations through callback functions.

## **Method signature**

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

#### Tab: JavaScript

```javascript
mount(renderOptions, sdkSelector)
```

#### Tab: TypeScript

```typescript
mount(renderOptions: PaymentMountOptions, sdkSelector: string): Promise<ICommonApiResponse>
```

## Parameters

This method includes the following parameters to configure the rendering method and mounting target of the payment component:

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| [_renderOptions_](#Jmfs8) | Object | Yes | Used to configure the rendering options of the `mount()` method, defining component type, theme style, and other related properties. |
| _sdkSelector_ | String | Yes | Used to specify the DOM container selector on which the component is mounted using `mount()`. To embed the payment component into your page, the SDK automatically calls the `document.querySelector()` method using the provided CSS selector to locate the corresponding DOM node and mounts the component to that node. |

### _renderOptions_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _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. - _layout_: Arrangement method. - _variables_: Override underlying CSS custom properties using CSS design tokens (e.g., `color-primary`) to implement theme customization. |
| _notRedirectAfterComplete_ | Boolean | No | Sets whether to redirect back to your page after payment completion. Valid values are: - `false`: Default value. Indicates automatic redirection to your page after successful payment. No automatic redirection for payment failures or other scenarios, which requires manual handling. The same applies if the value is empty. - `true`: Indicates no automatic redirection to your page after successful payment. You need to manually control the subsequent flow after payment completion based on client-side event codes. > **Note**: > > - For best practices on handling payment success or failure when [redirecting back to the merchant page](#gxPhN), refer to Redirect to Merchant Page. > - The payment result event codes returned on the client-side are for reference only in page navigation. Transaction status updates must be based on the results returned by the server-side [**notifyPayment**](https://docs.antom.com/ac/ams/paymentrn_online.md) or [**inquiryPayment**](https://docs.antom.com/ac/ams/paymentri_online.md) API. > - This parameter only applies to payment methods completed within Payment Element. |
| [_merchantAppointParam_](#KJPse) | Object | No | Merchant specified parameters. |

#### _merchantAppointParam_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| [_storedCard_](#NzA8o) | Object | No | Merchant specifies stored card parameters. |
| _singleOption_ | String | No | Used to control rendering behavior in single‑payment‑method scenarios. Valid values are:<br/><br/>- `skip`: **Default value.** When the current payment method does not require additional payment elements, the payment method list page is skipped and the process proceeds directly to payment. In cases where payment elements need to be displayed, only those elements are shown.<br/>- `list`: Regardless of the number of payment methods, Antom will render and display the payment method list page. |

##### _storedCard_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _needCVV_ | Boolean | No | Indicates whether CVV verification is required for saved‑card payment scenarios. Valid values are: - `true`: CVV verification is required. - `false`: Default value. CVV verification is not required. |

## Return value

Returns a `Promise` object representing the execution result of the component mounting process. If an exception occurs during mounting (e.g., parameter error), this `Promise` will resolve to an object containing error information.

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| [_error_](#AMRcr) | Object | No | Error information object, returned when mounting fails or encounters an exception. |

### _error_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _code_ | String | Yes | Error code. |
| _message_ | String | Yes | Error message. |
| _traceId_ | String | No | Trace ID for log chain query. |
| _context_ | Any | No | Error context information. |

## Error codes

| _**code**_ | _**status**_ | **Suggested prompt for buyers (**_**message**_**)** | **Description** | **Recommended action** |
| --- | --- | --- | --- | --- |
| `UNKNOWN_EXCEPTION` | `PROCESSING` | 未知异常。请检查付款情况并联系商户。 | Due to unknown reasons, the API call failed. | If the rendering still fails after the front end retries, please contact Antom technical support. |
| `INQUIRY_PAYMENT_SESSION_FAILED` | `FAIL` | 订单状态异常。请检查付款情况并联系商户。 | The payment session has expired. | The order has timed out and been closed. Please use a new paymentRequestId to initiate the payment again. |
| `UI_STATE_ERROR` | `FAIL` | 请求异常，交易无法发起。 | The timing of the `mount()` method call is abnormal. | Integration code exception. Please troubleshoot. If the problem persists, contact Antom technical support. |
| `ERR_DATA_STRUCT_UNRECOGNIZED` | None | 请求异常，交易无法发起。 | The SDK did not return the required payment information. | If the rendering still fails after the front end retries, please contact Antom technical support for details. |
| `PARAM_INVALID` | None | 请求异常，交易无法发起。 | SDK input parameters are abnormal. | Integration code exception. Please troubleshoot. If the problem persists, contact Antom technical support. |
| `INITIALIZE_API_TIMEOUT` | None | 请求异常，交易无法发起。 | The SDK had timed out, causing the checkout page rendering to fail. | Buyer network exception or Antom service exception detected. Please retry the `mount()` method. |
| `INITIALIZE_WEB_TIMEOUT` | None | 请求异常，交易无法发起。 | The checkout page static resource loading had timed out. | Buyer network exception or Antom service exception detected. Please retry the mount() method. |

## Best practices

### Loading management

If you need to embed the Payment Element component into a specific view, you can add a _loading_ indicator before calling the `mount()` method and close it when handling the callback in the `.then()` method.

### Container requirements

If you need to [embed the payment details collection component](https://docs.antom.com/ac/cashierpay/element.md?platform=web-wap#Ygtd4X), it is recommended that the container for Payment Element have a minimum width of 375 px and without height restriction, allowing Payment Element to automatically expand the container height.

### Redirect to the merchant page

The following scenarios describe how redirecting to the merchant page and returning payment results are handled. Please follow the guidelines below:

| _**notRedirectAfterComplete**_ | **Payment result** | **Recommended action** |
| --- | --- | --- |
| `true` | Success/Failure | If you set _notRedirectAfterComplete_ to `true` when creating the Payment Element instance and the payment method supports completing payments within the SDK, the payment result will be returned via the `[submitPayment().then()](https://docs.antom.com/ac/sdks/web_submitPayment.md)` method. You need to handle the redirect logic yourself based on the _{code, status}_ information in the [Error codes](#bflMZ). |
| `false` | Success | After payment is completed, Payment Element will automatically redirect to the _paymentRedirectUrl_ result page you provided in the [**createPaymentSession (One-time Payments)**](https://docs.antom.com/ac/ams/session_cashier.md) API. |
| `false` | Failure | The payment result will be returned via the `[submitPayment().then()](https://docs.antom.com/ac/sdks/web_submitPayment.md)` method. You need to handle the redirect logic yourself based on the _{code, status}_ information in the [Error codes](#bflMZ). |

> **Note**:
>
> -   If the payment requires redirecting to an external page (the payment method does not support payment within the SDK), the payment result will not be returned via `[submitPayment().then()](https://docs.antom.com/ac/sdks/web_submitPayment.md)`. After completing the payment on the external payment page, the payment method will determine whether to automatically redirect back to the _paymentRedirectUrl_ you provided.
> -   The payment results returned by the `[submitPayment().then()](https://docs.antom.com/ac/sdks/web_submitPayment.md)` method are only for client-side page navigation and status display. For the final order status, please obtain it through [Step 3: Obtain the payment result](https://docs.antom.com/ac/cashierpay/element.md?platform=web-wap#MxqX3).