Express Checkout 元素文档

概述

Express Checkout 元素提供了一种简化的支付体验，集成了 Apple Pay、Google Pay 和其他基于钱包的快捷支付方式。它允许客户使用预填充的配送和支付信息快速完成购买。

创建 Express Checkout 元素

基础设置

配置选项

ExpressCheckout 选项

参数	类型	必填	描述
`business`	Object	否	结账时显示的商家信息
`business.name`	String	否	向客户显示的商家名称
`shippingAddressRequired`	Boolean	否	是否需要客户提供配送地址
`allowedShippingCountries`	Array	否	允许配送的国家代码数组（例如：`['US', 'CA']`）
`shippingRates`	Array	否	可供客户选择的配送选项
`lineItems`	Array	否	要显示的订单明细项
`applePay`	Object	否	Apple Pay 特定配置选项

ShippingRate 对象

参数	类型	必填	描述
`id`	String	是	配送方式的唯一标识符
`displayName`	String	是	向客户显示的配送方式名称
`amount`	Number	是	配送费用（实际金额）

LineItem 对象

参数	类型	必填	描述
`name`	String	是	明细项的名称/描述
`amount`	Number	是	价格（实际金额）

ApplePay 对象

Apple Pay 特定配置，用于设置订阅支付等高级功能。

📖 详细参数说明
关于 Apple Pay 循环支付的详细参数和配置，请参考 Apple 官方文档：
Apple Pay on the Web - Recurring Payments

参数	类型	必填	描述
`recurringPaymentRequest`	Object	否	循环支付请求配置，用于订阅类型的支付

recurringPaymentRequest 对象

参数	类型	必填	描述
`paymentDescription`	String	是	支付描述，向客户说明此循环支付的用途
`managementURL`	String	是	管理 URL，客户可以在此 URL 管理其订阅
`regularBilling`	Object	是	常规账单配置
`billingAgreement`	String	否	账单协议文本

regularBilling 对象

参数	类型	必填	描述
`amount`	Number	是	循环支付金额（实际金额）
`label`	String	是	账单标签，向客户显示的账单项名称
`recurringPaymentStartDate`	Date	是	循环支付开始日期
`recurringPaymentEndDate`	Date	是	循环支付结束日期
`recurringPaymentIntervalUnit`	String	是	循环支付间隔单位，可选值：`'year'`、`'month'`、`'day'`、`'hour'`、`'minute'`
`recurringPaymentIntervalCount`	Number	是	循环支付间隔数量，例如：每 2 个月则为 2

配置示例

基础配置示例

Apple Pay 订阅支付配置示例

当使用 mode: 'subscription' 时，可以配置 Apple Pay 的循环支付功能：

不同订阅周期示例

每年订阅：

每两周订阅：

事件

Express Checkout 元素会发出多个事件，您可以监听这些事件来处理客户交互。

shippingAddressChange

当客户更改配送地址时触发。使用此事件根据新地址更新配送方式和明细项。

事件参数：

resolve(options)：调用以接受地址更改并更新配送选项

options.lineItems：更新后的明细项数组

options.shippingRates：更新后的配送方式数组

reject()：调用以拒绝该地址（例如：如果无法配送）

shippingRateChange

当客户选择不同的配送方式时触发。

事件参数：

resolve(options)：调用以确认配送方式更改

options：可选对象，用于任何需要的更新

click

当点击快捷结账按钮时触发。

cancel

当客户取消快捷结账流程时触发。

ready

当快捷结账元素完全加载并准备好交互时触发。此事件会返回当前可用的支付方式信息。

事件参数：

event (Object)：事件对象

availablePaymentMethods (Object)：可用的支付方式对象，键为支付方式名称，值为布尔值

applePay (Boolean)：Apple Pay 是否可用

googlePay (Boolean)：Google Pay 是否可用

其他支持的快捷支付方式...

confirm

当客户在快捷结账流程中确认支付时触发。

方法

mount(domId)

将快捷结账元素挂载到 DOM 元素。

参数：

domId (String)：组件应挂载到的 DOM 元素的 ID

unmount()

从 DOM 中移除快捷结账元素。

gp & ap 快捷支付

Express Checkout 元素文档

概述

创建 Express Checkout 元素

基础设置

配置选项

ExpressCheckout 选项

ShippingRate 对象

LineItem 对象

ApplePay 对象

recurringPaymentRequest 对象

regularBilling 对象

配置示例

基础配置示例

Apple Pay 订阅支付配置示例

不同订阅周期示例

事件

shippingAddressChange

shippingRateChange

click

cancel

ready

confirm

方法

mount(domId)

unmount()

完整集成示例

gp & ap 快捷支付

Express Checkout 元素文档#

概述#

创建 Express Checkout 元素#

基础设置#

配置选项#

ExpressCheckout 选项#

ShippingRate 对象#

LineItem 对象#

ApplePay 对象#

recurringPaymentRequest 对象#

regularBilling 对象#

配置示例#

基础配置示例#

Apple Pay 订阅支付配置示例#

不同订阅周期示例#

事件#

shippingAddressChange#

shippingRateChange#

click#

cancel#

ready#

confirm#

方法#

mount(domId)#

unmount()#

完整集成示例#

Express Checkout 元素文档

概述

创建 Express Checkout 元素

基础设置

配置选项

ExpressCheckout 选项

ShippingRate 对象

LineItem 对象

ApplePay 对象

recurringPaymentRequest 对象

regularBilling 对象

配置示例

基础配置示例

Apple Pay 订阅支付配置示例

不同订阅周期示例

事件

shippingAddressChange

shippingRateChange

click

cancel

ready

confirm

方法

mount(domId)

unmount()

完整集成示例