mount()

2026-04-17 09:37

使用实例对象中的 mount() 方法，可将支付组件渲染到指定的 DOM 容器内。通过该方法，可以在收银台页面初始化并展示支付界面，支持自定义外观，并且能够通过回调函数处理异常情况。

方法签名

调用此方法时，请使用以下标准方法签名格式：

JavaScript

TypeScript

copy
mount(renderOptions, sdkSelector)

参数

此方法包含以下参数，用于配置支付组件的渲染方式和挂载目标。

参数	类型	是否必需	描述
renderOptions	Object	是	用于配置 `mount()` 方法的渲染选项，定义组件类型、主题样式等相关属性。
sdkSelector	String	是	用于指定 `mount()` 组件挂载的 DOM 容器选择器。为将支付组件挂载到页面中，SDK 将根据您提供的 CSS 选择器自动调用 `document.querySelector()` 方法，查找对应的 DOM 节点并完成组件挂载。

renderOptions

参数	类型	是否必需	描述
appearance	Object	否	用于自定义外观配置，更多信息请参阅自定义外观样式。其包含以下参数： theme：主题颜色。 layout：布局配置。 variables：通过 CSS 设计 Token（如`color-primary`）覆盖底层 CSS 自定义属性，实现主题定制。
notRedirectAfterComplete	Boolean	否	用于设置支付完成后是否跳转回您的页面。有效值为： `false`：默认值。表示支付成功后自动跳回您的页面，支付失败或其他场景不会自动回跳，需要您自行处理。当值为空时同理。 `true`：表示支付完成后不跳转，您需要通过客户端事件码自行控制支付完成后续流程。注意：支付成功或失败在回跳商户页面的最佳实践参见回跳商户页面。客户端返回的支付结果事件码仅用于客户端页面的跳转操作参考，交易状态的更新请以服务端 notifyPayment 或 inquiryPayment 接口返回的结果为准。该参数仅针对 Payment Element 内完成支付的支付方式生效。
merchantAppointParam	Object	否	商户指定参数。

merchantAppointParam

参数	类型	是否必需	描述
storedCard	Object	否	商户指定已存卡参数。
singleOption	String	否	用于控制单支付方式场景下的渲染行为，有效值为： `skip`：默认值。当前支付方式无需补充支付要素时，跳过支付方式列表页，直接进入支付流程。当需要展示支付要素的场景下，仅展示支付要素。 `list`：无论支付方式数量，Antom 均渲染并展示支付方式列表页。

参数

类型

是否必需

描述

storedCard

Object

否

商户指定已存卡参数。

singleOption

String

否

用于控制单支付方式场景下的渲染行为，有效值为：

skip：默认值。当前支付方式无需补充支付要素时，跳过支付方式列表页，直接进入支付流程。当需要展示支付要素的场景下，仅展示支付要素。
list：无论支付方式数量，Antom 均渲染并展示支付方式列表页。

storedCard

参数

类型

是否必需

描述

needCVV

Boolean

否

是否需要 CVV 验证，用于已存卡支付场景。有效值为：

true：需要 CVV 验证。
false：默认值。不需要 CVV 验证。

返回值

此方法返回一个 Promise 对象，用于表示组件挂载流程的执行结果。当挂载过程中发生异常（例如参数错误）时，该 Promise 将解析为包含错误信息的对象。

参数	类型	是否必需	描述
error	Object	否	错误信息对象，挂载失败或异常时返回。

error

参数	类型	是否必需	描述
code	String	是	错误码。
message	String	是	错误信息。
traceId	String	否	追踪 ID，用于日志链路查询。
context	Any	否	错误上下文信息。

错误码

结果码（code）	状态（status）	建议给买家的提示（message）	描述	操作建议
`UNKNOWN_EXCEPTION`	`PROCESSING`	未知异常。请检查付款情况并联系商户。	由于未知原因，接口调用异常。	前端重试后如仍不能渲染成功，请咨询 Antom 技术支持。
`INQUIRY_PAYMENT_SESSION_FAILED`	`FAIL`	订单状态异常。请检查付款情况并联系商户。	支付会话过期。	订单已超时关单，使用新的 paymentRequestId 重新发起支付。
`UI_STATE_ERROR`	`FAIL`	请求异常，交易无法发起。	`mount()` 方法的调用时机异常。	集成代码异常，请自行排查。如问题未解决，请联系 Antom 技术支持。
`ERR_DATA_STRUCT_UNRECOGNIZED`	无	请求异常，交易无法发起。	SDK 未返回支付必要信息。	前端重试后如仍不能渲染成功，请联系 Antom 技术支持获取详细原因。
`PARAM_INVALID`	无	请求异常，交易无法发起。	SDK 入参异常。	集成代码异常，请自行排查。如问题未解决，请联系 Antom 技术支持。
`INITIALIZE_API_TIMEOUT`	无	请求异常，交易无法发起。	SDK 超时，导致收银台渲染失败。	买家网络异常或 Antom 服务异常，建议重试 `mount()` 方法。
`INITIALIZE_WEB_TIMEOUT`	无	请求异常，交易无法发起。	收银台静态资源加载超时。	买家网络异常或 Antom 服务异常，建议重试 `mount()` 方法。

最佳实践

加载动画管理

如果需要在 Payment Element 嵌入组件则将组件嵌入到指定视图里。调用 mount() 方法前，您可以自行添加动画加载效果，并在 .then() 方法中处理回调时关闭动画加载效果。

容器要求

如需要在 Payment Element 嵌入支付要素采集组件，建议嵌入 Payment Element 的容器宽度不小于 375px，并且不限制高度，以便由 Payment Element 自动撑开容器。

回跳商户页面

回跳商户页面及返回支付结果有以下情况，请您按照指引进行处理：

notRedirectAfterComplete	支付结果	建议操作
`true`	成功/失败	若您在创建 Payment Element 实例时将 notRedirectAfterComplete 设置为 `true` 且该支付方式支持在 SDK 内完成支付，并通过 `submitPayment().then()` 方法返回支付结果，您需要根据错误码中的 {code , status} 信息自行处理跳转逻辑。
`false`	成功	支付完成后 Payment Element 会自动跳转至您在 createPaymentSession（单笔支付）接口中传入的 paymentRedirectUrl 支付结果页。
`false`	失败	通过 `submitPayment().then()` 方法返回支付结果，您需要根据错误码中的 {code , status} 信息自行处理跳转逻辑。

注意：
如果支付方式不支持在 SDK 内支付，支付结果不会通过 submitPayment().then() 方法返回。跳转到外部支付方式页面完成支付后，由支付方式决策是否自动回跳到您传入的 paymentRedirectUrl。
submitPayment().then()方法返回的支付结果仅用于客户端页面流转以及状态展示，最终的订单状态请通过步骤 3：获取支付结果获取。