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>