> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Express Payments 模块

> 在 Upcart 抽屉中的主 checkout 按钮下方展示加速结账按钮。

<div id="overview">
  # 概述
</div>

此功能可让你展示 Shopify 的快捷支付选项（例如 Shop Pay、Apple Pay 或 Google Pay），利用买家已保存的支付方式提供更快的结账体验。

快捷或加速结账按钮可以帮助回头客跳过手动输入支付和配送信息的步骤，更快完成购买。这些按钮显示在购物车中**主 Checkout 按钮的下方**，并由 Shopify 提供支持。

Upcart 在视觉和结构上支持这些按钮，但**其行为和可见性由 Shopify 控制**。

📘 了解更多请参阅 [Shopify 关于加速结账的文档](https://help.shopify.com/en/manual/payments/accelerated-checkouts)以及 [Shopify 关于加速结账按钮的发布说明](https://shopify.dev/changelog/developer-preview-accelerated-checkout-buttons-on-storefront-now-support-shopify-functions-bundles-and-have-improved-performance)。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-shop-pay-paypal-google.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=dece6cba6c512237980466fd1b02dd87" alt="Upcart checkout 按钮下方的 Shop Pay、PayPal 和 Google Pay 快捷按钮" width="600" data-path="images/upcart/express-payments-shop-pay-paypal-google.png" />

<div id="getting-express-payments-to-show">
  # **让 Express Payments 显示出来**
</div>

要在 Upcart 内展示加速结账按钮，你的 Shopify 主题必须已在店面上包含它们。你可以通过以下方式实现：

1. **在主题代码中添加一段代码片段**

   * 前往 **Online Store > Themes > Edit Code**
   * 打开 **layout/theme.liquid** 文件
   * 找到 `<body>` 开始标签（不是 `</body>`）
   * 在该标签下方粘贴以下代码：

     ```
     {% if additional_checkout_buttons %} <div style="display: none !important"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}
     ```
2. 保存文件

以下是完成后的效果示例：

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-additional-checkout-buttons-liquid.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=25dd197de897db2a448ed1d15c4a8b1e" alt="theme.liquid 中 body 标签下方添加的 additional checkout buttons Liquid 代码片段" width="1076" height="388" data-path="images/upcart/express-payments-additional-checkout-buttons-liquid.png" />

完成后，Upcart 就能够检测并渲染你的快捷支付选项。

💡 如果你不想编辑代码，请联系你的开发者或 [Shopify 专家](https://experts.shopify.com)。

<div id="payment-gateways">
  # 支付网关
</div>

**Payment gateways** 卡片属于**旧版** Express Payments 模块——只有当你的商店仍在使用旧版本时才会看到它。它列出了 Upcart 可以在购物车中显示的快捷支付网关，并允许你分别开启或关闭每个网关，以及设置它们的显示顺序。共列出六个网关：

* Shop Pay
* PayPal
* Apple Pay
* Amazon Pay
* Meta Pay
* Google Pay — 已列出但标记为 **Coming Soon**，不可选择

Google Pay 是被有意保留的：它在购物车变化时不会刷新，因此对于在点击它之前编辑过购物车的顾客，它会显示过时的价格。其他五个网关可以启用和重新排序——已启用的网关位于一个有序列表中，使用每行旁边的上下箭头更改顺序；已禁用的网关位于下方，点击即可重新添加。

<Note>
  在此处启用某个网关并不保证它一定会显示。如果该网关未在你的 Shopify 商店中启用，或者购物者不符合其使用条件，它在实际购物车中将被隐藏——例如，Apple Pay 按钮只会在受支持的设备和浏览器上显示。有关如何启用网关以及每个网关的资格规则，请参阅 [Shopify 的加速结账文档](https://help.shopify.com/en/manual/payments/accelerated-checkouts)。
</Note>

<div id="accelerated-checkout-buttons-design">
  # 加速结账按钮设计
</div>

按钮设置完成后，你可以自定义它们在 Upcart 中的外观。

<div id="button-height">
  ## **按钮高度**
</div>

* \*\*Default button height（默认按钮高度）\*\*和 \*\*Mobile button height（移动端按钮高度）\*\*分别设置，范围均为 **25 px 到 55 px**
* 每项都有一个数字输入框和一个绑定同一数值的滑块——使用哪个更方便都可以

<div id="checkout-button-alignment">
  ## **Checkout 按钮对齐**
</div>

* 选择快捷按钮的对齐方式：

  * **Left（左对齐）**
  * **Right（右对齐）**
  * **Center（居中）**
  * **Space Between（两端分布）**

<div id="row-gap">
  ## **行间距**
</div>

* 设置堆叠按钮之间的垂直间距，范围为 **0 px 到 40 px**

<div id="advanced-display-options">
  # **高级显示选项**
</div>

<div id="hide-buyer-consent">
  ## **隐藏买家同意声明**
</div>

启用后，将隐藏购物车中包含订阅商品时通常显示的买家同意信息。如果你已在其他地方提供了相关信息，这有助于减少视觉干扰。

<div id="render-cart-in-shadow-dom">
  ## **在 Shadow DOM 中渲染购物车**
</div>

启用此选项可防止 Shopify 主题的 CSS 干扰 Upcart 的样式。\
这可以确保在所有浏览器和设备上保持一致的设计。

启用此选项还会同时应用 **Settings > Cart settings > Advanced Settings** 中的同一设置。

<div id="theme-compatibility-notes">
  ## **主题兼容性说明**
</div>

* Shopify 现在对加速结账按钮实施**严格的样式规则**。
* Upcart 的新版本完全支持这些规则，并将遵循 Shopify 的样式行为。

⚠️ 在当前模块上，顶部会出现一个 **Revert To Old Version** 横幅，带有 **Revert To Legacy Express Payments** 按钮。它仅适用于过时的主题——回退会让你回到 Shopify 样式规则之前的行为，因此除非你的主题确实需要，否则请不要使用。

如果你确实回退了，请取消勾选之前模块中已保存的所有样式选项，以免它们干扰新版本。
