Quick Links

How to Integrate the Web Client SDK for Device Data Collection into Your Website

After you sign up for Kount services and are provided a client ID, add the Web Client SDK to your website to integrate the Device Data Collector.

Requirements

The Web Client SDK is used client-side and served from the same domain as the website address rendered in the end-user's web browser. Use the latest versioned and unmodified release of the SDK.

Note

Integrating the Web Client SDK into your website with a minifier or bundler is not considered modification of the SDK.

Obtaining the SDK

The Web Client SDK is available through NPM or GitHub. To verify the integrity of any downloaded files, review the checksums on the Kount Developer website.

NPM 

To install the Web Client SDK, use the following code:

npm install @kount/kount-web-client-sdk

GitHub 

Download the Web Client SDK from the GitHub repository.

Configuring the SDK

Kount provides a template object in GitHub and NPM repositories called kount-web-client-config-template.js that illustrates the required format of the config object.

Example of the config object:

var kountConfig = {
"clientID": "999999", // clientID assigned to you by Kount   
"environment": "TEST", // Environment for data collection provided by Kount
"isSinglePageApp": false // Or true, changes some internal behavior
}

The following data is required to use the kount-web-client-sdk and is passed in using a configuration object:

environment

When testing your integration with the kount-web-client-sdk, do not load test. Test new features against the TEST environment. When you are done testing, execute in the PROD environment.

clientID

The clientID is the unique static value obtained from Kount during the initial account setup that does not change across solutions or environments.

isSinglePageApp

The isSinglePageApp has a boolean value of true or false, and is used to specify if the SDK is executing in the context of a Single Page Application (SPA).

sessionID

The sessionID has a character string with a maximum length of 32 randomized characters that must be generated by you. Only alphanumeric characters, dashes, or underscores can be used. The sessionID must remain unique to the originating user's website visit and cannot be reused for a minimum of 30 days.

For more information on Session IDs, review How to Create a Session ID for the Device Data Collector.

Optional Callback Configuration

Callbacks 

The Web Client SDK provides a callback system that allows you to execute custom code at certain points in the data collection process. You can use the kountConfig object to add one or more life cycle hooks with a function (or lambda) of your choice.

There are two callbacks: collect-begin and collect-end.

The collect-begin callback triggers when the collection starts, while the collect-end triggers after the collection ends.

When executed, the callback functions are given one parameter, which is a JavaScript object containing the sessionID: string and the KountClientID: string.

Example of adding optional callbacks (with arbitrary callback code) to the kountConfig object set up in base configuration:

kountConfig.callbacks = {
        'collect-begin': function (params) {
            // Any code you'd like to execute on collection start,
            //     such as quietly adding the session ID to your login form!
            var loginForm = document.forms['loginForm'];
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'kaId';
            input.value = params['SessionID'];
            loginForm.appendChild(input);
        },
        'collect-end': function (params) {
            // Any code you'd like to execute when we're done collecting data
            loginButton = document.getElementById('login_button');
            loginButton.removeAttribute('disabled');
        }
    };

Optional Debug Logging

If additional SDK logging is needed during SDK integration troubleshooting, an optional isDebugEnabled boolean node can be set to true within the configuration object passed into the kountSDK function.

When this value is set to true, more detailed SDK logging appears in the browser console. Set this value to false in production.

Example:

let kountConfig = {
    clientID: "YOUR_CLIENT_ID",
    environment: "TEST_OR_PROD_DEPENDING_ON_THE_ENVIRONMENT",
    isSinglePageApp: true,
    isDebugEnabled: true,
};

Integrating the SDK

Integrate the SDK on all core pages in your website’s workflow, particularly pages that lead to vulnerable actions such as a purchase, payment, security change, and contact info updates. For each user session, after the SDK is invoked and completed once on a page of your website, no further SDK interaction is required for that page.

SDK Versions

GitHub and NPM include two different variations of the SDK:

  • kount-web-client-sdk.js 

  • kount-web-client-sdk-bundle.js 

The kount-web-client-sdk.js is an JavaScript ES6 module, while the kount-web-client-sdk-bundle.js is transpiled to be backwards compatible with more browsers. Select the variation that best fits your business needs.

Invoking the SDK with kount-web-client-sdk.js

The kount-web-client-sdk.js module exports the SDK function with a default name. Assign a name when you import the SDK.

  1. Import the Web Client SDK:

    import kountSDK from "@kount/kount-web-client-sdk";
  2. Add the code to your JavaScript to invoke the SDK and call Kount. 

    Example:

    const sessionID = getSessionIDorGenerateOne();
    const kountConfig = {
        clientID: "YOUR_CLIENT_ID",
        environment: "TEST",
        isSinglePageApp: true,
    };
    kountSDK(kountConfig, sessionID);

Invoking the SDK with kount-web-client-sdk-bundle.js

The kount-web-client-sdk-bundle.js is backward compatible with multiple browsers and uses a global function called kountSDK.

  1. Download kount-web-client-sdk-bundle.js.

  2. Add kount-web-client-sdk-bundle.js with the other JavaScipt resources served by your website.

  3. Add kount-web-client-sdk-bundle.js by using script tags near the bottom of your page's body element to invoke the SDK and call Kount.

    Refer to the following example:

    // In-browser example to invoke the SDK
    <script src="./path/to/kount-web-client-sdk-bundle.js"></script>
    <script>
          const sessionID = getSessionIDorGenerateOne();
          const kountConfig = {
              clientID: "YOUR_CLIENT_ID",
              environment: "TEST",
              isSinglePageApp: true,
          };
          const sdk = kountSDK(kountConfig, sessionID);
          if (sdk) {
             // Any non-blocking post-initialization logic can go here
             console.log("Anti-fraud SDK activated!");
          }
    </script>
Was this article helpful?
11 out of 18 found this helpful