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.

The 3-D Secure service attempts to collect device data from the customer’s browser, but sometimes this process can time-out and cause the request to fail. You can account for these time-outs by manually collecting the 8 device data fields for the options array passed to the threeDS.createUI() call. The example below uses the base Gateway.js integration, but you can also collect the device data fields for any integrations documented in the ThreeDSService guides above. example.html 
<html>
    <body>
    <script src="https://gateway.bancedge.com/js/v1/Gateway.js"></script>
    <script>
        // Initialize Gateway.js
        const gateway = Gateway.create('collect_checkout_0000000000000000000000');

        // Initialize the ThreeDSService
        const threeDS = gateway.get3DSecure();

        // Create a 3DS Frame
        // This will start out 0px x 0px during fingerprinting.
        // If the customer is prompted to complete a challenge, it will resize automatically.

        // window.navigator.javaEnabled() is deprecated in modern browsers, use a try/catch to future-proof your code
        try {
            const userBrowserJavaEnabled = String(window.navigator.javaEnabled());
        } catch(e) {
            const userBrowserJavaEnabled = String(false);
        }

        const options = {
            cardNumber: "4111111111111111",
            cardExpMonth: "01",
            cardExpYear: "2024",
            currency: 'USD',
            amount: '10.00',
            email: 'none@example.com',
            phone: '8008675309',
            city: 'New York',
            state: 'NY',
            address1: '123 First St.',
            country: 'US',
            firstName: 'Jane',
            lastName: 'Doe',
            postalCode: '60001',
            browserJavaEnabled: userBrowserJavaEnabled,
            browserJavascriptEnabled: String(true),
            browserLanguage: window.navigator.language || window.navigator.userLanguage,
            browserColorDepth: String(window.screen.colorDepth),
            browserScreenHeight: String(window.screen.height),
            browserScreenWidth: String(window.screen.width),
            browserTimeZone: String(new Date().getTimezoneOffset()),
            deviceChannel: 'Browser'
        };

        const threeDSecureInterface  = threeDS.createUI(options);

        // Mount the threeDSecureInterface to the DOM
        // This begins the collection of 3DS data.
        threeDSecureInterface.start('body');

        // Listen for the threeDSecureInterface to ask the user for a password
        threeDSecureInterface.on('challenge', function(e) {
            console.log('Challenged');
        });

        // Listen for the threeDSecureInterface to provide all the needed 3DS data
        threeDSecureInterface.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,
                })
            })
        });

        // Listen for the threeDSecureInterface to indicate that the customer
        // has failed to authenticate
        threeDSecureInterface.on('failure', function(e) {
            console.log('failure');
            console.log(e);
        });

        // Listen for any errors that might occur.
        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',
    'ccnumber' => $jsonContent->cardNumber,
    'ccexp' => $jsonContent->cardExpMonth . substr($jsonContent->cardExpYear, -2),
    '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,
    'browser_java_enabled' => $jsonContent->browserJavaEnabled,
    'browser_javascript_enabled' => $jsonContent->browserJavascriptEnabled,
    'browser_language' => $jsonContent->browserLanguage,
    'browser_color_depth' => $jsonContent->browserColorDepth,
    'browser_screen_height' => $jsonContent->browserScreenHeight,
    'browser_screen_width' => $jsonContent->browserScreenWidth,
    'browser_time_zone' => $jsonContent->browserTimeZone,
    'device_channel' => $jsonContent->deviceChannel
);

$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;