Skip to main content

Documentation Index

Fetch the complete documentation index at: https://bancofcalifornia-preview.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

See the Simple Inline Example for a basic web page using this implementation. While the Inline integration model offers many customizable options, you can also get started quickly with a basic form. First, install the following JavaScript on your payment form page, preferably in the HEAD element:
<script src="https://gateway.bancedge.com/token/Collect.js" data-tokenization-key="your-token-key-here" data-variant="inline"></script>
This script assumes that you’ve set up a payment form already. The form can be laid out however you’d like, but there should be block-level elements (div, for example) where the sensitive payment info will be collected. The following IDs are expected to be used in place of standard form inputs: For Credit Card Payments
  • ccnumber (Credit card number)
  • ccexp (Credit card expiration date)
  • cvv (CVV)
For Electronic Check Payments
  • checkname (Checking account name)
  • checkaccount (Checking account number)
  • checkaba (Routing number)
  • checktransit (Check transit)
  • checkinstitution (Check institution)
This is a very basic form that has integrated Inline Collect.js.
<form>
    <input type="text" id="first_name">
    <input type="text" id="last_name">
    <input type="text" id="address">
    <div id="ccnumber"></div>
    <div id="ccexp"></div>
    <div id="cvv"></div>
    <input type="submit" id="payButton">
</form>
These elements will have iframes inserted into them, contents of which will be hosted by the gateway. They will be full width text fields and will use the style sniffer to match the rest of your page. The ID values let us know what field is collecting what information from the customer. In addition to the empty fields, there must be a submit button in the form with an ID of “payButton.” When the customer clicks this to submit the form, Collect.js will collect the data from all inline iframes and submit the form with a new “payment_token” value which is an encrypted version of the payment data. After this form is submitted to your site, you can submit the data to the gateway via the Payment API. For example:
security_key: 3456h45k6b4k56h54kj6h34kj6445hj4
type: sale
amount: 4.00
payment_token: 3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8
first_name: Jane
last_name: Doe
address: 123 Main St.
If you are using checktransit and checkinstitution make sure you include currency of “CAD” when you submit the data to the gateway via the Payment API. For example:
security_key: 3456h45k6b4k56h54kj6h34kj6445hj4
type: sale
amount: 4.00
payment_token: 3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8
first_name: Jane
last_name: Doe
address: 123 Main St.
currency: CAD