> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.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.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.clearpay.co.uk/_mcp/server.

# Popup Method

The Popup Method can be used to open the Clearpay screenflow 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 screenflow in the same manner as they would if the [Redirect Method](/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.

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

To implement the Popup Method, the following four functions must be called/defined, in order:

1. `AfterPay.initialize` - This prepares the Clearpay JavaScript to initiate the Clearpay 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](https://en.wikipedia.org/wiki/ISO_3166-1) country code of the Merchant account.
2. `AfterPay.open` - This opens the Clearpay popup window and displays a spinning loader animation. This animation will continue to spin until the window is transferred in step 4. **To avoid triggering browser anti-popup rules, this function must be directly triggered by a user action such as a mouse click.**
3. `AfterPay.onComplete` - This property allows a custom function to be defined, to be called when the Clearpay screenflow is completed. This function will be passed an `event` with a `data` property, containing the `orderToken` and `status` as sub-properties.
4. `AfterPay.transfer` - This redirects the popup window 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](/create-checkout).

**`UK`**

```html UK
<html>
<head>
  <script type="text/javascript" src="https://portal.sandbox.clearpay.co.uk/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"});
      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.
      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>
```