Below is an HTML and JavaScript source code example that illustrates how Visa Checkout integrates with eProtect to enable payment using Visa Checkout.
You can visit the on-line demonstration site pre-configured for use with the Visa Checkout sandbox and Vantiv pre-live environment here.
<HTML>
<head>
<title>Merchant1 checkout</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js"></script>
<script>
function onVisaCheckoutReady() {
var ep = new eProtect();
V.init({
apikey: ep.getVisaCheckoutApiKey(), //Vantiv's current Visa Checkout API Key
sourceId: "Merchant Defined Source ID",
externalClientId: "stefan_sandwiches", //Merchant's client id - get this from Vantiv's implementations team
settings: {
locale: "en_US",
countryCode: "US",
displayName: "...Corp",
websiteUrl: "www....Corp.com",
customerSupportUrl: "www....Corp.support.com",
shipping: {
acceptedRegions: ["US", "CA"],
collectShipping: "true"
},
payment: {
cardBrands:["VISA","MASTERCARD" ],
acceptCanadianVisaDebit: "true",
billingCountries:["US","CA"]
},
review: {
message: "Merchant defined message",
buttonAction: "Continue"
},
dataLevel: "FULL"
},
paymentRequest: {
merchantRequestId: "Merchant defined request ID",
currencyCode: "USD",
subtotal: "10.00",
shippingHandling: "2.00",
tax: "2.00",
discount: "1.00",
giftWrap: "2.00",
misc: "1.00",
total: "16.00",
description: "...corp Product",
orderId: "Merchant defined order ID",
promoCode: "Merchant defined promo code",
customData: {
"nvPair": [
{ "name": "customName1", "value": "customValue1" },
{ "name": "customName2", "value": "customValue2" }
]
}
}
});
V.on("payment.success", function(payment){
function setLitleResponseFields(response) {
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;
}
function submitAfterLitle (response) {
setLitleResponseFields(response);
}
function onErrorAfterLitle (response) {
setLitleResponseFields(response);
return false;
}
var elapsedTime;
function onTimeoutAfterLitle() {
elapsedTime = new Date().getTime() - elapsedTime;
document.getElementById('timeoutMessage').value = 'Timed out after ' + elapsedTime + 'ms';
}
console.log(payment);
document.getElementById('timeoutMessage').value="";
elapsedTime=new Date().getTime();
var formFields = {
"paypageRegistrationId":document.getElementById('paypageRegistrationId'),
"bin" :document.getElementById('bin')
};
var vantivRequest = {
"paypageId" : document.getElementById("request$paypageId").value,
"reportGroup" : document.getElementById("request$reportGroup").value,
"orderId" : document.getElementById("request$orderId").value,
"id" : document.getElementById("request$merchantTxnId").value,
"url" : 'https://request.eprotect.vantivprelive.com',
"visaCheckout": payment
};
var timeout = document.getElementById("request$timeout").value;
new eProtect().sendToEprotect(vantivRequest, formFields, submitAfterLitle, onErrorAfterLitle, onTimeoutAfterLitle, timeout);
});
V.on("payment.cancel", function (payment) {
console.log("Payment Cancelled");
console.log(payment);
});
V.on("payment.error", function (payment, error) {
console.log("Payment Error");
console.log(payment);
console.log(error);
});
}
</script>
<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>
</head>
<BODY>
<div class="checkout">
<h2>Checkout Form</h2>
<img alt="Visa Checkout" class="v-button" role="button"
src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"/>
<script type="text/javascript"
src="https://sandbox-assets.secure.checkout.visa.com/
checkout-widget/resources/js/integration/v1/sdk.js">
</script>
<form method=post id="fCheckout" name="fCheckout" onSubmit="return false">
<table>
<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>
</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="a2y4o6m8k0"/></td>
<td>Merchant Txn ID</td><td><input type="text" id="request$merchantTxnId" name="request$merchantTxnId" value="12345"/></td>
</tr>
<tr>
<td>Order ID</td><td><input type="text" id="request$orderId" name="request$orderId" value="cust_order"/></td>
<td>Report Group</td><td><input type="text" id="request$reportGroup" name="request$reportGroup" value="67890"/></td>
</tr>
<tr>
<td>JS Timeout</td><td><input type="text" id="request$timeout" name="request$timeout" value="5000"/></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> </td><td></tr>
<tr>
<td>Litle 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> </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)
4100000000000001 - 1111222233330001
5123456789012007 - 1112333344442007
378310203312332 - 111344445552332
6011000990190005 - 1114555566660005
</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>
</BODY>
</HTML>