在任意位置启动 Afterpay 信息模态框

本页是一个简短的指南，介绍如何使用 JavaScript 使任何元素能够打开 Afterpay 信息模态框。

对于客户来说，这应该是一个单击操作；点击任何元素，Afterpay 信息模态框就会打开。

说明

请执行以下操作：

1. 使用 HTML 编辑器打开您现有的信息展示脚本。

2. 在 HTML 中加载 square-marketplace.js 脚本，请参见以下示例：

1
<script src="https://js.squarecdn.com/square-marketplace.js" async></script>

3. 向任何元素添加 data-afterpay-modal 属性。当客户点击该元素时，它现在会打开 Afterpay 信息模态框。以下是当客户点击图标符号时打开的示例代码片段：

1
<div>
2
  Or 4 interest-free payments with 
3
  <strong>[Afterpay Logo] <span data-afterpay-modal>ⓘ</span></strong>
4
</div>

区域模态框主题

例如：

<strong>[Afterpay Logo] <span data-afterpay-modal="en_NZ">ⓘ</span></strong>

生成适用于新西兰商户的模态框。

<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU">ⓘ</span></strong>

生成适用于澳大利亚商户的模态框。

请参见下面可选 - 更改信息模态框主题部分中的类似示例。

可选 - 更改信息模态框主题

这是一个针对想要使用非默认模态框主题的商户的选项。只有当您想使用非默认模态框主题时，才为 data-afterpay-modal 属性分配值。

以下是默认模态框主题的代码示例：

1
<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
2
<div>
3
  Or 4 interest-free payments with
4
<strong>[Afterpay Logo] <span data-afterpay-modal>ⓘ</span></strong>
5
</div>

上面的代码示例生成标准的 Bondi Mint 模态框主题：

以下是非默认模态框主题的代码示例：

1
<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
2
<div>
3
  Or 4 interest-free payments with
4
<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU-theme-white">ⓘ</span></strong>
5
</div>

上面的代码示例在这一行中有额外的文本，定义了非默认主题：

<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU-theme-white">ⓘ</span></strong>

请记住，默认是 Bondi Mint 模态框主题。上面的代码示例生成一个非默认的标准白色模态框主题：

如果您为代码的 data-afterpay-modal= 部分分配了不正确的值，将会出现错误信息：