Afterpay 信息展示

站内信息展示接入指南

站内信息展示为您的商店网站添加分期付款信息。例如，在下图中的信息是：

使用 Afterpay 4 期免息分期付款，每期 $25.00 ⓘ

image14.png

信息内容会自动更新，并针对您的产品设计了一套专属的信息展示逻辑。 您可以通过 Business Hub 中的站内信息编辑器来自定义、预览和管理这些信息。

要求

要使用站内信息展示，您必须：

  • 是现有的 Afterpay 商户
  • 与 Afterpay 有直接集成
  • 至少有一个已上线并可使用的零售网站；同时也提供沙箱环境用于测试
注意

如果您已经通过动态组件或 JavaScript 库使用了 Afterpay 信息展示，我们建议您将其替换为站内信息展示。详情请参见迁移页面。

Business Hub 环境

站内信息展示配置是特定于环境的，并与您的生产和沙箱商户账户相关联。如果您需要获取 Business Hub 访问权限，请参阅我们的 Business Hub 访问 页面或联系您的专属客户经理。

要进行测试，您需要访问沙箱门户并获取一组沙箱凭证。点击下面的链接：

沙箱测试

我们建议您先在沙箱 Business Hub 中配置站内信息展示，以在开发商店中查看 Afterpay 信息，然后再在生产环境中上线。

要进行测试，您需要访问沙箱 Business Hub。

在部署到生产环境之前，请确保：

  • 信息在所有产品页面上正确显示
  • 价格变化时信息会更新
  • 信息在购物车页面上正确显示
  • 购物车中的多个产品显示正确的总分期付款金额
  • 不符合条件的产品/购物车正确隐藏信息
  • 信息在移动设备上响应正常
  • 所有必需的属性都正确填充

当您对测试结果满意后，就可以进入生产环境的 Business Hub 配置您的信息了。从该门户，您可以为线上网站配置 Afterpay 信息。

站内信息展示快速入门指南

配置站内信息展示

首先访问任一环境的 Business Hub：

  1. 登录后，在侧边栏导航到站内信息展示选项卡 OSM-AP-implementation-1.png

  2. 从站内信息展示选项卡，进入放置位置子页面 OSM-AP-implementation-2.png

  3. 从可用选项中选择产品或购物车页面来自定义您的信息。您可以按放置位置调整徽标、文本大小和主题。 OSM-implementation-3.png

  4. 导航到设置子页面以查找其他高级配置选项。 OSM-AP-implementation-4.png

  5. 配置设置准备就绪后，点击接入指南子页面，按照那里的说明通过三个步骤将信息添加到您的相关环境商店前端。

以下是生产环境站内信息展示选项卡的示例： OSM-AP-implementation-5.png

将站内信息展示添加到您的商店前端

要在您的商店前端显示分期付款信息，请将接入指南中的相应 <square-placement> 标签添加到代码库中的产品页面和购物车页面文件中。将信息放置在产品价格元素和购物车总额元素的正下方。

产品页面上的 square placement 示例：

1<square-placement
2  data-mpid="{Replace with your MPID}"
3  data-placement-id="{Replace with your product Placement ID}"
4  data-page-type="product"
5  data-amount="{Replace with your own price variable}"
6  data-currency="{Replace with your own currency variable}"
7  data-consumer-locale="{Replace with consumer locale variable}"
8  data-item-skus="{Replace with SKU variable}"
9  data-item-categories="{Replace with category variable}"
10  data-is-eligible="true"
11>
12</square-placement>

确保正确配置在您网站上添加的每个 <square-placement> 标签的以下动态属性：

  1. 设置 data-amount 为页面上显示的金额以计算分期付款。保持 data-mpid 和 data-placement-id 属性不变，使用其当前值。

  2. 将 data-currency 设置为客户的货币，将 data-consumer-locale 设置为客户的国家。

  3. 将 data-item-skus 设置为您使用的任何唯一产品标识符，以字符串形式提供。如果购物车中有多个产品，用逗号分隔。

  4. 将 data-item-categories 设置为相关产品的一个或多个类别名称。这以字符串形式提供，对于多个类别，用逗号分隔。

  5. 要限制使用 Afterpay 销售产品，请将 data-is-eligible 属性设置为 false。要限制使用 Afterpay 结算购物车，请将 data-cart-is-eligible 属性设置为 false。这是可选的。