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>
<script src="https://gateway.bancedge.com/js/v1/Gateway.js"></script>
<script>
   const gateway = Gateway.create('collect_checkout_0000000000000000000');
   const threeDS = gateway.get3DSecure();

   const options = {
       customerVaultId: "myCustomerVaultToken",
       currency: 'USD',
       amount: '1000'
   };

   const threeDSsecureInterface = threeDS.createUI(options);
   threeDSsecureInterface.start('body');

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

   threeDSsecureInterface.on('complete', function(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,
           })
       })
           .then(e => {

           })
   });

   threeDSsecureInterface.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',
   'customer_vault_id' => $jsonContent->customerVaultId,
   'amount' => '10.00',
   '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;
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

Create the interface object

Create an interface object with the details of the transaction. The details should include customerVaultToken, currency, and amount. The created interface will emit events that your application can subscribe to in order to respond to various results from processing.
4

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.
5

Attach callbacks

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

Send the 3DS data to your backend

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

Submit via the Payment API

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