Simple Lightbox Implementation

See the Simple Example for a basic web page using this implementation.

The simplest way to integrate is by pasting in the following script tag to your web page (preferably in the header) where you’ll be collecting payments:

<script src="https://gateway.bancedge.com/token/Collect.js" data-tokenization-key="your-token-key-here"></script>

With this script, you just need to add a button with the ID of “payButton” to your page inside a form where you ask for the customer’s information (name, address, email, etc.) You should make this button somewhere that indicates to the customer that they will be prompted to enter their card information and check out. Collect.js will find this button and display the below form in a lightbox over your website.

Diagram available on the live BancEdge reference page.

The customer will enter their card information and when they submit this mini-form, the lightbox will disappear, a hidden field will be inserted into your form with the “payment_token” value, and your form will be submitted.

You can then submit the transaction to the gateway with the Payment API using the “payment_token” variable.