AMSElement

2026-03-06 00:34

使用 AMSElement 类在前端页面创建 Payment Element 实例。创建实例时需传入配置信息，包括环境、语言和在服务端获取到的支付会话数据（paymentSessionData）。实例可用于嵌入支付组件、发起支付等操作。

语法

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

TypeScript

JavaScript

copy
new AMSElement(options: IElementOptions)

参数

参数名称	类型	是否必需	描述
environment	String	否	用于传递环境信息。有效值包括： `sandbox`：沙箱环境。 `prod`：默认值。生产环境。
locale	String	否	用于传递语言信息。您可以根据支付方式的地区选择要传递的值。如果传入有效值以外的值，默认使用英语。有效值为： `en_US`：默认值。英语 `pt_BR`：葡萄牙语（巴西） `pt_PT`：葡萄牙语 `es_ES`：西班牙语 `ko_KR`：韩语 `zh_CN`：简体中文 `zh_HK`：繁体中文 `ms_MY`：马来西亚语 `in_ID`：印度尼西亚语 `th_TH`：泰语 `vi_VN`：越南语 `tl_PH`：菲律宾语 `it_IT`：意大利语 `de_DE`：德语 `fr_FR`：法语 `nl_NL`：荷兰语 `ja_JP`：日语 `ro`：罗马尼亚语 `pl_PL`：波兰语 `ar_SA`：阿拉伯语 `tr_TR`：土耳其语 `hi_IN`：印度语
sessionData	String	是	支付会话数据；使用此参数创建配置对象。需在 createPaymentSession（单笔支付）接口的响应中获取的完整 paymentSessionData 参数传递给此参数。

使用示例

CDN

copy
// 获取浏览器语言
let language = navigator.language || navigator.userLanguage;
language = language.replace("-", "_"); // 将 "-" 替换为 "_"
// 创建 Element 实例
const elementPayment = new window.AMSElement({
  environment: "sandbox",
  locale: "en_US",
  sessionData:sessionData
})

npm

copy
import { AMSElement, ThemeType, PaymentElementLayout } from '@alipay/ams-checkout' // 包管理

// 获取浏览器语言
let language = navigator.language || navigator.userLanguage;
language = language.replace("-", "_"); // 将 "-" 替换为 "_"

// 创建 AMSElement 实例
const elementPayment = new AMSElement({
  environment: "sandbox",
  locale: "en_US",
  sessionData:sessionData
})