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.

  1. Online Payments
  2. Collect.js
Quick start guide to integrate collect.js into your website, including creating an API key, adding collect.js script, adding payment fields, and more. This quick setup guide will get Collect.js running on your site in minutes.
1

Create an API Key

Collect.js authenticates with a public API key that can only be used to generate payment tokens. Create this in the Merchant Portal under Settings
Security Keys.
2

Add the Collect.js Script Tag to Your Checkout Page

Collect.js is loaded from the gateway with the following in your page header.
<script
	src="https://gateway.bancedge.com/token/Collect.js"
	data-tokenization-key="your-token-key-here"
	data-variant="inline"
></script>
3

Add Credit Card Fields to Your Form

Details on implementing Apple Pay, Google Pay, and e-check further down this page, but let’s start with the basic credit card fields.Collect.js is looking for specific “id” values on the page to embed its iframes, as well as what button submits the form. These ids can be anything you want, but this example uses the defaults.
<form action="pay.php" type="POST">
  <div id="ccnumber"></div>
  <div id="ccexp"></div>
  <div id="cvv"></div>
  <input id="payButton" type="submit" value="Submit Payment">
</form>
On page load, these divs will each have an iframe embedded as a child element. These iframes are hosted by the gateway and each will contain a single input element. _These inputs will be unstyled by default. The submit button will maintain your styling and will not have an iframe added, the id simply tells Collect.js what button submits the form relevant to the payment token.

​
Additional Solutions

Light Box offers an alternative pop-up style display for an even easier integration.Gateway.js allows you to add additional gateway services, such as Payer Authentication (3D Secure) and Kount (Advanced Fraud Prevention) to your implementation.
4

Submit the Payment Token with the Payment API

When the user fills out the embedded fields and submits the form, Collect.js will automatically add the payment_token variable and token value to the form submission, which in this case is being sent to the site’s /pay.php endpoint. From there your server should create the full Payment API request for what action you’re performing, including the payment_token.

​
Tip

For a smoother user experience, disable form submission until you have confirmed that the payment fields are successfully stored, as well as any other pre-transaction checks you perform.
That’s it, your server will get a response from the Payment API with the result of your request, and the payment token will be destroyed since it has been used.This is just a starting point meant to explain the general workflow for using Collect.js, but there is far more you can do to make this your own.

​
HTML Example File

The following is a functioning Collect.js integration using Apple Pay/Google Pay, custom CSS, product info, and uses callbacks to perform actions when specific events (like all payment fields pass validation) Use the below sample to see a barebones integration in action. 
<html>
  <head>
    <!-- This loads Collect.js from the server -->
    <script
      src="https://gateway.bancedge.com/token/Collect.js"
      data-tokenization-key="W7a2Z7-GuwUy8-AK4G68-MKAEFv"
    ></script>
  </head>
  <body>
    <h1>Payment Component Sample</h1>
    <!-- Create a form that will submit all customer data as well
			 as the Collect.js payment token to another page on your
			 server -->
    <form action="/your-page.php" method="POST">
      <!-- Normally not a visible input to the user, but here
				 for easy testing -->
      <div class="input">
        <span>Amount</span>
        <input type="text" name="amount" value="10.00" />
      </div>
      <!-- Customer name, email, and postal code for AVS verification -->
      <div class="input">
        <span>First Name</span>
        <input type="text" name="firstname" value="Example" />
      </div>
      <div class="input">
        <span>Last Name</span>
        <input type="text" name="lastname" value="User" />
      </div>
      <div class="input">
        <span>Email Address</span>
        <input type="text" name="email" value="[email protected]" />
      </div>
      <div class="input">
        <span>Postal Code</span>
        <input type="text" name="zip" value="12345" />
      </div>
      <!-- Credit card fields -->
      <div class="input">
        <span>Card Number</span>
        <div id="demoCcnumber"></div>
      </div>
      <div class="input">
        <span>Expiration Date</span>
        <div id="demoCcexp"></div>
      </div>
      <div class="input">
        <span>CVV</span>
        <div id="demoCvv"></div>
      </div>
      <!-- Submit the form to your server -->
      <button id="demoPayButton" type="button">Pay</button>
    </form>
    <script>
      // This will load Collect.js and render text fields
      // on page load, but you can call "CollectJS.configure"
      // whenever you want to load the payment form fields
      document.addEventListener("DOMContentLoaded", function () {
        CollectJS.configure({
          paymentSelector: "#demoPayButton",
          variant: "inline",
          invalidCss: {
            color: "#e74c3c",
            "border-color": "#e74c3c",
          },
          validCss: {
            color: "black",
            "border-color": "#2ecc71",
          },
          placeholderCss: {
            color: "darkgray",
            "background-color": "#ffffff",
          },
          focusCss: {
            color: "black",
            "border-color": "#4681f4",
          },
          fields: {
            ccnumber: {
              selector: "#demoCcnumber",
              title: "Card Number",
              placeholder: "0000 0000 0000 0000",
            },
            ccexp: {
              selector: "#demoCcexp",
              title: "Card Expiration",
              placeholder: "00 / 00",
            },
            cvv: {
              display: "show",
              selector: "#demoCvv",
              title: "CVV Code",
              placeholder: "123",
            }
          },
          price: "1.00",
          currency: "USD",
          country: "US",
          validationCallback: function (field, status, message) {
            if (status) {
              var message = field + " is now OK: " + message;
            } else {
              var message = field + " is now Invalid: " + message;
            }
            console.log(message);
          },
          timeoutDuration: 10000,
          timeoutCallback: function () {
            console.log(
              "The tokenization didn't respond in the expected timeframe.  This could be due to an invalid or incomplete field or poor connectivity"
            );
          },
          fieldsAvailableCallback: function () {
            console.log("Collect.js loaded the fields onto the form");
          },
          callback: function (response) {
            alert(response.token);
            var input = document.createElement("input");
            input.type = "hidden";
            input.name = "payment_token";
            input.value = response.token;
            var form = document.getElementsByTagName("form")[0];
            form.appendChild(input);
            form.submit();
          },
        });
      });
    </script>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        max-width: 400px;
        margin: 0 auto;
        padding: 15px;
        background-color: #f5f5f5;
        color: #333;
        font-size: 14px;
      }

      h1 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 20px;
        font-weight: 300;
        font-size: 24px;
      }

      form {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .input {
        margin-bottom: 15px;
      }

      .input span {
        display: block;
        margin-bottom: 4px;
        font-weight: 500;
        color: #555;
        font-size: 13px;
      }

      .input input {
        width: 100%;
        padding: 8px;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        font-size: 14px;
        box-sizing: border-box;
        transition: border-color 0.3s ease;
      }

      .input input:focus {
        outline: none;
        border-color: #4681f4;
      }

      #demoPayButton {
        width: 100%;
        padding: 12px;
        background-color: #4681f4;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 15px;
        transition: background-color 0.3s ease;
      }

      #demoPayButton:hover {
        background-color: #3f73dd;
      }

      #demoPayButton:active {
        transform: translateY(1px);
      }
    </style>
  </body>
</html>
Collect.js Advanced Integrations