Skip to content

Instantly share code, notes, and snippets.

@richessler

richessler/vantiv_iframe_sample.html

Created May 31, 2016 19:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richessler/335a13285421de0111bb26863ac4211e to your computer and use it in GitHub Desktop.
Save richessler/335a13285421de0111bb26863ac4211e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vantiv_iframe_sample.html
<HTML>
<head>
<title>Merchant1 checkout</title>
<style>
body {
font-size:10pt;
}
.checkout {
background-color:lightgreen;
width: 50%;
}
.testFieldTable {
background-color:lightgrey;
}
#submitId {
font-weight:bold;
font-size:12pt;
}
form#fCheckout {
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://request-prelive.np-securepaypage-litle.com/LitlePayPage/js/payframe-client.min.js"></script>
</head>
<body>
<div class="checkout">
<h2>Checkout Form</h2>
<form method=post id="fCheckout" name="fCheckout" onsubmit="return false;">
<table>
<tr><td colspan="2">
<div id="payframe">
</div>
</td></tr>
<tr><td>Paypage Registration ID</td><td><input type="text"
id="paypageRegistrationId"
name="paypageRegistrationId"
readOnly="true"/>
<--Hidden</td></tr>
<tr><td>Bin</td><td><input type="text" id="bin" name="bin" readOnly="true"/>
<--Hidden</td></tr>
<tr><td></td><td align="right"><input type="submit" id="submitId">Check
out</button></td></tr>
</table>
</form>
</div>
<br/>
<h3>Test Input Fields</h3>
<table class="testFieldTable">
<tr>
<td>Paypage ID</td><td><input type="text" id="request$paypageId"
name="request$paypageId" value="uJ4cfMnaLuWcXbW7" disabled/></td>
<td>Merchant Txn ID</td><td><input type="text" id="request$merchantTxnId"
name="request$merchantTxnId" value="01222812"/></td>
</tr>
<tr>
<td>Order ID</td><td><input type="text" id="request$orderId"
name="request$orderId" value="order_123"/></td>
<td>Report Group</td><td><input type="text" id="request$reportGroup"
name="request$reportGroup" value="*merchant1500" disabled/></td>
</tr>
<tr>
<td>JS Timeout</td><td><input type="text" id="request$timeout"
name="request$timeout" value="15000" disabled/></td>
</tr>
</table>
<h3>Test Output Fields</h3>
<table class="testFieldTable">
<tr>
<td>Response Code</td><td><input type="text" id="response$code"
name="response$code" readOnly="true"/></td>
<td>ResponseTime</td><td><input type="text" id="response$responseTime"
name="response$responseTime" readOnly="true"/></td>
</tr>
<tr>
<td>Response Message</td><td colspan="3"><input type="text"
id="response$message" name="response$message" readOnly="true" size="100"/></td>
</tr>
<tr><td>&nbsp;</td><td></tr>
<tr>
<td>Vantiv Txn ID</td><td><input type="text" id="response$litleTxnId"
name="response$litleTxnId" readOnly="true"/></td>
<td>Merchant Txn ID</td><td><input type="text" id="response$merchantTxnId"
name="response$merchantTxnId" readOnly="true"/></td>
</tr>
<tr>
<td>Order ID</td><td><input type="text" id="response$orderId"
name="response$orderId" readOnly="true"/></td>
<td>Report Group</td><td><input type="text" id="response$reportGroup"
name="response$reportGroup" readOnly="true"/></td>
</tr>
<tr><td>Type</td><td><input type="text" id="response$type" name="response$type"
readOnly="true"/></td></tr>
<tr>
<td>Expiration Month</td><td><input type="text" id="response$expMonth"
name="response$expMonth" readOnly="true"/></td>
<td>Expiration Year</td><td><input type="text" id="response$expYear"
name="response$expYear" readOnly="true"/></td>
</tr>
<tr><td>&nbsp;</td><td></tr>
<tr>
<td>First Six</td><td><input type="text"
id="response$firstSix"name="response$firstSix" readOnly="true"/></td>
<td>Last Four</td><td><input type="text"
id="response$lastFour"name="response$lastFour" readOnly="true"/></td>
</tr>
<tr><td>Timeout Message</td><td><input type="text" id="timeoutMessage"
name="timeoutMessage" readOnly="true"/></td></tr>
<tr><td>Expected Results</td>
<td colspan="3">
<textarea id="expectedResults" name="expectedResults" rows="5" cols="100"
readOnly="true">
CC Num - Token Generated (with simulator)
410000&#48;00000001 - 1111222&#50;33330001
5123456&#55;89012007 - 1112333&#51;44442007
3783102&#48;3312332 - 11134444&#53;552332
601100&#48;990190005 - 1114555&#53;66660005
</textarea></td>
</tr>
<tr>
<td>Encrypted Card</td>
<td colspan="3"><textarea id="base64enc" name="base64enc" rows="5"
cols="100" readOnly="true"></textarea></td>
</tr>
</table>
<script>
$( document ).ready(function() {
var startTime;
var payframeClientCallback = function(response) {
if (response.timeout) {
var elapsedTime = new Date().getTime() - startTime;
document.getElementById('timeoutMessage').value = 'Timed out after ' +
elapsedTime + 'ms';// handle timeout
}
else {
document.getElementById('response$code').value = response.response;
document.getElementById('response$message').value = response.message;
document.getElementById('response$responseTime').value =
response.responseTime;
document.getElementById('response$reportGroup').value =
response.reportGroup;
document.getElementById('response$merchantTxnId').value = response.id;
document.getElementById('response$orderId').value = response.orderId;
document.getElementById('response$litleTxnId').value =
response.litleTxnId;
document.getElementById('response$type').value = response.type;
document.getElementById('response$lastFour').value = response.lastFour;
document.getElementById('response$firstSix').value = response.firstSix;
document.getElementById('paypageRegistrationId').value =
response.paypageRegistrationId;
document.getElementById('bin').value = response.bin;
document.getElementById('response$expMonth').value = response.expMonth;
document.getElementById('response$expYear').value = response.expYear;
}
};
var configure = {
"paypageId":document.getElementById("request$paypageId").value,
"style":"test",
"height":"200px",
"reportGroup":document.getElementById("request$reportGroup").value,
"timeout":document.getElementById("request$timeout").value,
"div": "payframe",
"callback": payframeClientCallback,
"showCvv": true,
"months": {
"1":"January",
"2":"February",
"3":"March",
"4":"April",
"5":"May",
"6":"June",
"7":"July",
"8":"August",
"9":"September",
"10":"October",
"11":"November",
"12":"December"
},
"numYears": 8,
"tooltipText": "A CVV is the 3 digit code on the back of your Visa, MasterCard and Discover or a 4 digit code on the front of your American Express",
"tabIndex": {
"cvv":1,
"accountNumber":2,
"expMonth":3,
"expYear":4
},
"placeholderText": {
"cvv":"CVV",
"accountNumber":"Account Number"
}
};
if(typeof LitlePayframeClient === 'undefined') {
//This means we couldn't download the payframe-client javascript library
alert("Couldn't download payframe-client javascript");
}
var payframeClient = new LitlePayframeClient(configure);
document.getElementById("fCheckout").onsubmit = function(){
var message = {
"id":document.getElementById("request$merchantTxnId").value,
"orderId":document.getElementById("request$orderId").value
};
startTime = new Date().getTime();
payframeClient.getPaypageRegistrationId(message);
return false;
};
});
</script>
</body>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment