Developer Documentation
Developer Documentation
Home
Zip

Lightbox Checkout

The lightbox checkout allows a more seamless experience at the checkout stage. Rather than a customer being redirected to Zip, it allows the Zip checkout process to be loaded in a lightbox within the merchant site.

Below is an example of a Zip checkout being loaded into a lightbox:

Mobile Devices

NB: Mobile devices are not supported for this experience, given the limited screen size, but the lightbox code will detect the device used, and will redirect users who are on a mobile device.

Script

There are 2 options to load the script onto the page, either by adding a <script> element to their checkout page <head>, OR dynamically add the script element when the CHECKOUT button has been clicked:

Example <script> head tag
<head>
   <script async src="https://zip.co/nz/customer/assets/sandbox/partpay-sandbox-v1.js"></script>
</head>
Example dynamically loading script:
function appendSandboxScript() {
    var el = document.createElement("script");
    el.setAttribute("src", "https://zip.co/nz/customer/assets/sandbox/partpay-sandbox-v1.js");
    document.getElementsByTagName("head")[0].appendChild(el);
}

Use

  1. Merchant should POST to the Create Order endpoint, to create an order.
  2. The response will include the token to be used with the checkout process.
  3. When the customer clicks the CHECKOUT button activate the PartPay checkout with the PartPay javascript object:
Launch lightbox checkout
// CHECKOUT button clicked.
// Initiate the partpay checkout.
PartPay.checkout({
    orderToken: token, // <--- token is the returned when creating an order.
    success: function () {
        // TODO: Handle a successful checkout.
        alert("Success");
    },
    cancel: function () {
        // TODO: Handle a cancelled checkout.
        alert("Cancelled");
    }
});