Click to Pay

Converge offers Click to Pay^® as a digital wallet expansion for Hosted Payments Page and Checkout.js. Click to Pay lets customers to pay with a single click using stored payment information for all of their credit cards. The service supports Visa, Mastercard, American Express, Discover, debit cards, and prepaid cards

Converge allows Hosted Payment Page (HPP), and Checkout.js merchants with Click to Pay as a payment method to add surcharge fees to eligible credit cards.

Customers using Click to Pay store and manage their payment and shipment information at the Click to Pay website, when they are ready to purchase goods, their information will be securely shared with the merchant website. Converge uses the Elavon eMPI engine to allow processing of Click to Pay wallet transactions.

The following transactions types are supported when processing Click to Pay transactions:

ccsale - Credit Card Sale
ccauthonly - Credit Card Auth Only

note

Region
- Terminal must be setup under Regions - Canada and US
Market Segment
- Click to Pay Checkout is available only for Internet based Terminals
Click to Pay Boarding and Enablement
- You must login to Converge and enable Click to Pay on Payment Extensions Settings page.

The following information is supported for Click to Pay transactions:

Field Name	Description	Required
`ssl_eWallet`	The wallet identifier. Valid value: MasterPass Note: Required for XML API to indicate that the Cardholder has opted to pay using Click to Pay.	C
`ssl_eWallet_shipping`	Wallet shipping option to indicate if the shipping address information used is retrieved from the Click to Pay website or the merchant’s website. Default is N. Valid values: Y = Use the Shipping address stored in Click to Pay N = Use the Shipping address from the merchant website or payment form	N
`ssl_product_string`	Product string. This is the list of products purchased at the merchant website. All products will be displayed as line item on Click to Pay site along with the total amount. The product string have to be formatted as following: (Unit Price:: Quantity: Description: Image URL\|) of the product, several products can be provided, each separated by “\|”. Converge will send a generic product string if not provided. Example: `10.00::1::shirt::https://merchantwebsite/shirtpic.gif` \|`22.00::1::pants:: https://merchantwebsite/pantspic.gif` \|`15.00::1::hat::https://merchantwebsite/hatpic.gif` \|`5.00::1::socks::https://merchantwebsite/sockspic.gif`	N
`ssl_callback_url`	The url of the merchant that will host the response.	Y
`ssl_txn_auth_token`	This value must be passed a `transactionToken` as part of `paymentData` that must be sent as part of a Click to Pay transaction.	Y

Using Checkout.js

To use Click to Pay with Checkout.js, you must take the following steps:

Include Converge Checkout.js and render a Click to Pay button on your page.
Prepare a session token.
Provide callback.

Transaction Example

Below is an example of an embeddable form for Click to Pay. This form renders a Click to Pay button, and presents a form to capture and pass the required information to requests a transaction token from Click to Pay.

<!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/hosted-payments/transaction_token", tokenRequest, function( data ) {
  				$("#token").html(data);
  				transactionToken = data;
  				initiateEwallets();
			});
    		return false;
    	}
	    
    	function initiateEwallets () {
    		var paymentData = {
    			ssl_txn_auth_token: transactionToken,
				ssl_callback_url: 'https://<your website>/checkout-js-merchantresponse.jsp?osessionId='+transactionToken
    	    };
   	    	ConvergeEmbeddedPayment.initMasterPass('clicktopay-button', paymentData, callback);
   	    	return false;
    	}
    	
    	function showResult (status, msg, hash) {
    		document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
			document.getElementById('txn_response').innerHTML = msg + "</b>";
			document.getElementById('txn_hash').innerHTML = hash;
    	}
    </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="jin_api"> <br>
  			API User Terminal Identifier: <input type="text" id="ssl_pin" name="ssl_pin" size="64" value="E3NC2X8Y4H8LRZ48TREF0FN551WXKHJS8OUWJLV1RQO5JA755TPR6H5K5K9NFRQD"> <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>
  		<br/><br/>
		<div id="clicktopay-button"></div>
		<br>
  		
  		Transaction Status:<div id="txn_status"></div>
  		<br>
  		Transaction Response:<div id="txn_response"></div>
  		<br>
  		Transaction Hash Value:<div id="txn_hash"></div>
  </body>
  
</html>

Sample Callback Handler

This page includes the variables and functions to create a callback required for handling the response from a Click to Pay session. For example, the sample callback url should be `<your website>/checkout-js-merchantresponse.jsp’.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Clicktopay Response Demo</title>
	<%
		String osessionId = request.getParameter("osessionId");
		String oauth_verifier = request.getParameter("oauth_verifier");
		String mpstatus = request.getParameter("mpstatus");
		String cartId = request.getParameter("cartId");
	%>
    <script src="jquery.js"></script>
    <script src="https://api.demo.convergepay.com/hosted-payments/Checkout.js"></script>
    <script>
    	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 payByMasterpass7() {
			var paymentData = {
				osessionId: $("#osessionId").val(),
				oauth_verifier: $("#oauth_verifier").val()
			};
   	    	ConvergeEmbeddedPayment.payByMasterpass(paymentData, callback);
   	    	return false;
    	}
    	
    	function showResult (status, msg, hash) {
    		document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
			document.getElementById('txn_response').innerHTML = msg + "</b>";
			document.getElementById('txn_hash').innerHTML = hash;
    	}

		function confirmSurcharge() {
			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", "");
				},
				onSurcharge: function(response) {
					showResult("Surchange Approval", JSON.stringify(response));
				}
			};
		ConvergeEmbeddedPayment.creditSurchargeDecision(true, callback);
		}
    </script>
    
  </head>
  <body onload="payByMasterpass7()">
		osessionId: <input type="text" id="osessionId" size="20" value="<%=osessionId%>"> <br>
		oauth_verifier: <input type="text" id="oauth_verifier" size="20" value="<%=oauth_verifier%>"> <br>
		mpstatus: <input type="text" id="mpstatus" size="20" value="<%=mpstatus%>"> <br>
  		<br>
		<button id="sc_button" style="display:none" onclick="return confirmSurcharge();">Confirm surchange</button>
		<br>
  		Transaction Status:<div id="txn_status"></div>
  		<br>
  		Transaction Response:<div id="txn_response"></div>
  		<br>
  		Transaction Hash Value:<div id="txn_hash"></div>
  </body>
  
</html>

Cash Advance

Apple Pay

Magento Guide

Click to Pay

Using Checkout.js

Transaction Example

Sample Callback Handler