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.

example.html 
<html>
<body>
    <label>Credit Card Number</label>
    <div id="ccnumber"></div>
    <label>CC EXP</label>
    <div id="ccexp"></div>
    <label>CVV</label>
    <div id="cvv"></div>
    <button id="payButton">Pay Now</button>

    <div id="threeDSMountPoint"></div>
    <script src="https://gateway.bancedge.com/js/v1/Gateway.js"></script>
    <script
       src="https://gateway.bancedge.com/token/Collect.js"
       data-tokenization-key="000000-111111-222222-333333"
    ></script>
    <script>
        const gateway = Gateway.create('checkout_public_00000000000000000000000000000000');
        const threeDS = gateway.get3DSecure();

        window.addEventListener('DOMContentLoaded', () => {
           CollectJS.configure({
               variant: 'inline',
               callback: (e) => {
                   const options = {
                       paymentToken: e.token,
                       currency: 'USD',
                       amount: '1000',
                       email: 'none@example.com',
                       phone: '8008675309',
                       city: 'New York',
                       state: 'NY',
                       address1: '123 Fist St.',
                       country: 'US',
                       firstName: 'John',
                       lastName: 'Doe',
                       postalCode: '60001'
                   };

                   const threeDSecureInterface = threeDS.createUI(options);
                   threeDSecureInterface.start('#threeDSMountPoint');

                   threeDSecureInterface.on('challenge', function(e) {
                       console.log('Challenged');
                   });

                   threeDSecureInterface.on('complete', function(e) {
                       console.log(e);
                       fetch('direct-post-back-end.php', {
                           method: 'POST',
                           body: JSON.stringify({
                               ...options,
                               cavv: e.cavv,
                               xid: e.xid,
                               eci: e.eci,
                               cardHolderAuth: e.cardHolderAuth,
                               threeDsVersion: e.threeDsVersion,
                               directoryServerId: e.directoryServerId,
                               cardHolderInfo: e.cardHolderInfo,
                           })
                       })
                   });

                   threeDSecureInterface.on('failure', function(e) {
                       console.log('failure');
                       console.log(e);
                   });
               }
           })

           gateway.on('error', function (e) {
               console.error(e);
           })
        })
    </script>
</body>
</html>
direct-post-back-end.php 
<?php
$jsonContent = json_decode(file_get_contents('php://input'));

$fields = array(
    'security_key' => '01234567890123456789012345678901',
    'payment_token' => $jsonContent->paymentToken,
    'amount' => '10.00',
    'email' => $jsonContent->email,
    'phone' => $jsonContent->phone,
    'city' => $jsonContent->city,
    'address1' => $jsonContent->address1,
    'country' => $jsonContent->country,
    'first_name' => $jsonContent->firstName,
    'last_name' => $jsonContent->lastName,
    'zip' => $jsonContent->postalCode,
    'cavv' => $jsonContent->cavv,
    'xid' => $jsonContent->xid,
    'eci' => $jsonContent->eci,
    'cardholder_auth' => $jsonContent->cardHolderAuth,
    'three_ds_version' => $jsonContent->threeDsVersion,
    'directory_server_id' => $jsonContent->directoryServerId
    'cardholder_info' => $jsonContent->cardHolderInfo,
);

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => 'https://secure.networkmerchants.com/api/transact.php',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => '',
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS => $fields
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;
This guide uses a minimal Collect.js integration for explanatory purposes. For more information about using Collect.js, please see the Collect.js documentation.
1

Initialize Gateway.js

Start by initializing Gateway.js with your public key. You can view your existing public keys or create a new one in the merchant portal’s Security Keys page.
2

Initialize the ThreeDSService

Initialize the ThreeDSService by calling gateway.getThreeDSService().
3

Render the Collect.js form

Render a Collect.js form to collect the credit card information. You should use Collect.js’s configure() method to supply a callback. The callback will create the 3DS interface and provide the Collect.js payment token in place of the credit card details.
4

Create the interface object

Create an interface object with the details of the transaction. The details should include paymentToken, currency, amount, email, city, address1, country, firstName, lastName, and postalCode. The created interface will emit events that your application can subscribe to in order to respond to various results from processing.
5

Mount the interface to the DOM

Mount the interface to the DOM by providing a selector. The frame will be mounted inside the provided element. This starts the authentication process.JavaScript frameworks such as React, Vue, or Angular may control the DOM in such a way that would cause the frame to become detached from the DOM. You may need to prevent them from managing the mount point in order to ensure that a mounted interface remains on the page.
6

Attach callbacks

Attach callbacks to listen for when the customer finishes authenticating themselves.
7

Send the 3DS data to your backend

Implement a callback for the complete event that sends the 3DS data to your backend.
8

Submit via the Payment API

Submit the 3DS data via the payment API with your private key.