在线 API标准结账

标准结账

JavaScript afterpay.js

生产环境 - 所有地区

https://portal.afterpay.com/afterpay.js

沙箱环境 - 所有地区

https://portal.sandbox.afterpay.com/afterpay.js

afterpay.js 启动 Afterpay 界面流程，客户在此登录或注册，然后确认他们的付款计划。

注意

在使用此 JavaScript 之前，您（商户）必须从您的服务器后端调用创建结账并获取结账令牌。然后将该令牌与此 JavaScript 一起使用来启动 Afterpay 界面流程。 只有在客户完成 Afterpay 界面流程并返回到您的网站后，才能完成后续的授权或捕获（无授权）调用。

重定向方法

重定向方法是大多数商户使用的标准方法。此方法将客户从您的网站重定向到 Afterpay 以完成支付。在流程结束时，客户被重定向回您的网站。

  • 如果客户点击确认，他们将被重定向到 redirectConfirmUrl，并在 HTTP 查询参数中附加 orderToken 和状态为 SUCCESS 的 status。
  • 如果客户取消，他们将被重定向到 redirectCancelUrl，并在 HTTP 查询参数中附加 orderToken 和状态为 CANCELLED 的 status。
注意

您（商户）在创建结账调用中为每个订单定义 redirectConfirmUrl 和 redirectCancelUrl。

要实现重定向方法，请按顺序调用以下两个 JavaScript 函数：

  1. AfterPay.initialize - 这将准备 Afterpay JavaScript 在适当的地理区域启动 Afterpay 界面流程。此函数接受一个必需的参数：一个具有必需 countryCode 属性的对象。此属性必须包含商户账户的两字符 ISO 3166-1 国家代码。
  2. AfterPay.redirect - 这将客户的浏览器从您的网站重定向到 Afterpay。此函数接受一个必需的参数：一个具有必需 token 属性的对象。此属性必须包含由创建结账返回的结账令牌。
1<html>
2<head>
3  <script onload="initAfterPay()" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
4</head>
5<body>
6  <p>Your HTML here</p>
7  <script>
8  function initAfterPay () {
9    AfterPay.initialize({countryCode: "AU"});
10    AfterPay.redirect({token: "YOUR_TOKEN"});
11  }
12  </script>
13</body>
14</html>
建议

尝试使用您的沙箱商户凭证从创建结账获取令牌。然后使用此令牌在 JSFiddle 上测试 Afterpay 界面流程：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，但创建结账仍然需要这些字段。这些字段用于 postMessage 的上下文。

在界面流程完成时，打开窗口的协议、主机和端口可能与创建结账中提供的不匹配。在这种情况下，出于安全原因，客户的浏览器将不会触发 JavaScript 事件。

1<html>
2<head>
3  <script type="text/javascript" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
4</head>
5<body>
6  <button id="afterpay-button">
7    Afterpay it!
8  </button>
9  <script type="text/javascript">
10    document.getElementById("afterpay-button").addEventListener("click", function() {
11      AfterPay.initialize({countryCode: "AU"});
12      // To avoid triggering browser anti-popup rules, the AfterPay.open()
13      // function must be directly called inside the click event listener
14      AfterPay.open();
15      // If you don't already have a checkout token at this point, you can
16      // AJAX to your backend to retrieve one here. The spinning animation
17      // will continue until `AfterPay.transfer` is called.
18      // If you fail to get a token you can call AfterPay.close()
19      AfterPay.onComplete = function(event) {
20        if (event.data.status == "SUCCESS") {
21          // The customer confirmed the payment schedule.
22          // The token is now ready to be captured from your server backend.
23        } else {
24          // The customer cancelled the payment or closed the popup window.
25        }
26      }
27      AfterPay.transfer({token: "YOUR_TOKEN"});
28    });
29  </script>
30</body>
31</html>