2. KnowSystem


LiteBox Hosted Payment Page

 
The LiteBox hosted payment page is an e-commerce solution that allows merchants to connect, send payment requests to the iVeri Payment Gateway without redirecting the cardholder away from their website. When implemented, the LiteBox pops up and sits in-front of the merchant’s website. From a merchant/cardholder point of view the LiteBox solution provides a more seamless checkout experience.

An example is available online on this link. To simulate the LiteBox behaviour, click on “Modal”.

 
Merchants’ developers can download the JavaScript library that handles the events to generate the button. The library can be found on the following URLs:
For Nedbank acquired merchants located in South Africa, Zimbabwe, Namibia, Lesotho and Swaziland: https://portal.nedsecure.co.za/scripts/jquery/js/jquery.litebox.js 

For merchants based in Kenya, Zimbabwe, Mauritius, Angola, Ghana:
https://portal.host.iveri.com/scripts/jquery/js/jquery.litebox.js 

For merchants acquired by CIM Finance in Mauritius: https://portal.merchant.cim.mu//scripts/jquery/js/jquery.litebox.js 

For merchants that acquired by banks affiliated to CSC: https://portal.cscacquiring.com/scripts/jquery/js/jquery.litebox.js

If you are not sure which of the URLs applies to your merchant account, please refer to your acquiring institution for confirmation.

LiteBox Implementation Steps:

Step One: In order for the LiteBox to render correctly to the device being used and to connect to the appropriate gateway end point the below must be defined on the head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="https://[endpoint]/scripts/bootstrap/css/bootstrap.min.css" />

<script src="https://[endpoint]/scripts/jquery/js/jquery.min.js"></script>

<script src="https://[endpoint]/scripts/bootstrap/js/bootstrap.min.js"></script>

<script src="https://[endpoint]/scripts/jquery/js/jquery.litebox.js"></script>

 NB: replace “[endpoint]” with the appropriate gateway address

Step Two: Place the LiteBox button to be used to trigger the LiteBox page in the body tag, the merchant developer can set the color, and the label of their own choosing for the button. Download the JavaScript library that handles the button on https://[endpoint]/scripts/jquery/js/jquery.litebox.js . Also, to note is that the jQuery uses an id attribute on the HTML elements.

<!-- Button HTML -->

 <a id="iveri-litebox-button">Make Payment</a>

 <!-- Modal HTML -->

 <div id="iveri-litebox"></div>

 
Step Three: Initialize the LiteBox. Define event handlers for the data that is to be returned from the gateway and when the LiteBox closes.

<script>

 liteboxInitialise(portalUrl); // pass the appropriate gateway address or endpoint

 function liteboxComplete(data) {

 /Place your code to handle the response here

 }

</script>

 
Step Four: Data returned to the merchant is JSON formatted The following parameters are some of the data elements returned to the merchant, some of which will only be returned if present in the request message. Data parameters that can be passed to the iVeri gateway as part of the transaction request can be referenced in 8.2 iVeri Lite Specification

  • Lite_Merchant_ApplicationId 
  • Lite_Merchant_Trace 
    Ecom_Payment_Card_Number 
  • Ecom_Payment_Card_ExpDate_Month 
  • Ecom_Payment_Card_ExpDate_Year 
  • MerchantReference
  • Lite_Order_Amount 
  • Lite_Order_Terminal 
  • Lite_Order_AuthorisationCode
  • Lite_BankReference 
  • Lite_TransactionDate 
  • Lite_TransactionIndex 
  • Lite_Payment_Card_Status 
  • Lite_Result_Description