> 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.
# 标准结账
**JavaScript afterpay.js**
## 生产环境 - 所有地区
`https://portal.afterpay.com/afterpay.js`
## 沙箱环境 - 所有地区
`https://portal.sandbox.afterpay.com/afterpay.js`
`afterpay.js` 启动 Afterpay 界面流程，客户在此登录或注册，然后确认他们的付款计划。
> **注意**
>
> 在使用此 JavaScript 之前，您（商户）必须从您的服务器后端调用[创建结账](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/api-reference/reference/checkouts/create-checkout-1)并获取结账令牌。然后将该令牌与此 JavaScript 一起使用来启动 Afterpay 界面流程。
> 只有在客户完成 Afterpay 界面流程并返回到您的网站后，才能完成后续的授权或捕获（无授权）调用。
## 重定向方法
重定向方法是大多数商户使用的标准方法。此方法将客户从您的网站重定向到 Afterpay 以完成支付。在流程结束时，客户被重定向回您的网站。
* 如果客户点击**确认**，他们将被重定向到 `redirectConfirmUrl`，并在 HTTP 查询参数中附加 `orderToken` 和状态为 **SUCCESS** 的 `status`。
* 如果客户取消，他们将被重定向到 `redirectCancelUrl`，并在 HTTP 查询参数中附加 `orderToken` 和状态为 **CANCELLED** 的 `status`。
> **注意**
>
> 您（商户）在[创建结账](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/api-reference/reference/checkouts/create-checkout-1)调用中为每个订单定义 `redirectConfirmUrl` 和 `redirectCancelUrl`。
要实现重定向方法，请按顺序调用以下两个 JavaScript 函数：
1. `AfterPay.initialize` - 这将准备 Afterpay JavaScript 在适当的地理区域启动 Afterpay 界面流程。此函数接受一个必需的参数：一个具有必需 `countryCode` 属性的对象。此属性必须包含商户账户的两字符 [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) 国家代码。
2. `AfterPay.redirect` - 这将客户的浏览器从您的网站重定向到 Afterpay。此函数接受一个必需的参数：一个具有必需 `token` 属性的对象。此属性必须包含由[创建结账](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/api-reference/reference/checkouts/create-checkout-1)返回的结账令牌。
```HTML
Your HTML here
```
> **建议**
>
> 尝试使用您的沙箱商户凭证从[创建结账](../../reference/Checkouts.v2.yaml/paths/~1v2~1checkouts/post)获取令牌。然后使用此令牌在 JSFiddle 上测试 Afterpay 界面流程：[https://jsfiddle.net/afterpay/cyd3pxfj/](https://jsfiddle.net/afterpay/cyd3pxfj/)
> \
> \
> 请注意，由于 JSFiddle 在框架集内加载 Afterpay 界面流程，登录和重定向功能将不起作用。
## 弹出窗口方法
您可以使用弹出窗口方法在新的浏览器窗口中打开 Afterpay 界面流程。
对于窗口应用程序，商户网站会被半透明的遮罩覆盖，Afterpay 窗口显示在上方。对于全屏应用程序（在移动设备上），浏览器会切换到新标签页以显示 Afterpay 窗口。
在任何情况下，客户都会像使用**重定向方法**一样完成 Afterpay 界面流程。主要区别在于支付完成时。不会重定向到附加了额外查询参数的商户网站 URL。相反，Afterpay 使用 `postMessage` 调用商户前端的 JavaScript 方法。
* 如果客户点击**确认**，Afterpay 调用商户网站上的 `onComplete` 方法。Afterpay 将 `orderToken` 和状态为 **SUCCESS** 的 `status` 作为数据对象的属性传递。然后弹出窗口关闭。
* 如果客户取消，Afterpay 调用商户网站上的 `onComplete` 方法。Afterpay 将 `orderToken` 和状态为 **CANCELLED** 的 `status` 作为数据对象的属性传递。然后弹出窗口关闭。
> **注意**
>
> 虽然此方法不会将客户重定向到 `redirectConfirmUrl` 或 `redirectCancelUrl`，但[创建结账](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/api-reference/reference/checkouts/create-checkout-1)仍然需要这些字段。这些字段用于 `postMessage` 的上下文。
> \
> \
> 在界面流程完成时，打开窗口的协议、主机和端口可能与[创建结账](https://afterpay.docs.buildwithfern.com/afterpay-online-developer/api-reference/reference/checkouts/create-checkout-1)中提供的不匹配。在这种情况下，出于安全原因，客户的浏览器将不会触发 JavaScript 事件。
```HTML
```