Deferred Shipping

In the Deferred Shipping flow, the customer returns to the merchant's checkout to
finalise their delivery options, and complete their order.

Follow the steps below to set up the button for Deferred Shipping which includes:

Create an order token for redirect
The use of the initializeForRedirect method
Redirecting the customer to finalise the order

Create an Clearpay order token

To create the order token for a redirect flow:

See the normal information in the Create Order (V1) or Create Checkout (V2) pages, depending on which version of the API you use. The only difference is that you must include mode to be set as express.

--request POST \
  --url https://api-sandbox.afterpay.com/v2/checkouts \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --data '{"amount":{"amount":"10.00", “currency”: “AUD”}, “mode”: “express”, "merchant":{"redirectConfirmUrl":"https://example.com/checkout/confirm", "redirectCancelUrl":"https://example.com/checkout/cancel"}}'

Redirect Checkout with afterpay.js

With a popup, you need to:

Create the Clearpay Express Checkout Button
Add an Express Checkout Entry Point.
Load afterpay.js script on your site. See below.

Load afterpay.js

To launch the Clearpay Express Checkout process you must include the afterpay.js script on your site.

You must also set the onload attribute to point to your own function (e.g. initClearpay) where you will initialise the popup.

For example, loading the sandbox afterpay.js script:

<script src="https://portal.sandbox.afterpay.com/afterpay.js" async onload="initClearpay()">
    </script>

Do the following:

Inside your own onload function (i.e. initClearpay), use Afterpay.js to initialise the
- popup window by invoking initializeForPopup (Integrated Shipping)
- The redirect flow by invoking initializeForRedirect (Deferred Shipping)

Then set the following properties:

Set countryCode to the two-character ISO 3166-1 country code of the merchant account.
Set the addressMode to one of the provided address mode constants. For Deferred Shipping, select an option that does not contain shipping options.
Set target to the ID (or class) assigned to your button that triggers the checkout process.
Handle lifecycle events:onCommenceCheckout: This is where the retrieval of the Clearpay token from your server occurs. Once the token is retrieved, call actions.resolve(TOKEN) to start the checkout process

<html>
  <head>
    <script>
      // ensure this function is defined before loading afterpay.js
      function initAfterpay () {
        AfterPay.initializeForRedirect({
          countryCode: 'AU',
          onCommenceCheckout: function(actions) {
            /* retrieve afterpay token from your server */
            /* then call `actions.resolve(token)` */
          },
          target: '#afterpay-express-button',
          addressMode: AfterPay.ADDRESS_MODES.ADDRESS_WITHOUT_SHIPPING_OPTIONS,
        })
      }
    </script>
   <script src="https://portal.sandbox.afterpay.com/afterpay.js" async onload="initAfterpay()">
   </script>
  </head>
  <body>
    <button id="afterpay-express-button" 
    data-afterpay-entry-point="mini-cart"
    data-afterpay-checkout-button-label="Checkout using Clearpay Express">
      Checkout using Clearpay Express
    </button>
  </body>
</html>

Finalising an order for Deferred Shipping

Previously when the Afterpay order token was created you would have defined the properties redirectConfirmUrl and redirectCancelUrl in the merchant.

When the customer completes the Clearpay Express checkout, these properties are used to direct the customer back to the specified URL. This specified URL depends on the outcome of the checkout. So, if the customer completes the Clearpay checkout window, they are redirected to the redirectConfirmUrl after confirmation. But if the checkout is cancelled, the customer is redirected to the redirectCancelUrl.

Once the customer has successfully returned back to your site, You should:

Use the Clearpay order details to prefill your checkout.
Allow the customer to select a delivery method and make any other actions that you want the customer to do. For example, enter a promotion code.
Display the Clearpay checkout widget on the final review page before the customer finalizes the order.

🚧
Important
The Clearpay checkout widget is mandatory for Deferred Shipping.

Create an Clearpay order token

Redirect Checkout with afterpay.js

Load afterpay.js

Finalising an order for Deferred Shipping

🚧Important

🚧
Important