Standard checkout

The standard Clearpay checkout screenflow is created using a checkout token and the Clearpay JavaScript.

The JavaScript that must be called differs depending on your environment. For production environments the JavaScript should be:

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

For sandbox environments the JavaScript should be:

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

The Clearpay screenflow allows the customer to log in to Clearpay and confirm their payment schedule at checkout. You cannot send payment authorisation or capture (immediate or deferred payment flows) until the customer has completed the Clearpay screenflow and returned to your website.

There are two methods for customer to complete the screenflow that you can implement. They are:

The redirect method
The popup method

Redirect method

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

If the customer confirms their payment schedule at the end of the screenflow, they will be redirected to the URL specified as the redirectConfirmUrl, along with an orderToken and a status of SUCCESS appended as HTTP query parameters.

If the customer cancels their purchase they will be redirected to the URL specified as the redirectCancelUrl, with the orderToken and a status of CANCELLED appended as HTTP query parameters.

The redirectConfirmUrl and redirectCancelUrl properties are defined for each order as part of the Create checkout call.

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

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.
AfterPay.redirect - This redirects the customer'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.

Example:

<html>
<head>
  <script onload="initAfterPay()" src="https://portal.sandbox.afterpay.com/afterpay-async.js" async defer></script>
</head>
<body>
  <p>Your HTML here</p>
  <script>
  function initAfterPay () {
    AfterPay.initialize({countryCode: "GB"});
    AfterPay.redirect({token: "YOUR_TOKEN"});
  }
  </script>
</body>
</html>

👍
Tip
Try using your sandbox credentials to obtain a token from the create checkout endpoint, then use the token to test the Clearpay screen flow on JSFiddle:
https://jsfiddle.net/afterpay/we9xfqgm/
JSFiddle loads the Clearpay screen flow inside a frame-set, so the login and redirect features will not be operational.

Popup Method

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. Customers complete the Clearpay screen flow in the same manner as they would if the Redirect Method was used.

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 customer confirms the transaction, Clearpay calls 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 customer cancels the transaction, Clearpay calls 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 customer 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 customer browser will not dispatch the JavaScript event for security reasons.

<html>
<head>
  <script type="text/javascript" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
</head>
<body>
  <button id="clearpay-button">
    Clearpay it!
  </button>
  <script type="text/javascript">
    document.getElementById("clearpay-button").addEventListener("click", function() {
      AfterPay.initialize({countryCode: "GB"});
      // To avoid triggering browser anti-popup rules, the AfterPay.open()
      // function must be directly called inside the click event listener
      AfterPay.open();
      // If you don't already have a checkout token at this point, you can
      // AJAX to your backend to retrieve one here. The spinning animation
      // will continue until `AfterPay.transfer` is called.
      // If you fail to get a token you can call AfterPay.close()
      AfterPay.onComplete = function(event) {
        if (event.data.status == "SUCCESS") {
          // The customer confirmed the payment schedule.
          // The token is now ready to be captured from your server backend.
        } else {
          // The customer cancelled the payment or closed the popup window.
        }
      }
      AfterPay.transfer({token: "YOUR_TOKEN"});
    });
  </script>
</body>
</html>

Redirect method

Example:

👍Tip

Popup Method

📘

👍
Tip