Payment page embedded in your website

You have the option to display the payment page in an IFrame embedded in your website.

When you initiate a payment you can use the RedirectInIFrame parameter. If the RedirectInIFrame parameter is set to true, the payment page will be showed in an Iframe.

Fill in the form below and click the button to see our payment page in action:


In centimes (eg. 1000 = 10.00)

You need to perform the following steps:

  1. Log in to Merchant dashboard and create a skin with “Compact iframe” payment page layout. Go to User Interface Configuration from GlobalPay Merchant Dashboard for instructions on how to achieve this. Write down the SkinID – you will need it in the next step.
  2. Initiate a payment using the SkinID from step 1.
  3. Include the following scripts in your HTML page:

    Test environment: https://apitest.smart2pay.com/Scripts/Merchant/globalpay.embedded.1.0.js

    Production environment: https://api.smart2pay.com/Scripts/Merchant/globalpay.embedded.1.0.js

    *jQuery library should already be included in your page; we recommend version 1.7.2 or above

  4. On “Pay” button click, call the function renderGlobalPay(redirectURL, iframeContainer)

Where:

  • redirectURL is taken from the response at step 2
  • iframeContainer is a container (e.g. div) in your page where we will create the GlobalPay iframe as a child. The container in your page must have an ‘auto’ height (the default behavior).

Sample HTML page:

<!DOCTYPE html>
<html>

<head> 
    <script src="https://apitest.smart2pay.com/Scripts/Merchant/globalpay.embeded.1.0.js"></script> 
</head> 

<body> 

    Your page goes here! 

    <div id="globalPayContainer" style="height:auto;"></div>
    <script> 
        //render GlobalPay lightbox on your “Pay" button 
        renderGlobalPay('https://apitest.smart2pay.com/Home?PaymentToken=C7A2B2DD16F455A897BA8469AC1776B7.1582348',’ globalPayContainer’) 
    </script>
</body> 

</html>