> This page is for Afterpay Online Developer, version Chinese.
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# 站内信息展示接入指南

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

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

![image14.png](/_fern-img/74ad71367e686c8166a9a0fb16759948deff863d282be583384c0e46f1955f12.webp)

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

## 要求

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

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

> **注意**
>
> 如果您已经通过动态组件或 JavaScript 库使用了 Afterpay 信息展示，我们建议您将其替换为站内信息展示。详情请参见[迁移页面](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/guides/afterpay-messaging/getting-started)。

## Business Hub 环境

站内信息展示配置是特定于环境的，并与您的生产和沙箱商户账户相关联。如果您需要获取 Business Hub 访问权限，请参阅我们的 [Business Hub 访问](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/chinese/merchant-portal-access) 页面或联系您的专属客户经理。

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

| 环境 | 链接                                                                                                     |
| -- | ------------------------------------------------------------------------------------------------------ |
| 沙箱 | [https://hub.sandbox.afterpay.com/onsite-messaging](https://hub.sandbox.afterpay.com/onsite-messaging) |
| 生产 | [https://hub.afterpay.com/onsite-messaging](https://hub.afterpay.com/onsite-messaging)                 |

## 沙箱测试

我们建议您先在[沙箱 Business Hub](https://hub.sandbox.afterpay.com) 中配置站内信息展示，以在开发商店中查看 Afterpay 信息，然后再在生产环境中上线。

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

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

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

当您对测试结果满意后，就可以进入生产环境的 [Business Hub](https://hub.afterpay.com) 配置您的信息了。从该门户，您可以为线上网站配置 Afterpay 信息。

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

### 配置站内信息展示

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

* [沙箱](https://hub.sandbox.afterpay.com) — 我们建议您从这里开始
* [生产](https://hub.afterpay.com)

1. 登录后，在侧边栏导航到站内信息展示选项卡
   ![OSM-AP-implementation-1.png](/_fern-img/b89460b230bc3c741c6acc6a2c616ee6e5bdc576f56d07d5f68ec9c6ab71ec09.webp)

2. 从站内信息展示选项卡，进入放置位置子页面
   ![OSM-AP-implementation-2.png](/_fern-img/c5b8529667df59582cab116aca8e37976e820b404ec32b1b97f26b972c8821f6.webp)

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

4. 导航到设置子页面以查找其他高级配置选项。
   ![OSM-AP-implementation-4.png](/_fern-img/cc940850c2dc331310cdb5c5d3670e75620ebbe228c0953fb422c9fec2c2abb5.webp)

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

以下是生产环境站内信息展示选项卡的示例：
![OSM-AP-implementation-5.png](/_fern-img/e968bff462a407fd888e8ec433d35dbacdb2599bd102df9549f586be44ea6faa.webp)

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

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

产品页面上的 square placement 示例：

```javascript
<square-placement
  data-mpid="{Replace with your MPID}"
  data-placement-id="{Replace with your product Placement ID}"
  data-page-type="product"
  data-amount="{Replace with your own price variable}"
  data-currency="{Replace with your own currency variable}"
  data-consumer-locale="{Replace with consumer locale variable}"
  data-item-skus="{Replace with SKU variable}"
  data-item-categories="{Replace with category variable}"
  data-is-eligible="true"
>
</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。这是可选的。