Lightbox Reference

The Acceptiva lightbox allows you to create a transaction flow where sensitive payment data never passes through your server. Payer information such as name, address, and cart data are entered on your front end form and posted directly to our secure lightbox, where payment card or E-check data is submitted. The look of the lightbox is completely customizable by uploading your own CSS and logo image from the client manager.

Basic Code Integration

The basic code to integrate our AcceptivaPro lightbox is:

<script id="accpro-js" type="text/javascript" src="https://sandbox.acceptivapro.com/lightbox/main2.js"></script> 
<script text="text/javascript"> 
var accpro_api_key = 'INSERT_API_KEY_HERE'; // REQUIRED 
</script>

On production, use the domain https://pro.acceptiva.com/lightbox/main2.js. This code should go immediately before the </body> tag. You will be given a separate API keys for our sandbox and production environments; the sandbox key will not work in production, and vice versa. We will also need to whitelist any domains that you plan to launch the lightbox from in production.

To open the lightbox, make a call to ACCPRO.open_lightbox(…). The parameter to the function is an object with key/value pairs matching the API 'charge' spec.

Customizable Parameters

Optional parameters are as follows. Example values have been included to assist with formatting:

Parameter Description
css_url: ' https://path/to/your.css', (optional) You can load an external CSS file hosted on your own secure server to customize the look of your lightbox for each instance.
payment_types : 3, (optional, default 3) 1 for CC payments only, 2 for E-Check payments only, or 3 for both.
default_payment_type: 1, (optional, default 1) Only applicable if 'payment_types' is 3, and will then show either CC or E-Check as the default payment choice in the lightbox. The payment type can be changed by the user by using the controls in the lightbox.
merch_acct_id_str: { 1: 'Y9ZLEn35', 2: 'lx3SixBq'}, (optional, client account defaults will be used) The format for merch_acct_str is:
merch_acct_id_str: { PAYMENT_TYPE: 'INSERT_MERCH_ACCT_ID_STR_HERE' }

Either 1: '…' or 2: '…' can be omitted to use the default for that payment type; or the entire variable can be omitted to use the defaults for both.
show_address: false, (optional, default true) Displays or hides address fields in lightbox
show_cvv: false, (optional, default true) Displays or hides CVV field in lightbox
require_city: true, //optional, default false Requires the billing city to be entered
success_callback: function_name Called when the transaction is successfully processed
error_callback: function_name Called when the transaction is unsuccessful

Note that in your CSS, you can target the lightbox “logo” id to upload a logo image hosted on your secure server for each lightbox instance. In your CSS, you must code your logo as the background image, and specify the dimensions (200×50 recommended). In addition to hosting a logo and a CSS file externally, a default logo and CSS file can be applied using the tools present in the Acceptiva Client Manager. You may wish to download our main.css file as a starting point for customization.

Example CSS:

#logo 
{
     background: url('https://path/to/your/logo.png') no-repeat center;
     height: 50px; // Customize to actual image height 
}

Saved Payer Enhancement

You can enhance the lightbox by passing the API parameters payer_id_str or client_payer_id to ACCPRO.open_lightbox().  If either of these parameters are passed and match a valid saved payer in your organization that has active saved payment methods matching the specified payment type, then those saved payment methods will be presented to the payer in addition to the option to enter a new payment method.

Example Lightbox Code

This is an example call to hook the lightbox to your page with all possible options:

<script id="accpro-js" type="text/javascript" src="https://sandbox.acceptivapro.com/lightbox/main2.js"></script>
<script text="text/javascript">
var accpro_api_key = '<INSERT API KEY>'; // REQUIRED
var options =
{
       //css_url: 'https://path/to/your.css', // optional, must be HTTPS
       //default_payment_type: 1, // optional, default 1
       merch_acct_id_str: { 1: '154', 2: '32' }, // optional, client account 
defaults will be used
       payment_types: 3, // optional, default 3
       //show_address: false, // optional, default true
       //require_city: true, // optional, default false
       //show_cvv: false, // optional, default true
       error_callback: test,
       success_callback: test, // optional
};
ACCPRO.init(options);
ACCPRO.open_lightbox({ ...API 'charge' request parameters }); // This function is called when ready to open the lightbox; usually on button click
</script>

IE9 Integration

If you want your lightbox to work with Internet Explorer 9, you will need to add some extra code. At the very top of your payment form, add:

<!doctype html>

And in your <head> section, add:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

The Acceptiva lightbox is not compatible with versions of IE earlier than version 9.

Related Articles