This page provides instructions to make your dynamic checkout link load in a modal window on your website. This keeps customers on your website while still taking advantage of all the benefits of Hosted Checkout.

Prerequisites

Follow the Dynamic Link Method guide to create and configure a dynamic Hosted Checkout profile.

Integrate

Follow these steps to have your dynamic checkout link load as a modal window on your site:

1. Include Maast's hosted JavaScript and CSS libraries in your html. See the following code sample:

<link rel="stylesheet" type="text/css" href="https://app.qualpay.com/hosted/checkout/css/qp-checkout.css">;
<script src="https://app.qualpay.com/hosted/checkout/js/qp-checkout-sdk.min.js"></script>;

2. Define a div container that can host the checkout modal. Set an ID for the container. See the following code sample:

<div id="qp-checkout"></div>;

3. Use the qpCheckout.loadFrame function from Maast's SDK library to load the modal into your page with configurationParam as a JSON object containing the configuration parameters required to set up the checkout modal. See the following code sample:

qpCheckoutForm.loadFrame(configurationParams);

4. A unique checkout_url will be generated when the page loads. Call the function qpCheckoutForm.openModal(); to open the link on the modal.

5. You can adjust modal height and width by overriding the following styling from qp-checkout.css:

@media (min-width: 50em) {
    .qp-modal-content{
        width:45%;
        height: 75vh;
    }
}

Test and Go Live

See our Test and Go Live guide to test your integration and start transacting with an active production account.