SDK Integration Steps

Steps to Integrate Web Application with JavaScript SDK.

Step-1: Include JS and CSS file in header section.

<head> <title>UAEPS & AdhaarpaySDK</title>  <script type='text/javascript' src='isuSDK.min.js'></script> <link rel="stylesheet" href='isuSDK.min.css'> </head>

Step-2: Client Id, Client Secret, Client Ref Id, apiusername, pagename, isreceipt variables to be initialized and callbackurl is to call the values.

var clientid = document.getElementById("clientid").value; var clientsecret = document.getElementById("clientsecret").value; var apiusername = document.getElementById("apiusername").value; var clientrefid = document.getElementById("clientrefid").value; var pagename = document.getElementById("pagename").value; var isreceipt = document.getElementById("isreceipt").value ? document.getElementById("isreceipt").value : "true"; var callbackurl = document.getElementById("callbackurl").value ? document.getElementById("callbackurl").value : ""; var cd_amount = document.getElementById("cd_amount").value ? document.getElementById("cd_amount").value : ""; NOTE: 1. 'pagename' should be "CASH_WITHDRAWAL", "MINI_STATEMENT", "BALANCE_ENQUIRY","CASH_DEPOSIT", and "ADHAAR_PAY". 2. 'isreceipt' value should be "true", "false" ( if 'isreceipt’ value is true, ,then you will use our sdk generated receipt else, you will create your own receipt with the data which posted to your calback url.) 3. If the page name is "CASH_DEPOSIT" then the value of "cd_amount" will be pass.

Step-3:Enable location on your browser.

watchLocation(); function watchLocation(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position)=>{ this.positionNew=position.coords; }, error=>{ if(error.code===1){ this.locationAlerts(false,error.message); } elseif(error.code===2){ } } ); } else{ this.locationAlerts(true,'');} } function locationAlerts(type,msg){ let alertHtml = type; if (alertHtml){ } else{ alert(msg); window.location.href="error.html"; } }

Step-4:Finally initialize SDK.

isuSDK("#uaeps").open({ closeButton: true, title: "<img src='logo.png' width='' height='' alt='UAEPS & Adhaarpay'>", className: "zoom-and-spin", clientId: clientid, clientSecret: clientsecret, clientRefId: clientrefid, inputParam: apiusername, pagename: pagename, isreceipt: isreceipt, callbackurl: callbackurl, paramA: "", paramB: "", paramC: "" });

Step-5:This is to be added in the page in-order to return back to the initial page after a transaction and perform different transactions according to your requirements.

window.addEventListener("message", function (event) { if (event.data === "transactionCpmpleted") { const ele = document.getElementsByClassName('isuSDK-overlay'); const ele2 = document.getElementsByClassName('zoom-and-spin'); // const ele3 = document.getElementsByClassName('isuSDK-open'); const ele4 = document.getElementsByClassName('isuSDK-modal'); ele[0].remove(); ele2[0].remove(); // ele3[0].remove(); ele4[0].remove(); } });

NOTE: The above content for integration are available in index.html page i.e. the zip file shared with you. And clientrefid value should be unique for each transaction.

Pass the client id and client secret into the script with the property name along with the other options.

client_id = "";
client_secret = "";
client_ref_id = '1234';
API user_name = 'isutest';
(NOTE: Change the values as per your data)

Note: The above mentioned client_id and client_secret has to be provided for effective usage.

Sample data are passed through code.

var client_id = "";
var client_secret = "";
var client_ref_id = '1234';
var user_name = 'isutest';
isuSDK("#aeps").open ({ closeButton: true, title: "UAEPS SDK", className: "zoom-and-spin", client_id: client_id, client_secret: client_secret, client_ref_id: client_ref_id, user_name: user_name, paramA: "", paramB: "", paramC: "" });
function refresh()
{
window.location.reload(true);
}

Note: Add script tag in the above code.