Online APIAdding Clearpay to Your Site

Standard Checkout

JavaScript afterpay.js

Production

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

Sandbox

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

The afterpay.js is used to launch the Clearpay screen flow, where the consumer logs in (or registers) then confirms their payment schedule.

Note

Before this JavaScript can be used, the merchant must call Create Checkout from their server backend and retrieve a checkout token. The token is then used in conjunction with this JavaScript to launch the Clearpay screen flow.

Note

It is only after the consumer completes the Clearpay screen flow and returns to the merchant’s website that a subsequent Auth or Capture (Without Auth) call can be completed.

Redirect Method

The Redirect Method is the standard method used by most merchants. This method redirects the consumer away from the merchant’s website to Clearpay to complete their payment. At the end of the process, the consumer will be redirected back to the merchant’s website.

  • If the Consumer clicks “confirm”, they will be redirected to the redirectConfirmUrl, with the orderToken and a status of “SUCCESS” appended as HTTP query parameters.
  • If the Consumer cancels, they will be redirected to the redirectCancelUrl, with the orderToken and a status of “CANCELLED” appended as HTTP query parameters.

The Merchant defines the redirectConfirmUrl and redirectCancelUrl for each order in their Create Checkout call.

To implement the Redirect Method, the following two JavaScript functions must be called, in order:

  1. AfterPay.initialize - This prepares the Clearpay JavaScript to initiate the Clearpay screen flow in the appropriate geographical region. This function accepts one required argument: an object with a required countryCode property. This property must contain the two-character ISO 3166-1 country code of the Merchant account.
  2. AfterPay.redirect - This redirects the consumer’s browser from the merchant’s website to Clearpay. This function accepts one required argument: an object with a required token property. This property must contain the checkout token returned by Create Checkout.
1<html>
2<head>
3  <script onload="initAfterPay()" src="https://portal.sandbox.afterpay.com/afterpay-async.js" async defer></script>
4</head>
5<body>
6  <p>Your HTML here</p>
7  <script>
8  function initAfterPay () {
9    AfterPay.initialize({countryCode: "GB"});
10    AfterPay.redirect({token: "YOUR_TOKEN"});
11  }
12  </script>
13</body>
14</html>
Tip

Try using your Sandbox Merchant credentials to obtain a token from Create Checkout, then use the token to test the Clearpay screen flow on JSFiddle:

https://jsfiddle.net/afterpay/we9xfqgm/

Note that since JSFiddle loads the Clearpay screen flow inside a frame-set, the login and redirect features will not be operational.

The Popup Method can be used to open the Clearpay screen flow in a new browser window. For windowed applications, the merchant website will be overlaid with a semi-transparent curtain, with the Clearpay window on top. For fullscreen applications (such as mobile), the browser will switch to a new tab for the Clearpay window. In any case, the consumer will complete the Clearpay screen flow in the same manner as they would if the Redirect Method was used.

The main difference is what happens when the payment is complete. Instead of redirecting to a URL on the merchant website with additional query parameters appended, Clearpay will use postMessage to call a JavaScript method on the merchant’s front end.

  • If the Consumer clicks “confirm”, Clearpay will call the onComplete method on the Merchant website, passing the orderToken and a status of “SUCCESS” as properties of a data object. The popup will close.
  • If the Consumer cancels, Clearpay will call the onComplete method on the Merchant website, passing the orderToken and a status of “CANCELLED” as properties of a data object. The popup will close.

Although this method does not redirect the Consumer to the redirectConfirmUrl or redirectCancelUrl, these fields are still required by Create Checkout, and are used for context on postMessage.

At the time of screen flow completion, if the protocol, host and port of the opening window do not match those provided in Create Checkout, the consumer’s browser will not dispatch the JavaScript event for security reasons.

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="clearpay-button">
7    Clearpay it!
8  </button>
9  <script type="text/javascript">
10    document.getElementById("clearpay-button").addEventListener("click", function() {
11      AfterPay.initialize({countryCode: "GB"});
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 consumer confirmed the payment schedule.
22          // The token is now ready to be captured from your server backend.
23        } else {
24          // The consumer cancelled the payment or closed the popup window.
25        }
26      }
27      AfterPay.transfer({token: "YOUR_TOKEN"});
28    });
29  </script>
30</body>
31</html>