Lightbox

Hosted Payments integration enables your eCommerce store to collect payments securely and is ideal for businesses that need a checkout page that:

• Links their custom-built website with the Converge payment gateway
• Allows Converge to handle card data and payment processing
• Is simple to implement and customer friendly
• Is Americans with Disabilities Act (ADA) compliant

Lightbox offers checkout/payment forms that are SAQ-A-compliant and that make collecting payment information from your customer easy, and without the payment data touching your server.

Lightbox uses an iframe to embed your checkout form as an overlay to your online store. When your online store calls the checkout form, your store darkens and becomes a transparent background, and the checkout form appears as a floating element.

To use Lightbox, your server must have the following settings:

• All pages that use the Converge Payment Script must be served over HTTPS.
• Your domain must have a valid SSL certificate.
• Your server must support TLS 1.2 protocol.
• The Referrer URL of the domain making the Lightbox call must be added to an “allowed” list.
• All pages that include Lightbox must import the Pay With Converge JavaScript Library.

Payment and Transaction Types

Lightbox integration supports the following transaction types of each payment type:

• Credit Card

  • Sale - ccsale
  • Authorization Only - ccauthonly
  • Verification - ccverify
  • Get Token - ccgettoken

• Electronic Check

  • Sale - ecspurchase

• Gift Card

  • Sale - egcsale

Language Values

Lightbox integration supports the following language values in the ssl_language field:

• en = US English
  
• fr = Canadian French
  
• es_la = Spanish
  
• pt_br = Portuguese
  
• de = German
  
• zh_cn = Simplified Chinese
  
• ja = Japanese
• ko = Korean

Integration

To integrate with the Converge payment gateway through Lightbox, your will need to complete the following:

1. Contact Software Technical Support Team or Customer Service.
2. Customize your Lightbox checkout form.
3. Develop the Payment Processing program.

Contact Software Technical Support Team/Customer Service

To implement Hosted Payments integration, you will need to contact the Software Technical Support Team or Customer Service at 1-800-377-3962 | Option 2 | Option 2 to:

• Enable the merchant IP filter and add the IP address of the server making the session token request.
• Designate a Converge user ID with a Hosted Payment API User status in order to post a session token request.
• Associate the Converge user ID with the eCommerce terminal.
• Ensure the API user has user rights parallel to the transaction types you plan to use.
• Add the website domain of your website to the HTTP Referrer list.

Customize the checkout form

To customize your Lightbox checkout form, complete these steps:

1. Log in to your Converge demo site.
2. Click Home. The Client Accounts page appears.
3. Search for the terminal that handles eCommerce transaction processing.
4. Select the terminal by clicking its name under the Terminal Name column. The Settings page appears.
5. Under Advanced API Settings, click Hosted Payments. The Which solution is right for you page appears.
6. Customize your Lightbox checkout form.
   • Click the SETUP button for Hosted payment modal setup. The Modal Setting page appears.
   • Click the Company Logo upload button and select the image file of your business logo.
   • Select the color scheme from the Theme field.
   • Select the Enable CAPTCHA checkbox to include a challenge-response test to the form.
   • Click Save.

Develop the Payment Processing program

The Payment Processing program that you will develop must include session token request function, and callback response handling function.

Session Token Request

Your session token request function must include the following parameters:

The endpoints to POST the session token request to are as follows:

• Demo Site:https://api.demo.convergepay.com/hosted-payments/transaction_token
• Live Site:https://api.convergepay.com/hosted-payments/transaction_token

Your session token request function must be able to capture the Session Token Response from Converge.

Once the session token is obtained, you should call the lightbox function PayWithConverge.open and pass the previously obtained session token as the ssl_txn_auth_token value. To avoid CORS errors the token should not be pulled from the DOM and then passed.

The request must come from a website URL that is registered with Converge.

The following javascript libraries must be included in the head of your code:

• Demo Site:https://api.demo.convergepay.com/hosted-payments/PayWithConverge.js
• Live Site:https://api.convergepay.com/hosted-payments/PayWithConverge.js

Call Back Response Handling

Based on your hosted payments configuration, Converge can post the transaction response to your website. You can use the response to update our backend system and display the appropriate response to the customer.

Sample PHP Code

The following is an example of how to handle initializing a lightbox session using PHP.

<?php

 // Set variables

$merchantID = "xxxxxx"; //Converge 6 or 7-Digit Account ID *Not the 10-Digit Elavon Merchant ID*
$merchantUserID = "convergeapi"; //Converge User ID *MUST FLAG AS HOSTED API USER IN CONVERGE UI*
$merchantPinCode = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Converge PIN (64 CHAR A/N)

 $url = "https://api.demo.convergepay.com/hosted-payments/transaction_token"; // URL to Converge demo session token server
//$url = "https://api.convergepay.com/hosted-payments/transaction_token"; // URL to Converge production session token server


/*Payment Field Variables*/

// In this section, we set variables to be captured by the PHP file and passed to Converge in the curl request.
$firstname=$_POST['ssl_first_name']; //Post first name
$lastname=$_POST['ssl_last_name']; //Post first name
$amount= $_POST['ssl_amount']; //Post Tran Amount
//$merchanttxnid = $_POST['ssl_merchant_txn_id']; //Capture user-defined ssl_merchant_txn_id as POST data
//$invoicenumber = $_POST['ssl_invoice_number']; //Capture user-defined ssl_invoice_number as POST data

//Follow the above pattern to add additional fields to be sent in curl request below.


$ch = curl_init();    // initialize curl handle
curl_setopt($ch, CURLOPT_URL,$url); // set url to post to
curl_setopt($ch,CURLOPT_POST, true); // set POST method
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// Set up the post fields. If you want to add custom fields, you would add them in Converge, and add the field name in the curlopt_postfields string.
curl_setopt($ch,CURLOPT_POSTFIELDS,
"ssl_merchant_id=$merchantID".
"&ssl_user_id=$merchantUserID".
"&ssl_pin=$merchantPinCode".
"&ssl_transaction_type=CCSALE".
"&ssl_first_name=$firstname".
"&ssl_last_name=$lastname".
"&ssl_get_token=Y".
"&ssl_add_token=Y".
"&ssl_amount=$amount"
);


curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_VERBOSE, true);


$sessiontoken = curl_exec($ch); // run the curl procss
curl_close($ch); // Close cURL


echo $sessiontoken;  //shows the session token.


 ?>

You can test this code using the following HTML page.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Lightbox Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://demo.convergepay.com/hosted-payments/PayWithConverge.js"></script>

    <script>
        function initiateLightbox() {
            var tokenRequest = {
                ssl_first_name: document.getElementById('name').value,
                ssl_last_name: document.getElementById('lastname').value,
                ssl_amount: document.getElementById('ssl_amount').value
            };
            $.post("lightboxccsaledevportal.php", tokenRequest, function (data) {
                document.getElementById('token').value = data;
                transactionToken = data;
            });
            return false;
        }
        function showResult(status, msg) {
            document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
            document.getElementById('txn_response').innerHTML = msg;
        }
        function openLightbox() {
            var paymentFields = {
                ssl_txn_auth_token: document.getElementById("token").value
            };
            var callback = {
                onError: function (error) {
                    showResult("error", error);
                },
                onCancelled: function () {
                    showResult("cancelled", "");
                },
                onDeclined: function (response) {
                    showResult("declined", JSON.stringify(response, null, '\t'));
                },
                onApproval: function (response) {
                    showResult("approval", JSON.stringify(response, null, '\t'));
                }
            };
            PayWithConverge.open(paymentFields, callback);
            return false;
        }

        function showResult(status, msg) {
            document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
            document.getElementById('txn_response').innerHTML = msg;
        }
    </script>
</head>

<body>

    <form name="getSessionTokenForm">
        <br><br><br><br>      
        First Name: <input type="text" id="name" name="ssl_first_name" size="25" value="John"> <br><br>
        Last Name: <input type="text" id="lastname" name="ssl_last_name" size="25" value="Smith"> <br>
        Transaction Amount: <input type="text" id="ssl_amount" name="ssl_amount" value="100.00"> <br> <br>
        <button onclick="return initiateLightbox();">Click to Confirm Order</button> <br>
    </form>
    <br><br>
    Transaction Token: <input id="token" type="text" name="token"> <br />
 
    <button onclick="return openLightbox();">Proceed to Payment</button> <br>
    </form>
    <br><br><br><br>
    Transaction Status:<div id="txn_status"></div>
    <br>
    Transaction Response:<div id="txn_response"></div>
</body>
</html>

• previousHosted Payments
• nextXML API