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 whitelisted.
  • 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 Electronic Check Gift Card
Sale - ccsale Sale - ecspurchase Sale - egcsale
Authorization Only - ccauthonly
Verification - ccverify
Get Token - ccgettoken

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

    a.  Click the SETUP button for Hosted payment modal setup. The Modal Setting page appears.
    b.  Click the Company Logo upload button and select the image file of your business logo.
    c.  Select the color scheme from the Theme field.
    d.  Select the Enable CAPTCHA checkbox to include a challenge-response test to the form.
    e.  Click Save.

Develop the Payment Processing program

The Payment Processing program that you will develop must include functions for the following:

  1. Session Token Request
  2. Redirect to Hosted Payment Form
  3. Call Back Response Handling

Session Token Request

Your session token request function must include the following parameters:

ssl_merchant_id
15 | numeric | required
Merchant ID
Elavon-assigned Converge account ID.
ssl_user_id
15 | alphanumeric | required
Converge User ID
The user ID with Hosted Payment API User status that can send transaction requests through the terminal.
ssl_pin
64 | alphanumeric | required
Terminal ID
Unique identifier of the terminal that will process the transaction request and submit to the Converge gateway.
Important: The ssl_user_id sending the transaction request must be associated with the terminal that will process the request.
ssl_transaction_type
20 | alphanumeric | required
Transaction Type
 
ssl_amount
11 | numeric | conditional
Transaction Amount
Data entry depends on the ssl_transaction_type value.

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 redirection request must come from a website URL that is registered with Converge.

Note: The Session Token Response is only valid for 15 minutes and can only be used once.

Redirect to Hosted Payment Form

Your Redirect to Hosted Payment Form function must include this parameter:

ssl_txn_auth_token
50 | alphanumeric | required
Session Token Response
 

The endpoints to POST the redirect request to are as follows:

  • 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);

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

//session tokens need to be URL encoded
$sessiontoken = urlencode($result);

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>
</head>
 <body>
<!--<body background="SIF.png">-->
<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;
        }
</script>

<script src="https://demo.convergepay.com/hosted-payments/PayWithConverge.js"></script>
    <script>
        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>