LightBox

Overview

The Lightbox approach uses an <iframe> to embed the payment page as an overlay to your online shop.

When the Lightbox Mode is invoked, the merchants online shop is darkened out and the payment page appears as a floating element on top.

Integration

The simple integration uses a <script> tag inside your payment form to render the purple Lightbox button. Upon completion of the Checkout process, Lightbox submits your form to your server, passing along a transaction_response and any elements your form contains.

You can find a demo on this link Demo Lightbox

Transaction response input contains JSON stringified transaction response received as payment processing result. Example:

{
  "id":164091,
  "acquirer":"integration_acq",
  "order_number":"yYiM5TYKTU",
  "amount":100,
  "currency":"EUR",
  "outgoing_amount":100,
  "outgoing_currency":"EUR",
  "approval_code":"901199",
  "responseCode":"0000",
  "responseMessage":"approved",
  "reference_number":"000002833738",
  "systan":"164090",
  "eci":"06",
  "xid":null,
  "acsv":null,
  "cc_type":"visa",
  "status":"approved ",
  "created_at":"2019-05-23T15:31:44+02:00",
  "transaction_type":"purchase",
  "enrollment":"N",
  "authentication":null,
  "pan_token":null,
  "issuer":"xml-sim"
}

When adding the following code to your page, make sure that the form submits to your own server--side code within the action attribute:

<form action="your-server-side-code" method="POST">

<script src="https://ipgtest.monri.com/dist/lightbox.js" class="lightbox-button"
    data-authenticity-token=""
    data-amount="100"
    data-currency="USD"
    data-order-number=""
    data-order-info="Lightbox example"
    data-digest=""
    data-transaction-type="purchase"
    data-ch-full-name="Test"
    data-ch-zip="Test"
    data-ch-phone="Test"
    data-ch-email="test@test.com"
    data-ch-address="Adresa"
    data-ch-city="Grad"
    data-ch-country="Croatia"
    data-language="en">
</script>

</form>

Digest is calculated using following formula:

digest = SHA512(key + order_number + amount + currency)

With the following example data

• key: qwert123
• order_number: abcdef
• amount: 54321
• currency: EUR

the digest formula gives a result as follows:

digest = SHA512("2345kljbcdef54321EUR") # resulting with "f71b8c1560bd7511ba2f0307b3823c06dd39042cd77480543e3d7bf9f3eefa6debed252979ba8edc7a82d9f111d90f8e31c1c7ab5af39796b26e59a0b2d7cf98"

You can check digest on this link Calculate Digest

Data Parameters

Buyer's profile

Order details

Processing data

Additional info

Recurring payments (CIT/MIT)

Recurring (unscheduled) payments are done in two steps: a customer-initiated transaction (CIT) where the cardholder is present and consents to future charges, followed by one or more merchant-initiated transactions (MIT) charged later against the stored card without the cardholder present.

Step 1 — Initial transaction (CIT). Add data-future-usage (use unscheduled_recurring for charges with no fixed schedule, or recurring for a fixed schedule such as a subscription) to flag the card for future use, and data-tokenize-pan="true" to store it. On approval the callback returns a cit_id and a pan_token — persist both on your side.

<form action="your-server-side-code" method="POST">

<script src="https://ipgtest.monri.com/dist/lightbox.js" class="lightbox-button"
    data-authenticity-token=""
    data-amount="100"
    data-currency="EUR"
    data-order-number=""
    data-order-info="Initial recurring payment"
    data-digest=""
    data-transaction-type="purchase"
    data-ch-full-name="Test"
    data-ch-email="test@test.com"
    data-language="en"
    data-future-usage="unscheduled_recurring"
    data-tokenize-pan="true">
</script>

</form>

Step 2 — Merchant-initiated transaction (MIT). For each later charge, reuse the cit_id and pan_token from Step 1. Set data-merchant-initiated-transaction="true", pass the original data-cit-id, provide the stored token via data-supported-payment-methods, and set data-moto="true".

<form action="your-server-side-code" method="POST">

<script src="https://ipgtest.monri.com/dist/lightbox.js" class="lightbox-button"
    data-authenticity-token=""
    data-amount="100"
    data-currency="EUR"
    data-order-number=""
    data-order-info="Recurring charge"
    data-digest=""
    data-transaction-type="purchase"
    data-ch-full-name="Test"
    data-ch-email="test@test.com"
    data-language="en"
    data-merchant-initiated-transaction="true"
    data-cit-id="<initial CIT id>"
    data-supported-payment-methods="<pan token>"
    data-moto="true">
</script>

</form>

Note: the initial CIT is marked as an initial transaction and therefore triggers a 3D Secure challenge for the cardholder (a transaction without data-future-usage stays frictionless). This is expected behaviour required to establish consent for the subsequent MIT charges.

For the underlying transaction model and SCA exemptions, see Recurring payments.

Callback

You can set your callback URL under your merchant profile data if you want us to send a POST request with all the transaction parameters for each approved transaction.
POST request is sent to your endpoint in JSON format.
We expect HTTP 200 OK status response code to terminate the job, otherwise we’ll send the data periodically until we receive 200.
Here is a list of parameters included in callback request:

{
  "id":186562,
  "acquirer":"integration_acq",
  "order_number":"a6b62d07cc89aa0",
  "order_info":"order info for a6b62d07cc89aa0",
  "amount":100,
  "currency":"EUR",
  "ch_full_name":"John Doe",
  "outgoing_amount":100,
  "outgoing_currency":"EUR",
  "approval_code":"914783",
  "response_code":"0000",
  "response_message":"approved",
  "reference_number":"000002902038",
  "systan":"186561",
  "eci":"05",
  "xid":"fake authenticated xid +=",
  "acsv":"fake authenticated cavv +=",
  "cc_type":"visa",
  "status":"approved",
  "created_at":"2019-09-06T14:24:44.906+02:00",
  "transaction_type":"purchase",
  "enrollment":"Y",
  "authentication":"Y",
  "pan_token":null,
  "masked_pan":"434179-xxx-xxx-0044",
  "issuer":"zaba-hr",
  "number_of_installments":null,
  "custom_params":"{a:b, c:d}"
}

Migrating from data-whitelisted-pan-tokens

Simply replace key data-whitelisted-pan-tokens with a key data-supported-payment-methods and you are good to go!