个性化购物车和支付体验

个性化购物车转换

通过设置班次来调整推车启动和结束的方式 平滑度 和 期间 用于动画。您可以在预览模式下试验该效果。

设计不同的购物车状态

现在您已经确定了购物车的显示方式，您可以在其 3 种模式中对各种元素进行风格化：

1. 默认（购物车概览）
2. 空（购物车中没有商品）
3. 错误（结账时发生障碍）。

您可以在以下模式之间切换 购物车容器设置.

发现更多： 购物车因素

根据不同状态定制购物车

为了 默认 状态，您可以指定在购物车一览中显示的商品数量。

为了 错误 状态，调整付款失败时可能出现的错误通知。选择 错误信息 文本块来访问 错误信息设置。 点击 铅笔图标 当鼠标悬停在设置中的错误消息旁边时，可以对其进行修改。

你可以 恢复默认 中的错误消息 编辑错误信息.

购物车的样式和自定义完成后，请像在 元素设置面板 > 启动购物车.

设计购物车容器

打开购物车后，页面上的购物车周围会覆盖一层半透明的覆盖层。这被称为“购物车包装层”。

要改变包装器的背景颜色：

1. 选择 购物车包装器 （你可以使用 航海家 为了准确起见）
2. 改变背景色调 样式面板
3. 选择纯色并引入一些透明度来表明它是当前页面上的弹出模式

您可以随时通过从购物车包装器的背景颜色特征中消除应用的样式来恢复到默认样式。

理解支付流

从产品页面或产品列表，买家可以 加入购物车 或直接使用 现在买 选择。

评论：由于 PayPal 结账遵循独特的流程， 现在买 仅对启用 Stripe 的商店有效。

发现更多：添加到购物车并立即购买 

付款程序

客户将商品添加到购物车后，他们可以根据您的商店设置通过 3 种方式完成付款：

1. 继续 支付 页面以使用信用卡完成付款。在付款页面上，他们还可以应用促销代码和/或提供有关其购买的其他详细信息。 提醒：此选项需要 Stripe.
2. 利用 网上支付 （例如 Apple Pay 或 Google Pay）可实现快速结账，无需使用原始 结帐页面. 提醒：此功能需要 Stripe 和 激活在线支付选项.
3. 选择 PayPal 结帐这会打开一个新的弹出窗口，买家可以在其中授权 PayPal。然后买家会被引导至 结帐（PayPal） 页面以完成购买、兑换优惠券并提供更多详细信息。如果您已激活 PayPal，请确保您已自定义该页面。

提醒：您也可以插入 网上支付 和 PayPal 按钮 在默认的顶部 查看 页面，为顾客离开购物车后提供更多选择。

修改结帐页面

在线客户将商品添加到购物车并准备下订单后，他们将打开购物车，选择继续结账，并进入结账页面（/checkout）。

‍

这是您可以调整的初始电子商务实用程序页面。它位于 页面面板 并带有默认元素。您还可以选择修改所有电子商务页面，其中包括：

• 查看
• 结帐（PayPal）——仅当启用 PayPal 时才需要自定义
• 订单确认

您可以根据需要重新排列和设计组件和元素，从而个性化结帐页面。请记住，删除或隐藏带有必填字段的组件可能会破坏结帐表单。您可以随时添加回 订购商品, 订单摘要， 和 网上支付 来自 添加面板 在 结帐页面.

结帐表格

包含结帐页面表单的所有模板元素。如果您希望恢复为默认结帐页面模板，则可以将其包括在内。

订购商品

显示购物车中的所有商品和变体。买家可以在完成结账流程之前确认这些是他们想要购买的商品。

订单摘要

显示购物车的总额、所有税费和运费以及订单的总价。这有助于买家了解他们所支付金额的明细。

网上支付

使您的客户能够绕过标准结账流程并使用他们的数字钱包（例如 Apple Pay 或 Google Pay）快速完成您商店的购买。

详细了解 激活网上支付.

附加信息

显示在结账时收集的任何附加信息字段中输入的数据。提醒：确保更新订单表和结账确认，因为它们有单独的标签和字段，不会自动同步。

设计建议：您还可以在此页面引入导航栏和页脚，包括“继续购物”按钮，将用户引导回主商店页面。

个性化 PayPal 结账

如果您希望使用 PayPal，您必须设计一个独特的 Checkout（PayPal）模板页面。 

如果您不打算在网站上整合 PayPal，则无需关注此页面。如果不激活 PayPal 作为支付提供商，则无法访问 PayPal。

在实际网站上使用 PayPal 时，PayPal 购买顺序将如下所示：

1. 买家选择 PayPal 结帐 来自 大车 或（标准） 结帐页面
2. 出现 PayPal 付款模式，引导买家登录或输入付款详细信息和送货地址
3. 买家返回 结帐（PayPal）页面 PayPal 验证后
4. 买家选择送货方式 结帐（PayPal）页面 （如适用）
5. 买家完成购买
6. 买家登陆 订单确认页面 购买完成后

设计结帐（PayPal）页面

这 结帐（PayPal）页面 在电子商务激活时自动生成。

提醒：对于在包含 PayPal 之前启用电子商务的项目，在添加 PayPal 按钮后会自动生成页面 大车 或者 结帐页面。如果您找不到此页面，请尝试将 PayPal 按钮添加到购物车。

类似于 结帐页面，Paypal 页面包含默认元素，您可以通过 添加面板. 

‍

上的模块 支付网关 (PayPal) 页面 功能与 付款页面，但这两个部分并不相互连接。您必须手动确保它们具有相似的布局和外观。

如果你想雇用 折扣 或聚集 更多详细信息 在结账时，请记住将这些组件合并到 支付 和 支付网关 (PayPal) 页面.

PayPal Checkout 页面与 Checkout 的区别

• 由于购物者通过 PayPal 付款，因此没有用于输入付款详细信息的字段。
• 本页面仅希望购物者提供的信息是首选的送货方式。
• 如果订单中只包含不需要运送的商品，则无需选择运送方式。在这种情况下，该页面更像是完成购买前的最后确认。

笔记：PayPal 不会将购物者的完整帐单地址发送给 Webflow — 在发布的网站上， 付款详情部分 将仅显示姓名和帐单地址所在的国家/地区。

个性化付款页面错误通知

如果结账时出现错误，购物者将看到各种错误消息。您可以通过选择 付款表格 组件并切换到 错误 配置面板内的状态。

接下来，选择 错误信息 组件来访问 错误消息配置。浏览设置以查看画布上的每条消息。要编辑消息，请将鼠标悬停在设置中的消息上，直到出现铅笔图标，表示您可以编辑它。

笔记：如果您的商店使用 PayPal，您需要自定义相同的错误消息 支付网关 (PayPal) 页面 也。

理解订单确认页面和相关元素

提交订单后，在线买家将被引导至订单确认页面。这是电子商务的另一个实用功能 页面面板 > 电子商务页面部分.

这 订单确认页面 具有默认布局，您可以完全修改和设计。与 付款页面，此页面上的所有组件均可从 添加面板。您可以通过拖动订单确认元素将整个模板与所有部分合并。

您可以在订单确认容器内单独集成以下元素： 

• 订单确认
• 订购商品
• 客户信息
• 运输方式
• 付款详情
• 订单摘要
• 额外信息
• 下载（测试版）

订单确认

包含订单确认页面模板的所有元素。如果您希望恢复默认页面模板，请添加它。

订购商品

显示购物车中的所有产品和变体。买家可以在完成结账流程之前确认这些是他们想要购买的商品。

客户信息

揭示 电子邮件地址 和 送货细节 由客户在结帐表单中输入。

运输方式

表示 运输方式 在结账时选择。

付款详情

介绍 付款细节 和 帐单地址 由客户在结账时提供。

笔记：对于 PayPal 交易，仅显示姓名和帐单地址国家/地区，因为 PayPal 不会将完整的帐单地址发送到 Webflow。

订单摘要

显示 小计 购物车中的任何 适用税费 和 运送费，以及 全部的 订单金额。这使购物者能够了解付款明细。

额外信息

帮助收集客户信息，例如电话号码、礼品信息和定制说明。

下载（测试版）

列出订单中所有可下载的文件。了解有关数字下载的更多信息。

设计提示：您可以选择在此页面附加导航栏和页脚。此外，还可以考虑添加一个按钮，用于将用户重定向到主商店页面或您的主页。

掌握最低和最高交易金额的概念

支付处理器强制执行交易限制。如果购物者的订单金额低于最低限额或超过最高限额，他们将在结账时看到错误消息。 

这些交易门槛因支付处理器和商店货币而异：

• PayPal 规定最低限额为 0.01，但 PayPal 用户的交易可能会受到限制。 查看 PayPal 的 documentation 以获得更多见解
• Stripe 的限制取决于商店的货币。例如，以美元计算，最低限额为 $0.50。 参考 Stripe 的 documentation.

当订单金额低于最低限额时，购物者在结账时会遇到“未达到最低订单金额”错误，您可以对此进行定制。了解有关自定义错误消息的更多信息。

了解免费订单

有时，由于赠品或 100% 折扣，购物者可能会下单总金额为零。在这种情况下，Webflow 将在结账后处理订单，而不会将其传送给付款处理器。

关于免费订单的要点：

免费订单将显示在您的 Webflow 订单管理器中，但不显示在您的 Stripe 或 PayPal 仪表板中，因为这些订单不会转发到支付处理器。

由于 PayPal 结账在计算运费之前启动，因此当运费之前的分项总额为 0 时，无法启动 PayPal 结账。因此，在专门使用 PayPal 的商店中，购物者无法完成涉及运费的分项总额为 0 的交易。 

我们建议仅使用 PayPal 的商店提供免费送货服务，或仅对不需要送货的商品使用免费订单。在这种情况下，购物者将使用本地 付款页面 而不是 支付网关 (PayPal) 页面.