After you have been provided a client ID, add the Web Client SDK to your website to integrate the Device Data Collector.
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.
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.
There is 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:
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.
The clientID is the unique static value obtained during the initial account setup that does not change across solutions or environments.
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).
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.
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');
}
};
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,
};
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.
GitHub and NPM include one variation of the SDK: kount-web-client-sdk.js. The kount-web-client-sdk.js employs ES6 module syntax and is intended to be compatible with modern browsers and build systems.
The kount-web-client-sdk.js module exports the SDK function with a default name. Assign a name when you import the SDK.
-
Import the Web Client SDK:
import kountSDK from "@kount/kount-web-client-sdk";
-
Add the code to your JavaScript to invoke the SDK.
Example:
const sessionID = getSessionIDorGenerateOne(); const kountConfig = { clientID: "YOUR_CLIENT_ID", environment: "TEST", isSinglePageApp: true, }; kountSDK(kountConfig, sessionID);