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 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, 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.

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

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 country code of the Merchant account.
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.
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.
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.

1 <html>
2 <head>
3   <script type="text/javascript" src="https://portal.sandbox.clearpay.co.uk/afterpay.js"></script>
4 </head>
5 <body>
6   <button id="clearpay-button">
7     Clearpay it!
8   </button>
9   <script type="text/javascript">
10     document.getElementById("clearpay-button").addEventListener("click", function() {
11       AfterPay.initialize({countryCode: "GB"});
12       AfterPay.open();
13       // If you don't already have a checkout token at this point, you can
14       // AJAX to your backend to retrieve one here. The spinning animation
15       // will continue until `AfterPay.transfer` is called.
16       AfterPay.onComplete = function(event) {
17         if (event.data.status == "SUCCESS") {
18           // The consumer confirmed the payment schedule.
19           // The token is now ready to be captured from your server backend.
20         } else {
21           // The consumer cancelled the payment or closed the popup window.
22         }
23       }
24       AfterPay.transfer({token: "YOUR_TOKEN"});
25     });
26   </script>
27 </body>
28 </html>

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, and are used for context on postMessage.

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

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 country code of the Merchant account.
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.
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.
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.

1 <html>
2 <head>
3   <script type="text/javascript" src="https://portal.sandbox.clearpay.co.uk/afterpay.js"></script>
4 </head>
5 <body>
6   <button id="clearpay-button">
7     Clearpay it!
8   </button>
9   <script type="text/javascript">
10     document.getElementById("clearpay-button").addEventListener("click", function() {
11       AfterPay.initialize({countryCode: "GB"});
12       AfterPay.open();
13       // If you don't already have a checkout token at this point, you can
14       // AJAX to your backend to retrieve one here. The spinning animation
15       // will continue until `AfterPay.transfer` is called.
16       AfterPay.onComplete = function(event) {
17         if (event.data.status == "SUCCESS") {
18           // The consumer confirmed the payment schedule.
19           // The token is now ready to be captured from your server backend.
20         } else {
21           // The consumer cancelled the payment or closed the popup window.
22         }
23       }
24       AfterPay.transfer({token: "YOUR_TOKEN"});
25     });
26   </script>
27 </body>
28 </html>

1	<html>
2	<head>
3	<script type="text/javascript" src="https://portal.sandbox.clearpay.co.uk/afterpay.js"></script>
4	</head>
5	<body>
6	<button id="clearpay-button">
7	Clearpay it!
8	</button>
9	<script type="text/javascript">
10	document.getElementById("clearpay-button").addEventListener("click", function() {
11	AfterPay.initialize({countryCode: "GB"});
12	AfterPay.open();
13	// If you don't already have a checkout token at this point, you can
14	// AJAX to your backend to retrieve one here. The spinning animation
15	// will continue until `AfterPay.transfer` is called.
16	AfterPay.onComplete = function(event) {
17	if (event.data.status == "SUCCESS") {
18	// The consumer confirmed the payment schedule.
19	// The token is now ready to be captured from your server backend.
20	} else {
21	// The consumer cancelled the payment or closed the popup window.
22	}
23	}
24	AfterPay.transfer({token: "YOUR_TOKEN"});
25	});
26	</script>
27	</body>
28	</html>