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.

Securely collect payment details without exposing sensitive information.
1

1. Understand the Collect.js Component

This is a data collection and tokenization method used in conjunction with the Payment API.
2

2. Retrieve the Tokenization Key

Authentication is done via a tokenization_key generated in the Merchant Portal under the Security Keys settings page. Select Tokenization for the key type.This tokenization key can only be used with Collect.js.This key will be visible to customers in your website’s source code, so make sure you only use the tokenization key here.
3

3. Add the Collect.js Bundle

Paste the script tag into your payment page, preferably in the page header.
4

4. Add a payButton

Include a button with the ID of payButton inside your customer information form.Place this button somewhere that indicates the customer will be prompted to enter card or bank account information.
5

5. Receive a Payment Token

Once the customer enters payment details, a hidden field is inserted into your form with the payment_token.You will receive the token in the payment_token response variable after submitting the form.
6

6. Submit the Transaction

Submit the transaction via the Payments API and include the payment_token variable.

​
Example Request

<html>
  <script src="https://gateway.bancedge.com/token/Collect.js" data-tokenization-key="your-token-key-here"/>
  <body>
    <h1>CollectJS Payment Form</h1>
    <form action="/your-page.php" method="post">
      <table>
        <tr>
          <td>First Name</td>
          <td>
            <input size="30" type="text" name="fname" value="Test"/>
          </td>
        </tr>
        <tr>
          <td>Last Name</td>
          <td>
            <input size="30" type="text" name="lname" value="User"/>
          </td>
        </tr>
        <tr>
          <td>Address</td>
          <td>
            <input size="30" type="text" name="address" value="123 Main Street"/>
          </td>
        </tr>
        <tr>
          <td>City</td>
          <td>
            <input size="30" type="text" name="city" value="Beverley Hills"/>
          </td>
        </tr>
        <tr>
          <td>State</td>
          <td>
            <input size="30" type="text" name="state" value="CA"/>
          </td>
        </tr>
        <tr>
          <td>Zip</td>
          <td>
            <input size="30" type="text" name="zip" value="90210"/>
          </td>
        </tr>
        <tr>
          <td>Country</td>
          <td>
            <input size="30" type="text" name="country" value="US"/>
          </td>
        </tr>
        <tr>
          <td>Phone</td>
          <td>
            <input size="30" type="text" name="phone" value="5555555555"/>
          </td>
        </tr>
      </table>
      <br/>
      <button id="payButton" type="button">Submit Payment</button>
    </form>
  </body>
</html>

​
Example Response

{"success":true}
Pair this recipe with Collect.js, Quick Start Guide, and Integration Overview when you wire tokenization into a full checkout flow.