Pop-up Checkout Overview

PayPro Global's pop-up checkout is an iframe displayed over your website when the payment page is triggered. The background can differ based on your preferences (blurred, transparent, static page, etc.) We have several layouts, and as with all our checkouts, they can also be customized (e.g. with your product's logo, button style, font, and brand color) to optimize user experience for maximum conversion.

Opening an Iframe in a Pop-up

Below you can find the sample code snippet of how to integrate a checkout page in a pop-up. It will work if your account has an iframe or pop-up type checkout page created.

1. Paste the javascript code at the bottom of the page:

<script>
    function showCheckout(event) {
        event.preventDefault();

        let checkoutUrl = event.target.attributes.href.value;

        // Create the modal structure
        const modal = document.createElement("div");
        modal.classList.add("ppg-checkout-modal", "ppg-show");
        modal.id = "ppg-checkout-modal";

        // Create the close button inside the modal
        const closeButton = document.createElement("div");
        closeButton.classList.add("ppg-btn-close");
        closeButton.id = "ppg-btn-close";
        closeButton.addEventListener("click", hideCheckout);

        // Add the close button icon
        const closeIcon = document.createElement("img");
        closeIcon.src = "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDQzLjYgMzg3LjEgMzEyLjQgMjU1LjRsMTMxLjUtMTMwYzUuNC01LjQgNS40LTE0LjIgMC0xOS42bC0zNy40LTM3LjZjLTIuNi0yLjYtNi4xLTQtOS44LTQtMy43IDAtNy4yIDEuNS05LjggNEwyNTYgMTk3LjggMTI0LjkgNjguM2MtMi42LTIuNi02LjEtNC05LjgtNC0zLjcgMC03LjIgMS41LTkuOCA0TDY4IDEwNS45Yy01LjQgNS40LTUuNCAxNC4yIDAgMTkuNmwxMzEuNSAxMzBMNjguNCAzODcuMWMtMi42IDIuNi00LjEgNi4xLTQuMSA5LjggMCAzLjcgMS40IDcuMiA0LjEgOS44bDM3LjQgMzcuNmMyLjcgMi43IDYuMiA0LjEgOS44IDQuMSAzLjUgMCA3LjEtMS4zIDkuOC00LjFMMjU2IDMxMy4xbDEzMC43IDEzMS4xYzIuNyAyLjcgNi4yIDQuMSA5LjggNC4xIDMuNSAwIDcuMS0xLjMgOS44LTQuMWwzNy40LTM3LjZjMi42LTIuNiA0LjEtNi4xIDQuMS05LjgtLjEtMy42LTEuNi03LjEtNC4yLTkuN3oiIGZpbGw9IiNmZmZmZmYiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==";
        closeButton.appendChild(closeIcon);

        // Create a loader element
        const loader = document.createElement("div");
        loader.classList.add("ppg-loader");

        // Create the iframe element
        const iframe = document.createElement("iframe");
        iframe.classList.add("ppg-iframe");
        iframe.id = "ppg-iframe";
        iframe.src = checkoutUrl;
        iframe.frameBorder = "0";

        // Append the close button, loader, and iframe to the modal
        modal.appendChild(closeButton);
        modal.appendChild(loader);
        modal.appendChild(iframe);

        // Append the modal to the body
        document.body.appendChild(modal);

        // When the iframe is loaded, remove the loader and show the close button
        iframe.onload = function () {
            loader.remove();
            closeButton.classList.add("ppg-show");
        };
    }
    
    function hideCheckout(event){
        event.preventDefault();
        document.getElementById('ppg-checkout-modal').remove();
    }
</script>

2. Use the button code like in this example:

<a class="ppg-buy-now-btn" href="https://store.payproglobal.com/checkout?products[1][id]=ID&page-template=ID" onclick="showCheckout(event)">Buy now</a>

3. Use the css code like in this example:

<style>
    .ppg-buy-now-btn{
        display: inline-block;
        background: #19cb92;
        border-radius: 29px;
        color: #fff;
        padding: 14px 42px;
        margin: 10px;
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
    }
    .ppg-checkout-modal{
        z-index: 99999;
        display: none;
        background-color: transparent;
        border: 0px none transparent;
        visibility: visible;
        margin: 0px;
        padding: 0px;
        -webkit-tap-highlight-color: transparent;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    .ppg-checkout-modal.ppg-show{
        display: block;
    }
    .ppg-btn-close{
        position: absolute;
        display: none;
        align-items: center;
        justify-content: center;
        top: 20px;
        right: 35px;
        background: rgb(0 0 0 / 35%);
        height: 50px;
        width: 50px;
        border: none;
        outline: none;
        cursor: pointer;
    }
    .ppg-btn-close.ppg-show{
        display: flex;
    }
    .ppg-btn-close img{
        width: 24px;
    }
    .ppg-iframe{
        width: 100%;
        height: 100%;
        border: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .ppg-loader {
        position: absolute;
        top: calc(50% - 24px);
        left: calc(50% - 24px);
        width: 48px;
        height: 48px;
        border: 5px solid #000;
        border-bottom-color: transparent;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: ppg-rotation 1s linear infinite;
    }

    @keyframes ppg-rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } 
</style>

note

For security purposes, it is required to add an additional URL parameter to open PayPro Global checkout page (type: iframe or pop-up) inside the frame on your end. Please contact our team at [email protected] to get it.