open menu
axerve docs
Integration types/Lightbox

Lightbox

REST

The Lightbox checkout is a simple popup that appears over the Ecommerce shopping cart, once your customer clicks the checkout button. This mode allows the buyer to follow the payment process without being redirected outside the Ecommerce, so that there is no doubt about the reliability of the checkout popup. The advantage of the Lightboxsolution is its usability, although its layout is not customisable.

Once the lightbox checkout has been integrated, your customer will view the popup as shown in the image below.

You’ll be able to decide, in every moment, which payment methods should be shown (such as: Credit Card, Paypal, Alipay, etc) choosing from the ones you’ve activated.

In case of a call from mobile devices, the Lightbox will be redirect on a new page.

warning

The lightbox is optimized to be visualized via browser and the compatibility with other channels is not guaranteed (web View or App, for instance). For other channels, it is recommended the use of the standard payment page (integration via SOAP) or the customized payment page, as the lightbox is not adaptable or adjustable.

MyBank is not available on the mobile version of the Lightbox.

How to integrate the Lightbox solution

As mentioned in previous chapters, Axerve Ecommerce Solutions Lightbox is the best and fastest way to accept payments. It is responsive, meaning that it will work on every screen (mobile, desktop…) without hassles and it is very easy to integrate too.

First, import the js script in your payment page:

  • Sandbox: https://sandbox.gestpay.net/pagam/javascript/axerve.js

  • Production: https://ecomm.sella.it/pagam/javascript/axerve.js

Then you must initiate the shopLogin:

axerve.lightBox.shop = shopLogin;

and use the PaymentToken and the PaymentID received at the previous step, by using the REST API payment/create (get further information in the technical documentation about REST APIapi link).

Once obtained these values, make the following javascript call:

axerve.lightBox.open(paymentID, paymentToken);

The lightbox page will show up, asking the customer to fill the credit card information fields or to choose other payment methods. For the sandbox environment, use one of our test credit cards.

When the payment is completed, the lightbox redirects the customer to the endpoint set in the backoffice.

It’s possible to overwrite the redirect functionality by passing a callback to the lightbox.

copy
axerve.lightBox.open(paymentID, paymentToken, callback);

When the payment is completed, the callback function is called. It receives a response object as argument:

copy
function callback(response) {
  console.log(response); 
}
/* example response:  
{ 
  error: { 
    code: null,
    description: null
  }, 
  paymentId: "1100274624", 
  responseURL: " http://<your-server>/?a=GESPAY65987&Status=OK&paymentID=1100274624",
  status: "OK"
}
*/

As shown in the example, the payment has been successfully processed. Let's se now how the responseURLis composed.

Once a payment is accepted or rejected, you can redirect your user to a new page. By setting up this configuration in the Merchant Back-Office Axerve Ecommerce Solutions will provide you with a link containing four parameters:

  • a, that is your shop login

  • Status, that will contain the status of the transaction

  • paymentID, a unique identifier that allows to query for the transaction status, cancel, update, etc.

  • paymentToken, a unique identifier for the payment

Examples of desktop and mobile flow

Desktop

Mobile

Is this page useful?

Previous
prevPAGAM
Next
Customised payment page (iFrame)next

Create your test account to try the service!

Register
Company with Single Shareholder belonging to the Maurizio Sella S.a.a. VAT Group with VAT no. 02675650028 – Tax Code 02686620028 – Biella Court registration no. 71524 – Piazza Gaudenzio Sella 1, 13900 Biella – Share Capital € 4,000,000.00 fully paid-in – Registered in the Reg. Impr. C.C.I.A.A. Monte Rosa Laghi Alto Piemonte – Registered in the Register of Payment Institutions.