Visa Checkout

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

• Hosted Payments Page
• XML API
• Checkout.js

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 Centeropen_in_newLink opens new window 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 Documentationopen_in_newLink opens new window.

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:

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>

• previousApple Pay on the Web
• nextService Fees