Lightbox Checkout

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

Below is an example of a PartPay 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 src="https://checkout.partpay.co.nz/assets/sandbox/partpay-sandbox-v1.js"></script>
</head>

Example dynamically loading script:

function appendSandboxScript() {
    var el = document.createElement("script");
    el.setAttribute("src", "https://checkout.partpay.co.nz/assets/sandbox/partpay-sandbox-v1.js");
    document.getElementsByTagName("head")[0].appendChild(el);
}

Use

Merchant should POST to https://checkout.partpay.co.nz/order as stipulated in the Create Order endpoint, to create an order.
The response will include the token to be used with the checkout process.
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");
    }
});