> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers-beta.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers-beta.clearpay.co.uk/v-1/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers-beta.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers-beta.clearpay.co.uk/_mcp/server.

# Standard checkout

The standard Clearpay checkout screenflow is created using a [checkout token](/clearpay-checkout-process) and the Clearpay JavaScript.

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

**`All Regions`**

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

For sandbox environments the JavaScript should be:

**`All Regions`**

```text All Regions
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](/api-reference/online-api/checkouts/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](https://en.wikipedia.org/wiki/ISO_3166-1) country code of the merchant account.
2. `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](/api-reference/online-api/checkouts/create-checkout).

### Example:

```html
<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/](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.

> **Note**
>
> Although this method does not redirect the customer to the `redirectConfirmUrl` or `redirectCancelUrl`, these fields are still required by [Create Checkout](/api-reference/online-api/checkouts/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](/api-reference/online-api/checkouts/create-checkout), the customer browser will not dispatch the JavaScript event for security reasons.

```html
<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>
```