Payment iFrame

If you want to have full flexibility for the screen design of your checkout pages but want to avoid handling sensitive payment information such as credit card numbers, you can use a hosted form for the required input fields and insert that form in an iFrame on your website. The data that your customer enters to that form will be directly sent to our Gateway.

iFrame-option

Required Fields

In addition to the fields that are mandatory for every payment request that you initiate through a HTML form, the following fields are required for the iFrame integration:

Field    Comment
checkoutoption   For the iFrame integration, set the value for this parameter to simpleform 
hostURI  

Provide the URI where the Gateway can send back the message with Windows.postMessage() API available in HTML 5 enabled browsers, e.g.https://www.yoursite.com/checkout

 

Optional Fields

Field    Comment
paymentMethod   For this type of integration, we recommend you let your customers choose the payment method on your page and submit the payment method in the request. See valid values for this parameter here.
hexColorCode  

This field allows you to customize the colors of buttons within the iFrame. If you e.g. send the value #9c22ce, the color of buttons will be violet.

> See further option fields for the HTML form
> See how to tokenize the entered card details for future use

 

iFrame Size

  • Minimum height 900px
  • Minimum width 406px

 

Sample Code for the HTML Form

<form method="post" action="https://test.ipg-online.com/connect/gateway/processing">
 <input type="hidden" name="checkoutoption“ value=“simpleform“>
 <input type="hidden" name="hostURI“ value=“https://www.yourstorename.com/.../.../“>
 <input type="hidden" name="txntype" value="preauth">
 <input type="hidden" name="paymentMethod" value="M">
 <input type="hidden" name="timezone" value="Europe/Berlin"/>
   <input type="hidden" name="txndatetime" value="<?php echo getDateTime() ?>">
   <input type="hidden" name="hash_algorithm" value="SHA256"/>
   <input type="hidden" name="hash" value="<?php echo createHash( "13.00","978" ) ?>">
 <input type="hidden" name="storename" value="10123456789">
 <input type="hidden" name="chargetotal" value="13.00">
 <input type="hidden" name="currency" value="978">
 <input type="submit" value="Submit">
</form>

 

    JSP Example

    <div id="embeddableConnect"> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tbody> 
    <tr> 
    <iframe name="myFrame" id="myFrame" src="#" width="460px" height="900px" style="border: none;">
    Your browser does not support inline frames. 
    </iframe> 
    </tr> 
    </tbody> 
    </table> 
    </div> 
    

     

    JavaScript Changes

    You need to register a method e.g. 'receiveMessage' with the listener like

    <script>
     $(document).ready(function(){
    window.addEventListener("message", receiveMessage, false);
    checkoutForm.submit();
    });
    function receiveMessage(event)
    {
      var connectForm = event.source.document.forms[0];
      forwardForm(event.data,connectForm);
    }
    function forwardForm(redirectURL, connectForm) {
                        var newForm = document.createElement("form");
                        newForm.setAttribute('method',"post");
                        newForm.setAttribute('action',redirectURL);
                        newForm.setAttribute('id',"newForm");
                        newForm.setAttribute('name',"newForm");
                        document.body.appendChild(newForm);
                        for(j=0 ; j<connectForm.elements.length; j++){
                                             var element = connectForm.elements[j];
                                             var input = document.createElement("input");
                                             input.setAttribute("type", "hidden");
                                             input.setAttribute("name", element.name);
                                             input.setAttribute("value", element.value);
                                             document.newForm.appendChild(input);
                        }
                        document.newForm.submit();
    }
    </script>

     

    Browser Support

    This integration option requires HTML5 enabled browsers (all modern browsers incl. Google Chrome, Chromium, Firefox, Opera, Microsoft Edge and Apple Safari).