Manage Saved Payment Method Lightbox

The Manage Saved Payment Method Lightbox allows payers to manage their saved payment methods without needing to log into the Acceptiva Payer Management portal.  

On production, use the domain https://pro.acceptiva.com/lightbox/payer_accts.js . The 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.

Incoming Parameters

Parameter Description
payer_id_str The Transaction ID String of the transaction
client_payer_id The optional ID assigned to the payer by the client.

**Note that you should pass one or the other of the above parameters (either a  payer_id_str OR a client_payer_id).

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.

Example Code Integration

<form id="form1" action="?" method="post" onsubmit="ACCPAYERACCTS.open_lightbox($('#form1 :input')); return false;">
<input type="text" name="payer_id_str" placeholder="Payer ID Str" value="">
<input id="my-btn" type="submit" value="Go">
</form>
<script id="accpayeraccts-js" type="text/javascript" src="https://sandbox.acceptivapro.com/lightbox/payer_accts.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
	payment_types: 3, // optional, default 3
};
ACCPAYERACCTS.init(options);

</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