Skip to main content

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.

checkout 2.4 step 1
checkout 2.1

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;
        let body = document.getElementsByTagName('body')[0];
        body.innerHTML +=
            `<div class="ppg-checkout-modal ppg-show" id="ppg-checkout-modal">
                <div class="ppg-btn-close" id="ppg-btn-close" onclick="hideCheckout(event)">
                    <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDQzLjYgMzg3LjEgMzEyLjQgMjU1LjRsMTMxLjUtMTMwYzUuNC01LjQgNS40LTE0LjIgMC0xOS42bC0zNy40LTM3LjZjLTIuNi0yLjYtNi4xLTQtOS44LTQtMy43IDAtNy4yIDEuNS05LjggNEwyNTYgMTk3LjggMTI0LjkgNjguM2MtMi42LTIuNi02LjEtNC05LjgtNC0zLjcgMC03LjIgMS41LTkuOCA0TDY4IDEwNS45Yy01LjQgNS40LTUuNCAxNC4yIDAgMTkuNmwxMzEuNSAxMzBMNjguNCAzODcuMWMtMi42IDIuNi00LjEgNi4xLTQuMSA5LjggMCAzLjcgMS40IDcuMiA0LjEgOS44bDM3LjQgMzcuNmMyLjcgMi43IDYuMiA0LjEgOS44IDQuMSAzLjUgMCA3LjEtMS4zIDkuOC00LjFMMjU2IDMxMy4xbDEzMC43IDEzMS4xYzIuNyAyLjcgNi4yIDQuMSA5LjggNC4xIDMuNSAwIDcuMS0xLjMgOS44LTQuMWwzNy40LTM3LjZjMi42LTIuNiA0LjEtNi4xIDQuMS05LjgtLjEtMy42LTEuNi03LjEtNC4yLTkuN3oiIGZpbGw9IiNmZmZmZmYiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==" >
                </div>
                <div class="ppg-loader"></div>
                <iframe class="ppg-iframe" id="ppg-iframe" src="${checkoutUrl}" frameborder="0"></iframe>
            </div>`;

        document.getElementById('ppg-iframe').onload = function(){
            document.getElementsByClassName('ppg-loader')[0].remove();
            document.getElementById('ppg-btn-close').classList.add('ppg-show');
        };
    }
    function hideCheckout(event){
        event.preventDefault();
        document.getElementById('ppg-checkout-modal').remove();
    }
</script>

  1. 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>

  1. 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.