mount()

2026-04-17 09:24

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.

JavaScript

TypeScript

copy
mount(renderOptions, sdkSelector)

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	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. 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, 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 or inquiryPayment API. This parameter only applies to payment methods completed within Payment Element.
merchantAppointParam	Object	No	Merchant specified parameters.

merchantAppointParam

Parameter	Data type	Required	Description
storedCard	Object	No	Merchant specifies stored card parameters.
singleOption	String	No	Used to control rendering behavior in single‑payment‑method scenarios. Valid values are: `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. `list`: Regardless of the number of payment methods, Antom will render and display the payment method list page.

Parameter

Data type

Required

Description

storedCard

Object

Merchant specifies stored card parameters.

singleOption

String

Used to control rendering behavior in single‑payment‑method scenarios. Valid values are:

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.
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

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	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, 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()` method. You need to handle the redirect logic yourself based on the {code, status} information in the Error codes.
`false`	Success	After payment is completed, Payment Element will automatically redirect to the paymentRedirectUrl result page you provided in the createPaymentSession (One-time Payments) API.
`false`	Failure	The payment result will be returned via the `submitPayment().then()` method. You need to handle the redirect logic yourself based on the {code, status} information in the Error codes.

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(). 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() 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.