iVeri Lite Example in ASP.NET 2.0
<
—
<script>
liteboxInitialise('https://portal.iveri.net');
function liteboxComplete(data) {
post('https://examples.iveri.net/Lite/Result.asp', data);
}
// Create form post
function post(path, data, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
var jsonData = JSON.parse(data);
Object.keys(jsonData).forEach(function (key) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", jsonData[key]);
form.appendChild(hiddenField);
})
document.body.appendChild(form);
form.submit();
}
</script><!-- Create a User prompt that will appear when the swipe is needed. This can be any image, message etc -->
<div id="divSwipeUserPrompt" style="display: none; position: absolute; z-index: 14; width: 101%; height: 103%; ">
<div style="margin-left: 0px; position: absolute; left:-10px; top: -15px; width: 100%; height: 100%; text-align: center; background-color: black; opacity: 0.7; filter: alpha(opacity=70);"></div>
<div style="position: absolute; text-align: center; padding-top: 50px; z-index: 15; top: 80px; background-color: #ececec; left: 170px; width: 400px; height: 100px; border: 2px ridge black;">
<img src="../Img/NPaySmall.gif" alt="" style="position: relative; top: 10px;" />
<label id="labelNpayInstructions" style="font: 14px Dejavu Condensed; font-weight: bold; position: absolute; top: 10px; left: 50px;">Please Follow the instructions on the terminal...</label>
</div>
</div>
<div id="divContent" class="clsContent" align="center"><br />
<form name="Form1" method="post" action="https://portal.host.iveri.com/Lite/Authorise.aspx" id="Form1">
<table class="clsQuery" cellspacing="0" align="center" border="0">
<tr>
<td class="clsInformation" align="center" colspan="3">
<b>Confirm Your Details</b>
</td>
</tr>
<tr>
<tr>
<td class="clsQueryHeading" align="left" style ="borde-top: 1px solid black;" colspan="2">
Full Name:
</td>
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input type="Text" id="Lname" type="text" value="" />
<input type="hidden" name="Last name" id="Lname" />
</td>
</tr>
<tr>
<td class="clsQueryHeading" align="left" style ="borde-top: 1px solid black;" colspan="2">
Email:
</td>
<td class="clsQuery" align="left" colspan="2">
<input name="Ecom_BillTo_Online_Email" type="Text" value="" maxlength="50" id="Ecom_BillTo_Online_Email" class="" />
</td>
</tr>
<tr>
<td class="clsQueryHeading" align="left" style ="borde-top: 1px solid black;" colspan="2">
Address 1:
</td>
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input type="Text" id="Ad1" type="text" value="" />
<input type="hidden" name="address1" id="Ad1" />
</td>
</tr>
Address 2:
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input type="Text" id="Ad2" type="text" value="" />
<input type="hidden" name="address2" id="Ad2" />
</td>
</tr>
</td>
<td class="clsQuery" align="left" colspan="2">
<input type="text" readonly="readonly" class="clsInputReadOnlyText" name="Ecom_ShipTo_Postal_Street_Line2" id="Ecom_ShipTo_Postal_Street_Line2" value="" />
</td>
</tr>
<tr>
<td class="clsQueryHeading" align="left" style ="borde-top: 1px solid black;" colspan="2">
City:
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input type="Text" id="Cty" type="text" value="" />
<input type="hidden" name="city" id="Cty" />
</td>
</tr>
<tr>
<td class="clsQueryHeading" align="left" style ="borde-top: 1px solid black;" colspan="2">
Province:
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input type="Text" id="Prvc" type="text" value="" />
<input type="hidden" name="province" id="Prvc" />
</td>
</tr>
<tr>
<td class="clsQueryHeading" align="left" style ="borde-top: 1px solid black;" colspan="2">
Postal Code:
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input type="Text" id="Pcode" type="text" value="" />
<input type="hidden" name="postal" id="Pcode" />
</td>
</tr>
<tr>
<tr>
<td class="clsQueryHeading" align="left">
Merchant Reference:
</td>
<td class="clsQuery" align="left" style="border-bottom: 1px solid black;" colspan="2">
<input name="Ecom_ConsumerOrderID" readonly="readonly" type="text" value="AUTOGENERATE" maxlength="20" id="Ecom_ConsumerOrderID" class="clsInputReadOnlyText" />
<input type="hidden" name="Ecom_SchemaVersion" id="Ecom_SchemaVersion" />
<input type="hidden" name="Ecom_TransactionComplete" id="Ecom_TransactionComplete" value="false" />
<input type="hidden" name="Lite_Authorisation" id="Lite_Authorisation" value="false" />
<input type="hidden" name="Lite_Version" id="Lite_Version" value="2.0" />
<!-- Ecml end-->
</td>
</tr>
<tr>
<td class="clsInformation" colspan="3" style="padding: 5px;" align="center"><b>Line Items</b></td>
</tr>
<!-- <tr>
<td class="clsQueryHeading">Product Description</td>
<td class="clsQueryHeading">Quantity</td>
<td class="clsQueryHeading">Unit Cost</td>
</tr>
<tr>
<td class="clsQueryHeading">Product Description</td>
<td class="clsQueryHeading">Quantity</td>
<td class="clsQueryHeading">Unit Cost</td>
</tr> -->
<tr>
<td><input type="text" readonly="readonly" class="clsInputReadOnlyText" name="Lite_Order_LineItems_Product_1" id="Lite_Order_LineItems_Product_1" value="Item#1" /></td>
<td><input type="text" readonly="readonly" class="clsInputReadOnlyText" name="Lite_Order_LineItems_Quantity_1" id="Lite_Order_LineItems_Quantity_1" value="1" /></td>
<td><input type="text" readonly="readonly" class="clsInputReadOnlyText" name="Transaction_LineItems_Amount_1" id="Transaction_LineItems_Amount_1" value="10.00" /></td>
<input type="hidden" name="Lite_Order_LineItems_Amount_1" id="Lite_Order_LineItems_Amount_1" value="10.00" />
</tr>
<tr>
<td class="clsQueryHeading" align="left">
Amount:
</td>
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input name="Transaction_Amount" id="Transaction_Amount" type="text" value="00.00" onblur="javascript: updateForm();" onchange="javascript: updateForm();" maxlength="20" style="width: 75px;" class="clsInputText" />
<input type="hidden" name="Lite_Order_Amount" id="Lite_Order_Amount" />
</td>
</tr>
<tr>
<td class="clsQueryHeading" align="left">
Application Id:
</td>
<td class="clsQuery" align="left" style="border: 1px solid black;" colspan="2">
<input name="Merchant_ApplicationID" type="text" value="{1ab16e03-37dc-4b25-8b4f-0abb502c1db0}" maxlength="40" id="Merchant_ApplicationID" onblur="javascript: updateForm();" onchange="javascript: updateForm();" style="width: 230px;" class="clsInputText" />
<input type="hidden" name="Lite_Merchant_ApplicationID" id="Lite_Merchant_ApplicationID" />
</td>
</tr>
<tr>
<td class="clsInformation" align="center" style="border-bottom: 1px solid black;" colspan="3">
<input type="submit" name="buttonSubmit" value="Submit" id="Submit1" onclick="javascript:submitForm();" class="clsInputSubmit" style="width:75px;" />
</td>
</tr>
</table>
<table id="tblCardInformation" class="clsQuery" style="top: 10px; visibility: hidden">
<tr>
<td class="clsQueryHeading" align="left">
</td>
<td class="clsQuery" align="left">
<input type="hidden" name="Ecom_Payment_Card_Protocols" id="Ecom_Payment_Card_Protocols" value="iVeri" />
</td>
</tr>
</table>
<!-- Other Optional fields that can be set -->
<input type="hidden" name="Lite_Order_Terminal" id="Lite_Order_Terminal" value="77777001" />
<input type="hidden" name="Lite_Order_AuthorisationCode" id="Lite_Order_AuthorisationCode" />
<input type="hidden" name="Lite_Website_TextColor"id="Lite_Website_TextColor" value="#ffffff" />
<input type="hidden" name="Lite_Website_BGColor" id="Lite_Website_BGColor" value="#1C4231" />
<input type="hidden" name="Lite_ConsumerOrderID_PreFix" id="Lite_ConsumerOrderID_PreFix" value="LITE" />
<input type="hidden" name="Lite_Website_Successful_Url" id="Lite_Website_Successful_Url" value="https://examples.iveri.net/Lite/Result.asp" />
<input type="hidden" name="Lite_Website_Fail_Url" id="Lite_Website_Fail_Url" value="https://examples.iveri.net/Lite/Result.asp" />
<input type="hidden" name="Lite_Website_Error_Url" id="Lite_Website_Error_Url" value="https://examples.iveri.net/Lite/Result.asp" />
<input type="hidden" name="Lite_Website_Trylater_Url" id="Lite_Website_Trylater_Url" value="https://examples.iveri.net/Lite/Result.asp" />
<!-- Ecml start-->
<!-- ShipTo Additional tags -->
<input type="hidden" name="Ecom_ShipTo_Postal_Name_Prefix" id="Ecom_ShipTo_Postal_Name_Prefix" />
<input type="hidden" name="Ecom_ShipTo_Postal_Name_First" id="Ecom_ShipTo_Postal_Name_First" />
<input type="hidden" name="Ecom_ShipTo_Postal_Name_Middle" id="Ecom_ShipTo_Postal_Name_Middle" />
<input type="hidden" name="Ecom_ShipTo_Postal_Name_Last" id="Ecom_ShipTo_Postal_Name_Last" />
<input type="hidden" name="Ecom_ShipTo_Postal_Name_Suffix" id="Ecom_ShipTo_Postal_Name_Suffix" />
<input type="hidden" name="Ecom_ShipTo_Postal_Street_Line3" id="Ecom_ShipTo_Postal_Street_Line3" />
<input type="hidden" name="Ecom_ShipTo_Postal_CountryCode" id="Ecom_ShipTo_Postal_CountryCode" />
<input type="text" readonly="readonly" class="clsInputReadOnlyText" name="Ecom_ShipTo_Telecom_Phone_Number" id="Ecom_ShipTo_Telecom_Phone_Number" />
<input type="hidden" name="Ecom_ShipTo_Online_Email" id="Ecom_ShipTo_Online_Email" />
<!-- ReceiptTo -->
<input type="hidden" name="Ecom_ReceiptTo_Postal_Name_Prefix" id="Ecom_ReceiptTo_Postal_Name_Prefix" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Name_First" id="Ecom_ReceiptTo_Postal_Name_First" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Name_Middle" id="Ecom_ReceiptTo_Postal_Name_Middle" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Name_Last" id="Ecom_ReceiptTo_Postal_Name_Last" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Name_Suffix" id="Ecom_ReceiptTo_Postal_Name_Suffix" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Street_Line1" id="Ecom_ReceiptTo_Postal_Street_Line1" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Street_Line2" id="Ecom_ReceiptTo_Postal_Street_Line2" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_Street_Line3" id="Ecom_ReceiptTo_Postal_Street_Line3" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_City" id="Ecom_ReceiptTo_Postal_City" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_StateProv" id="Ecom_ReceiptTo_Postal_StateProv" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_PostalCode" id="Ecom_ReceiptTo_Postal_PostalCode" />
<input type="hidden" name="Ecom_ReceiptTo_Postal_CountryCode" id="Ecom_ReceiptTo_Postal_CountryCode" />
<input type="hidden" name="Ecom_ReceiptTo_Telecom_Phone_Number" id="Ecom_ReceiptTo_Telecom_Phone_Number" />
<input type="hidden" name="Ecom_ReceiptTo_Online_Email" id="Ecom_ReceiptTo_Online_Email" />
<!-- BillTo -->
<input type="hidden" name="Ecom_BillTo_Postal_Name_Suffix" id="Ecom_BillTo_Postal_Name_Suffix" />
<input type="hidden" name="Ecom_BillTo_Postal_Street_Line1" id="Ecom_BillTo_Postal_Street_Line1" />
<input type="hidden" name="Ecom_BillTo_Postal_Street_Line2" id="Ecom_BillTo_Postal_Street_Line2" />
<input type="hidden" name="Ecom_BillTo_Postal_Street_Line3" id="Ecom_BillTo_Postal_Street_Line3" />
<input type="hidden" name="Ecom_BillTo_Postal_City" id="Ecom_BillTo_Postal_City" />
<input type="hidden" name="Ecom_BillTo_Postal_StateProv" id="Ecom_BillTo_Postal_StateProv" />
<input type="hidden" name="Ecom_BillTo_Postal_PostalCode" id="Ecom_BillTo_Postal_PostalCode" />
<input type="hidden" name="Ecom_BillTo_Postal_CountryCode" id="Ecom_BillTo_Postal_CountryCode" />
<input type="hidden" name="Ecom_BillTo_Telecom_Phone_Number" id="Ecom_BillTo_Telecom_Phone_Number" />
<!-- End optional fields -->
</form>
<!-- Button HTML (to Trigger Modal) -->
<a id="iveri-litebox-button">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="iveri-litebox" class="center-block"></div>
<script type="text/javascript">
//<![CDATA[
formatCurrency(document.getElementById('Transaction_Amount'), 2, "", ".");
//]]>
</script>
</div>
<script type="text/javascript">
var tAmount = document.getElementById("Transaction_Amount");
tAmount.focus(); //sets focus to element
var val = tAmount.value; //store the value of the element
tAmount.value = ''; //clear the value of the element
tAmount.value = val; //set that value back.
function updateForm() {
var tAmount = document.getElementById("Transaction_Amount");
document.getElementById("Transaction_LineItems_Amount_1").value = tAmount.value;
var tApplication = document.getElementById("Merchant_ApplicationID");
document.getElementById("Lite_Merchant_ApplicationID").value = tApplication.value;
document.getElementById("Lite_Order_Amount").value = tAmount.value.replace('.', '');
document.getElementById("Lite_Order_LineItems_Amount_1").value = tAmount.value.replace('.', '');
}
function submitForm() {
updateForm();
}
</script>