Express Checkout Element

用一个组件显示多个一键支付按钮。

Express Checkout Element 是一个通过“一键支付”支付方式按钮接受付款的集成。支持的支付方式包括 Link、Apple Pay、Google Pay、PayPal、Klarna 和 Amazon Pay。

通过这种集成，您可以：

根据客户位置动态排列支付方式。
添加支付按钮，无需任何前端更改。
通过重复使用现有的 Elements 实例来无缝集成 Elements，从而节省时间。

尝试演示版

在下面的演示中，您可以切换一些预构建的选项来更改支付界面的背景颜色、布局、大小和收货地址收集栏。此演示只在他们可用的平台上显示 Google Pay 和 Apple Pay。仅在它们支持的国家显示支付方式按钮。

如果您没有看到演示，请尝试在受支持的浏览器中查看此页面。

选项	描述
商家所属国家/地区	用您用来初始化 Stripe.js的公钥进行设置。要更改国家/地区，您必须卸载 Express Checkout Element，更新公钥，然后重新挂载 Express Checkout Element。
背景色	使用 Elements Appearance API 设置颜色。按钮主题继承自 Appearance API 但您也可以在创建 Element 时直接定义它们。
桌面和移动设备大小	使用下拉列表可以设置挂载 Express Checkout Element 的父元素的最大像素宽度。您可以将其设置为 750px（桌面）或 320px（移动设备）。
最大列数和最大行数	创建 Express Checkout Element 时，使用 layout 参数设置这些值。
溢出菜单	创建 Express Checkout Element 时，使用 layout 参数进行设置。
收集收货地址	要收集配送信息，必须在 creating Express Checkout Element 时传递选项。了解有关收集客户详情和显示行项目的更多信息。

通过指南开始

将一键支付钱包添加到结账页面

使用 Checkout Sessions API 构建与 Express Checkout Element 的集成应用。

在高级集成中使用一键支付钱包

使用 Payment Intents API 构建与 Express Checkout Element 的集成应用。

迁移到 Express Checkout Element

从 Payment Request Button Element 迁移到网页版 Express Checkout Element。

查看 Stripe.js 参考

支付方式

Express Checkout Element 提供有效、受支持且已设置的“一键支付”支付方式。

某些支付方式要求在管理平台上激活。
只有当客户使用受支持的浏览器并以受支持的货币支付时，支付方式才可用。
一些支付方式需要客户进行设置操作。例如，如果客户没有设置 Google Pay，他们就看不到 Google Pay 按钮。
请在测试环境和真实模式下均注册您的域名。

Element 根据与客户的相关性对支付方式进行排序。

要控制这些行为，可以自定义支付方式。

支持的浏览器

某些支付方式适用于特定的浏览器。

	Apple Pay	Google Pay	Link	PayPal	Amazon Pay	Klarna
Chrome¹	³
Edge	³
Firefox
Opera	³
Safari	²
Chrome，iOS 16+
Firefox，iOS 16+
Edge 浏览器，iOS 16+

¹Other Chromium browsers might be supported. For more information, see supported browsers.

²使用 iframe 时，它的来源必须与顶级来源匹配（当指定 allow="payment" 属性时，Safari 17+ 除外）。如果两页的协议、主机（完整域名）和端口（如果指定）相同，则这两页相同。

³Apple Pay on desktop Chromium browsers is only supported on MacOS when paymentMethods.applePay is set to always.

版面配置

默认情况下，当 Express Checkout Element 显示多个按钮时，它会根据可用空间在网格中排列这些按钮，并在必要时显示溢出菜单。

您可以覆盖此默认设置，并使用布局选项自行指定一个网格布局。

文本

您可以通过选择按钮类型来控制按钮上的文字。每个数字钱包都有自己的类型。

Link 仅提供一种按钮类型，即显示“Pay with Link”行动号召语和 Link 徽标。

我们尝试检测您客户的区域设置，并通过它来本地化按钮文本。还可以指定一个区域。

此示例代码中包含支持它的按钮的号召语“购买”或“立即购买”。然后，它指定区域设置 de，以获取相应的德语文字。

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

外观

您不能完全自定义 Express Checkout Element 按钮的外观，因为每种支付方式都有自己的徽标和品牌颜色。您可以自定义以下选项：

按钮高度
使用带有外观 API 的变量的边框半径
按钮主题

注意

当边框半径增加到超过特定阈值时，Apple Pay 按钮会自动调整大小。如果要修改默认的边框半径，请务必用所有生效中的支付方式进行测试。

此示例代码设置的是一个浅色主题的元素组，边框半径为 36px，按钮高度为 50px，并覆盖主题以使用 Apple Pay 按钮的白色轮廓版本。

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

我们支持以下主题：

Link 有一个单一的按钮主题，在浅色或深色背景下均可读。

自定义支付方式

您不能指定显示哪些支付方式。例如，如果客户的设备不支持 Google Pay，您就不能强制显示 Google Pay 按钮。

但是您可以通过多种方式自定义支付方式，例如：

您可以从管理平台中激活或停用支付方式。
您可以覆盖 Stripe 根据相关性排列支付方式的默认逻辑。使用 paymentMethodOrder 选项设置您的首选顺序。
如果布局中的空间太小，相关性低的支付方式可能会在溢出菜单中显示。使用布局选项自定义何时出现菜单。
为防止出现 Apple Pay 或 Google Pay，将 paymentMethods.applePay 或 paymentMethods.googlePay 设置为 never。
若要允许 Apple Pay 或 Google Pay 在未设置时显示，请将 paymentMethods.applePay 或 paymentMethods.googlePay 设置为 always。但是，如果平台不支持或者付款时使用的是不受支持的货币，他们仍然不会被迫出现。

地区考虑因素
芬兰
瑞典

芬兰和瑞典的法规要求您在结账时先呈现借记支付方式，然后再呈现贷记支付方式。