Standard Checkout

Standard Checkout

JavaScript clearpay.js

Sandbox

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

Production

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

The clearpay.js is used to launch the Clearpay checkout, 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 an order token. The token is then used in conjunction with this JavaScript to launch the Clearpay checkout.

📘

Note

It is only after the consumer completes the Clearpay screenflow and returns to the merchant's website that a subsequent Capture Payment call can be completed.

Redirect Method

The Redirect Method is used by some 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.

📘

Note

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:
Clearpay.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.

<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 initClearpay() {
    Clearpay.redirect({token: "YOUR_TOKEN"});
  }
  </script>
</body>
</html>

👍

Tip

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

https://jsfiddle.net/clearpayeu/f8sxvh7r/4/

Note that since JSFiddle loads the Clearpay checkout inside a frameset, the full features will not be available.