Visa Checkout
Visa Checkout® is available through the following Converge integration options:
- Hosted Payments Page
- XML API
- Checkout.js
note
Visa Checkout is enabled by default on all Converge accounts. To disable Visa Checkout, please contact Converge software support.
Converge Hosted Payments Page
Using Visa Checkout with the HPP doesn't require any further coding. Visa Checkout will display by default at checkout.
You may toggle this option on and off in the HPP Customization Screen.
XML API
Visit the Visa Checkout Developer Center to learn more about rendering Visa Checkout buttons on the checkout page.
Process XML Sample Request
<txn>
<ssl_merchant_id> 000004 </ssl_merchant_id>
<ssl_user_id> apiuser </ssl_user_id>
<ssl_pin> Y7XHTY1J1XQZ0ASZW5ACPBCDCXOH0J6BT53ABK4AZ2ILA4GGUHVIDBMB4MZUH8UV </ssl_pin>
<ssl_amount> 1.00 </ssl_amount>
<ssl_transaction_type> CCSALE </ssl_transaction_type>
<ssl_visapayload>{"encKey":"S4x5oSR0fDUjxmkDusecVN2/f33eCv7zPU+CfFa4GP8JMCs3bju9eA1qT1gMAIVtjaqSdTJQ9DgeoOwY0FryY4OsT0qgfAiXajRGrWQDF8udI6vyN5lf6+LiluBTsUcG","encPaymentData":"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","partialShippingAddress":{"countryCode":"US","postalCode":"30328"},"partialPaymentInstrument":{"lastFourDigits":"0002","paymentType":{"cardBrand":"VISA","cardType":"CREDIT"}},"callid":"2329909250316994801","vInitRequest":{"apikey":"NJXLKFO2IS9SCHV3199J13nJ7vTOcjGqMipvP3c-B4yNGA3Mc","externalClientId":"MyMerchant1ID","paymentRequest":{"currencyCode":"USD","subtotal":"1.00"},"settings":{"displayName":"Demo Terminal","websiteUrl":null,"dataLevel":"FULL","widgetStyle":"OVERLAY","buttonPosition":"RELATIVE","shipping":{"collectShipping":"true","acceptedRegions":["PR","PT","PW","PY","QA","AC","AE","AF","AG","AI","AL","AM","AN","AO","AR","AS","AT","RE","AU","AW","AX","AZ","RO","BA","BB","RS","BD","BE","RU","BF","BG","RW","BH","BI","BJ","BM","BN","BO","SA","SB","SC","BR","BS","SE","BT","SG","BW","SH","SI","BY","SJ","BZ","SK","SL","SM","SN","SO","CA","SR","CC","CD","ST","CF","SV","CG","CH","CI","SZ","CK","CL","CM","CN","CO","TA","CR","TC","TD","TF","TG","CV","TH","CX","TJ","CY","TK","CZ","TL","TM","TN","TO","TR","TT","DE","TV","TW","TZ","DJ","DK","DM","DO","UA","UG","DZ","EC","US","EE","EG","UY","UZ","VA","VC","ER","ES","ET","VE","VG","VI","VN","VU","FI","FJ","FK","FM","FO","FR","WF","GA","GB","WS","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GT","GU","GW","GY","HK","HN","HR","HT","YE","HU","YT","ID","IE","IL","IM","IN","IO","ZA","IQ","IS","IT","ZM","JE","ZW","JM","JO","JP","KE","KG","KH","KI","KM","KN","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MG","MH","MK","ML","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PN"]},"payment":{"billingCountries":["PR","PT","PW","PY","QA","AC","AE","AF","AG","AI","AL","AM","AN","AO","AR","AS","RE","AT","AU","AW","AX","AZ","RO","BA","BB","RS","BD","BE","RU","BF","BG","RW","BH","BI","BJ","BM","BN","BO","SA","SB","SC","BR","BS","SE","BT","SG","BW","SH","SI","BY","SJ","BZ","SK","SL","SM","SN","SO","CA","SR","CC","ST","CD","CF","SV","CG","CH","CI","SZ","CK","CL","CM","CN","CO","TA","TC","CR","TD","TF","TG","CV","TH","CX","TJ","CY","CZ","TK","TL","TM","TN","TO","TR","TT","DE","TV","TW","TZ","DJ","DK","DM","DO","UA","UG","DZ","EC","US","EE","EG","UY","UZ","VA","VC","ER","ES","ET","VE","VG","VI","VN","VU","FI","FJ","FK","FM","FO","FR","WF","GA","GB","WS","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GT","GU","GW","GY","HK","HN","HR","HT","YE","HU","ID","YT","IE","IL","IM","IN","IO","ZA","IQ","IS","IT","ZM","JE","ZW","JM","JO","JP","KE","KG","KH","KI","KM","KN","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MG","MH","MK","ML","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PN"]}},"payment":{"cardBrands":["VISA","MASTERCARD","AMEX","DISCOVER","ELECTRON"]},"parentUrl":"https://api.demo.convergepay.com/hpp-demo/simple/visa-checkout-processxml-qa.html","browserLocale":"en","clientId":"dbbbd9a6-b3ee-ec0f-e3de-177738652202","allowEnrollment":true,"allowCustomBranding":false,"guestCheckout":false,"currencyFormat":"currencyCode ###,###,###.##","enableUserDataPrefill":false,"displayName":"Merchant"}}</ssl_visapayload>
</txn>
Checkout.js
To use Visa Checkout with Checkout.js, you must take the following steps:
-
Include Converge Checkout.js and render a Visa Checkout button on your page. For more information on this, see the Visa Checkout Documentation.
-
Prepare a session token.
-
Provide callback (as shown in the example code below).
-
Call
ConvergeEmbeddedPayment.initVisaCheckout()
to render the Visa Checkout button.
ConvergeEmbeddedPayment.initVisa Checkout has the following parameters:
Parameter | Description |
---|---|
Visa Checkout button ID | ID of the HTML element to be displayed on page. |
Visa Checkout button Options | Options available for Visa Checkout button (see Visa Checkout developer portal for more info.) |
PaymentData | Payment fields to pass Converge. (See the example code below) |
Callback | The callback results for handling the transaction results. (See the example code below) |
Example Visa Checkout Form
This is an example of a Visa Checkout embedded payment page. Take note of the Callback and Payment Data sections marked by ==.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Embedded Payment Demo</title>
<script src="jquery.js"></script>
<script src="https://api.demo.convergepay.com/hosted-payments/Checkout.js"></script>
<script>
var transactionToken;
var callback = {
onError: function (error) {
showResult("error", error);
},
onDeclined: function (response) {
showResult("declined", JSON.stringify(response));
},
onApproval: function (response) {
showResult("approval", JSON.stringify(response));
},
onCancelled: function () {
showResult("cancelled", "");
}
};
function initiateCheckoutJS () {
var tokenRequest = {
ssl_merchant_id: $("#ssl_merchant_id").val(),
ssl_user_id: $("#ssl_user_id").val(),
ssl_pin: $("#ssl_pin").val(),
ssl_transaction_type: $("#ssl_transaction_type").val(),
ssl_amount: $("#ssl_amount").val()
};
$.post("https://api.demo.convergepay.com/hosted-payments/transaction_token", tokenRequest, function( data ) {
$("#token").html(data);
transactionToken = data;
initiateEwallets();
});
return false;
}
function initiateEwallets () {
var paymentData = {
ssl_txn_auth_token: transactionToken
};
var visaCheckoutButtonOptions = {
size: '154'
};
ConvergeEmbeddedPayment.initVisaCheckout('visa-checkout-button', visaCheckoutButtonOptions, paymentData, callback);
return false;
}
function showResult (status, msg) {
document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
document.getElementById('txn_response').innerHTML = msg + "</b>";
}
</script>
</head>
<body>
<form name="getSessionTokenForm">
Converge Account Number: <input type="text" id="ssl_merchant_id" name="ssl_merchant_id" size="6" value="000006"> <br>
API User ID: <input type="text" id="ssl_user_id" name="ssl_user_id" size="20" value="userID"> <br>
API User Terminal Identifier: <input type="text" id="ssl_pin" name="ssl_pin" size="64" value="W7JGCWG0ACOSEBY095LR88JXTCH354BIO4NMWSWUA3UBY08WBYUSKPGPJ0KI0SJY"> <br>
Transaction Type: <input type="text" id="ssl_transaction_type" name="ssl_transaction_type" value="CCSALE"> <br>
Transaction Amount: <input type="text" id="ssl_amount" name="ssl_amount" value="1.00"> <br> <br>
<button onclick="return initiateCheckoutJS();">Initiate Checkout.js</button> <br>
</form>
<br>
Transaction Token: <span id="token"></span> <br><br>
<div id="visa-checkout-button"></div>
Transaction Status:<div id="txn_status"></div>
<br>
Transaction Response:<div id="txn_response"></div>
<br>
</body>
</html>