Standard Checkout

JavaScript afterpay.js

Production

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

Sandbox

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

The afterpay.js is used to launch the Afterpay screenflow, 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 Afterpay screenflow.

📘

Note

It is only after the consumer completes the Afterpay screenflow 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 Afterpay 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 Afterpay JavaScript to initiate the Afterpay screenflow 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 Afterpay. 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 initAfterPay () {
    AfterPay.initialize({countryCode: "AU"});
    AfterPay.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 Afterpay screenflow on JSFiddle:

https://jsfiddle.net/afterpay/cyd3pxfj/

Note that since JSFiddle loads the Afterpay screenflow inside a frameset, the login and redirect features will not be operational.

Popup Method

The Popup Method can be used to open the Afterpay screenflow in a new browser window. For windowed applications, the merchant website will be overlaid with a semi-transparent curtain, with the Afterpay window on top. For fullscreen applications (such as mobile), the browser will switch to a new tab for the Afterpay window. In any case, the consumer will complete the Afterpay screenflow in 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, Afterpay will use postMessage to call a JavaScript method on the merchant's front end.

  • If the Consumer clicks "confirm", Afterpay 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, Afterpay 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 screenflow 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.

<html>
<head>
  <script type="text/javascript" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
</head>
<body>
  <button id="afterpay-button">
    Afterpay it!
  </button>
  <script type="text/javascript">
    document.getElementById("afterpay-button").addEventListener("click", function() {
      AfterPay.initialize({countryCode: "AU"});
      // 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 consumer confirmed the payment schedule.
          // The token is now ready to be captured from your server backend.
        } else {
          // The consumer cancelled the payment or closed the popup window.
        }
      }
      AfterPay.transfer({token: "YOUR_TOKEN"});
    });
  </script>
</body>
</html>s