Create a checkout

There are three steps to create an Afterpay checkout:

Call Get Configuration to retrieve your order limits
Call Create Checkout to generate a checkout token
Launch the Afterpay checkout flow using a redirect or a popup window

Action	Endpoint	Purpose
Get Configuration	`/v2/platform/configuration`	Retrieve Afterpay order limits (min/max values).
Create Checkout	`/v2/checkouts`	Provide order details and generate a checkout token.

Retrieve your order limits

Call the Get Configuration endpoint to retrieve your minimum and maximum Afterpay order amounts.

We recommend calling this endpoint once a day as part of a scheduled background process, and storing the minimumAmount and maximumAmount values on your server.

Use these values to determine:

The correct Afterpay Messaging to show on the Product Detail pages
Whether Afterpay should be presented as an available payment method

A request to create a checkout will be declined if the order grand total is less than the minimum or more than the maximum Afterpay amount. To change your minimum and maximum order values, contact Afterpay.

Create a checkout

Call the Create Checkout endpoint to communicate the order details to Afterpay. Your request should include:

Customer information
Order details
Order total
Shipping details
Redirect URLs

Afterpay uses the order total value to calculate the installment plan and to assist with the customer’s pre-approval process.

Afterpay responds with a token used to identify this checkout. For example, 002.5lmerr3k945d00c7htvcrdff83q36kp10a247m212fjpa5ju. This token is used to launch the Afterpay checkout flow using Afterpay.js.

Afterpay.js

Environment	URL
Sandbox	`https://portal.sandbox.afterpay.com/afterpay.js`
Production	`https://portal.afterpay.com/afterpay.js`

Set up your checkout experience

As part of your integration, decide how customers will complete the Afterpay checkout flow. There are two options:

Redirect method: Customers are redirected from your website to Afterpay to complete their payment. At the end of the Afterpay checkout flow, the customer is redirected back to your website. Most merchants use this method.
Popup method: The Afterpay checkout flow opens in a popup window on top of your site. For windowed applications, your website is dimmed with a semi-transparent overlay. For full-screen applications (such as mobile interfaces), the flow opens in a new tab. At the end of the Afterpay checkout flow, the popup closes.

Implement the redirect method

To use the redirect method, call the following two JavaScript functions, in order:

AfterPay.initialize: Prepares the Afterpay JavaScript to start the Afterpay screenflow in the appropriate geographical region.
- Accepts an object with a required countryCode (the two-character ISO 3166-1 country code of the merchant account)
AfterPay.redirect: Redirects the customer’s browser from your website to Afterpay.
- Accepts an object with a required token (the checkout token returned by the Create Checkout API call)

1 <html>
2 <head>
3  <script onload="initAfterPay()" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
4 </head>
5 <body>
6  <p>Your HTML here</p>
7  <script>
8  function initAfterPay () {
9    AfterPay.initialize({countryCode: "AU"});
10    AfterPay.redirect({token: "YOUR_TOKEN"});
11  }
12  </script>
13 </body>
14 </html>

If the customer successfully completes the checkout flow, they’re returned to your redirectConfirmUrl with a checkout token and a SUCCESS status appended as HTTP query parameters: www.merchant-example.com/confirm?&status=SUCCESS&orderToken=002.5lmerr3k945d00c7htvcrdff83q36kp10a247m212fjpa5ju

If the customer cancels the checkout, they’re returned to your redirectCancelUrl with a checkout token and a CANCELLED status appended as HTTP query parameters: www.merchant-example.com/confirm?&status=CANCELLED&orderToken=002.5lmerr3k945d00c7htvcrdff83q36kp10a247m212fjpa5ju

Recommendation

Try using your Sandbox merchant credentials to get a token from Create Checkout. Use this token to test the Cash App Afterpay screenflow on JSFiddle: https://jsfiddle.net/afterpay/cyd3pxfj/

Note that the login and redirect features won’t work, because JSFiddle loads the Afterpay screenflow inside a frameset.

To use the popup method, call the following JavaScript functions, in order:

AfterPay.initialize: Prepares the Afterpay JavaScript to start the Afterpay screenflow in the appropriate geographical region.
AfterPay.open: Opens the Afterpay popup window, launching the checkout flow for the customer.
AfterPay.onComplete: Defines a callback function. It checks whether the customer successfully completes the checkout flow and handles successful payments and cancellations.
AfterPay.transfer: Sends the checkout token to Afterpay, finalizing the payment process.

When a customer’s payment is complete, Afterpay uses postMessage to call a JavaScript method on your front end system.

The popup method doesn’t redirect customers to the redirectConfirmUrl or redirectCancelUrl, but these fields are still required for the Create Checkout call. These fields are used for context on postMessage.

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

If the customer successfully completes the checkout flow, Afterpay calls the onComplete method on your website. Afterpay passes the checkout token and a SUCCESS status as properties of a data object. The popup closes.

If the customer cancels the checkout, Afterpay calls the onComplete method on your website. Afterpay passes the checkout token and a CANCELLED status as properties of a data object. The popup closes.

At the end of the checkout flow, if the protocol, host, and port of the opening window don’t match those provided in Create Checkout, the customer’s browser won’t dispatch the JavaScript event for security reasons.

Afterpay checkout screen

There are three steps to create an Afterpay checkout:

Call Get Configuration to retrieve your order limits
Call Create Checkout to generate a checkout token
Launch the Afterpay checkout flow using a redirect or a popup window

Action	Endpoint	Purpose
Get Configuration	`/v2/platform/configuration`	Retrieve Afterpay order limits (min/max values).
Create Checkout	`/v2/checkouts`	Provide order details and generate a checkout token.

Retrieve your order limits

Call the Get Configuration endpoint to retrieve your minimum and maximum Afterpay order amounts.

We recommend calling this endpoint once a day as part of a scheduled background process, and storing the minimumAmount and maximumAmount values on your server.

Use these values to determine:

The correct Afterpay Messaging to show on the Product Detail pages
Whether Afterpay should be presented as an available payment method

Create a checkout

Call the Create Checkout endpoint to communicate the order details to Afterpay. Your request should include:

Customer information
Order details
Order total
Shipping details
Redirect URLs

Afterpay uses the order total value to calculate the installment plan and to assist with the customer’s pre-approval process.

Afterpay.js

Environment	URL
Sandbox	`https://portal.sandbox.afterpay.com/afterpay.js`
Production	`https://portal.afterpay.com/afterpay.js`

Set up your checkout experience

As part of your integration, decide how customers will complete the Afterpay checkout flow. There are two options:

Redirect method: Customers are redirected from your website to Afterpay to complete their payment. At the end of the Afterpay checkout flow, the customer is redirected back to your website. Most merchants use this method.
Popup method: The Afterpay checkout flow opens in a popup window on top of your site. For windowed applications, your website is dimmed with a semi-transparent overlay. For full-screen applications (such as mobile interfaces), the flow opens in a new tab. At the end of the Afterpay checkout flow, the popup closes.

Implement the redirect method

To use the redirect method, call the following two JavaScript functions, in order:

AfterPay.initialize: Prepares the Afterpay JavaScript to start the Afterpay screenflow in the appropriate geographical region.
- Accepts an object with a required countryCode (the two-character ISO 3166-1 country code of the merchant account)
AfterPay.redirect: Redirects the customer’s browser from your website to Afterpay.
- Accepts an object with a required token (the checkout token returned by the Create Checkout API call)

1 <html>
2 <head>
3  <script onload="initAfterPay()" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
4 </head>
5 <body>
6  <p>Your HTML here</p>
7  <script>
8  function initAfterPay () {
9    AfterPay.initialize({countryCode: "AU"});
10    AfterPay.redirect({token: "YOUR_TOKEN"});
11  }
12  </script>
13 </body>
14 </html>

Recommendation

Try using your Sandbox merchant credentials to get a token from Create Checkout. Use this token to test the Cash App Afterpay screenflow on JSFiddle: https://jsfiddle.net/afterpay/cyd3pxfj/

Note that the login and redirect features won’t work, because JSFiddle loads the Afterpay screenflow inside a frameset.

To use the popup method, call the following JavaScript functions, in order:

AfterPay.initialize: Prepares the Afterpay JavaScript to start the Afterpay screenflow in the appropriate geographical region.
AfterPay.open: Opens the Afterpay popup window, launching the checkout flow for the customer.
AfterPay.onComplete: Defines a callback function. It checks whether the customer successfully completes the checkout flow and handles successful payments and cancellations.
AfterPay.transfer: Sends the checkout token to Afterpay, finalizing the payment process.

When a customer’s payment is complete, Afterpay uses postMessage to call a JavaScript method on your front end system.

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

Afterpay checkout screen

1	<html>
2	<head>
3	<script onload="initAfterPay()" src="https://portal.sandbox.afterpay.com/afterpay.js"></script>
4	</head>
5	<body>
6	<p>Your HTML here</p>
7	<script>
8	function initAfterPay () {
9	AfterPay.initialize({countryCode: "AU"});
10	AfterPay.redirect({token: "YOUR_TOKEN"});
11	}
12	</script>
13	</body>
14	</html>

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

Retrieve your order limits

Create a checkout

Afterpay.js

Set up your checkout experience

Implement the redirect method

Recommendation

Implement the popup method

Retrieve your order limits

Create a checkout

Afterpay.js

Set up your checkout experience

Implement the redirect method

Recommendation

Implement the popup method