Visa Checkout

Visa Checkout® is available through the following Converge integration options:

  • Hosted Payments Page
  • XML API
  • Checkout.js
error_outline

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:

  1. Include Converge Checkout.js and render a Visa Checkout button on your page. For more information on this, see the Visa Checkout Documentation.

  2. Prepare a session token.

  3. Provide callback (as shown in the example code below).

  4. 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>