View API Keys

Notifications 0 Notification

No Notification

API

API INTEGRATION DOCUMENT

PURPOSE

Purpose #

India Online Pay enables you to use an API so that you can easily embed payment pages into your website. This kind of integration allows the buyer to proceed to the payment page without leaving the purchase tunnel. This document presents the technical aspects of the API mode. It should be noted that it does not replace the Hosted Payment Page Implementation guide. Using the API mode requires the merchant’s website to use the HTTPS protocol on all of its pages. iFrame based integration offers the easiest path to PCI Compliance. Since iFrame is as good as a separate browser window, your website is completely shielded away from releasing any sensitive card information.

PROCESS WORKFLOW

Declaring an Iframe #

  • Create an HTMLiframe tag on the page where you would like to display the payment page (this page should correspond to the ‘Payment’ stage of your purchase journey).
  • Use the name attribute to give a name to your iframe. This name will be used in the payment form to specify within, which item the form will be displayed.
  • Populate the src attribute with your payment form URL.
  • Define the size of the iframe by using the width and height attributes.
  • Use the scrolling attribute of the iframe tag to delete borders and scrollbars.
  • An Example is listed as follows:<iframe name="nameFrame" src="payment_form.php" width="600" height="550" scrolling="no">

Displaying the payment form in the iframe #

This section enlists step by step procedure involved in displaying the payment form in the iFrame.
  • Modify your form by using the target attribute of your <form>tag
  • Populate it with the name of your iframe <form method="POST" action="https://indiaonlinepay.com/" target="nameFrame"> ... </form>

Detailed view on How IOP iframes function? #

Merchant will call the below URL to post his data:
  • Production URL – https://indiaonlinepay.com/merchantcheckout/
  • UAT URL = https://indiaonlinepay.com/merchantcheckout/
    • <script type="text/javascript" src="https://indiaonlinepay.com/merchantcheckout/js/zipcodehelp.js"></script>
    <input type="button" value="submit" onclick="displayIframe()">
    This code is light-weight and it will enable all your fields to be securely hosted on IOP through which the redirection continued to be seamless.

The look and feel of IOP iframes #

  • It enables customization since bulk of the styling happens on the container that lives on your page which means if your input requires a blue border, you can give your container a blue border. Here, the hosted fields does not needs to get involved.
  • IOP provides functionality for you to style invalid, valid, and focused states.
  • There are some styles that can't be applied to the container via CSS alone. These include mostly font-related properties including size, family, and color. However; IOP does enables you to send in these styles when initializing Hosted Fields.

Function used for Iframe display #

function displayIframe () {

     var fname = document.getElementById("firstName").value;

     var lname = document.getElementById("lastName").value;

     var mno = document.getElementById("phoneNumber").value;

     var email = document.getElementById("email").value;

     var ad1 = document.getElementById("addressLine1").value;

     var city = document.getElementById("city").value;

     var pcode = document.getElementById("postalCode").value;

     var state = document.getElementById("state").value;

     var country = document.getElementById("country").value;

}

The Redirection URL #

document.getElementById("iframeDisplay").innerHTML = "<iframe name='myiframe' src='https://indiaonlinepay.com/merchantcheckout/getmerchantcheckout?mId=HuLjNJIUUfI=RkZGRlZSVU1XTFBNTVdIWg==&sType=cMund8zvWyI=MQ==&pId=5JVJGNFLjOU=UEwyMDAxMzAyMA==&fName=" + fname + "&lName=" + lname + "&mNo=" + mno + "&email=" + email + "&add1=" + ad1 + "&city=" + city + "&pCode=" + pcode + "&state=" + state + "&country=" + country + "' height='1300' width='1080' frameborder='0' scrolling='no' align='middle'>";

Request parameters are listed below :

  • mId="Merchant Identifier(Encrypted)"
  • sType="Service type = 1(Encrypted)"
  • fName="First name"
  • lName="Last Name"
  • mNo="Mobile number"
  • email="Email"
  • add1="Address"
  • city="City"
  • pCode="Pincode"
  • state="State"
  • country="Country"
IOP has set out to build Hosted Fields by following a guiding set of principle. These include focus on the API, minimize our footprint, preserve developer control, and, above all, maintain PCIDSS compliance. This module reflects these foundations!