Express Checkout Element

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

The Express Checkout Element is an integration for accepting payments through one-click payment methods buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and Amazon Pay.

通过这种集成，您可以：

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

尝试演示版

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

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

选项	描述
Merchant country	Set this using the publishable key that you use to initialize Stripe.js. To change the country, you must unmount the Express Checkout Element, update the publishable key, then re-mount the Express Checkout Element.
Background color	Set colors using the Elements Appearance API. Button themes are inherited from the Appearance API but you can also define them directly when you create the Element.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Express Checkout Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Max columns and max rows	Set these values using the layout parameter when you Create the Express Checkout Element.
Overflow menu	Set this using the layout parameter when you Create the Express Checkout Element.
Collect shipping address	To collect shipping information, you must pass options when creating the Express Checkout Element. Learn more about collecting customer details and displaying line items.

通过指南开始

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

使用 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+

¹可能会支持其他 chromium 浏览器。有关更多信息，请参见支持的浏览器。

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

版面配置

默认情况下，当 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。但是，如果平台不支持或者付款时使用的是不受支持的货币，他们仍然不会被迫出现。

地区考虑因素
芬兰
瑞典

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