Visa Checkout eProtect Code Example

Document created by gjsissons on Jul 27, 2017
Version 1Show Document
  • View in full screen mode

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>

Attachments

    Outcomes