Back to main website
Docs

Web SDK Integration

Suggest Edits

📘

Before you start

Make sure you've obtained a token, server URL, and auth key from credolab

1. Declare dependencies

As the private registry is used, you'll need to add to your user or project .npmrc file (if this file is absent you have to create it alongside the package.json file) the following:

❗️

Token Replacement Instructions

Kindly note that exclusively the occurrence of $TOKEN with the $ symbol must be substituted with the provided key. The expression :username=token is to be retained in its original state.

@credolab:registry=https://npm.cloudsmith.io/credolab/common-sdk/
//npm.cloudsmith.io/credolab/common-sdk/:username=token
//npm.cloudsmith.io/credolab/common-sdk/:_password=$TOKEN

Run the following command in a terminal to install SDK:

npm install '@credolab/[email protected]'

npm install '@credolab/[email protected]'

Alternatively, you can add it to the dependencies section in your project package.json file

{ "dependencies": 
	{ "@credolab/credoapp-sdk": "$version" } 
}

{ "dependencies": 
	{ "@credolab/credoapp-iovation-sdk": "$version" } 
}

and then execute thenpm install command in the terminal.

⚠️

Note

Replace $TOKEN with actual token obtained from credolab

Also, replace X.Y.Z with module versions from Web SDK page.
The final result should look like this:

	npm install '@credolab/[email protected]'

add import declaration for CredoAppService or CredoAppServiceAsync

import { CredoAppService } from "@credolab/credoapp-sdk";

import { CredoAppServiceAsync } from "@credolab/credoapp-sdk";

import { CredoAppService } from "@credolab/credoapp-iovation-sdk";

import { CredoAppServiceAsync } from "@credolab/credoapp-iovation-sdk";

2. Build and use CredoAppService

      // CredoApp authentication key provided by credolab team
      var authKey = "AUTH_KEY"
      // value from CredoLab URLs table
      var url = "https://scoring-**.credolab.com";
      // reference number intended to associate the collected dataset with the lender's record
      var referenceNumber = "UNIQUE_REFERENCE_NUMBER";
      // init CredoAppService
      var credoAppService = new CredoAppService(url, authKey);
      credoAppService.startTracking();

      function stopTracking() {
        credoAppService.stopTracking()
      }

      function collectData() {
        credoAppService.stopTrackingAndCompleteAsync(referenceNumber).then(() => {
          alert(“Dataset has been uploaded and completed”);
        }, (e) => alert(e));
      }
 

      // CredoApp authentication key provided by credolab team
      var authKey = "AUTH_KEY"
      // value from CredoLab URLs table
      var url = "https://scoring-**.credolab.com";
      // reference number intended to associate the collected dataset with the lender's record 
      var referenceNumber = "UNIQUE_REFERENCE_NUMBER";
      // init CredoAppService
      var credoAppService = new CredoAppServiceAsync(url, authKey);
      credoAppService.startTrackingAsync(referenceNumber).then(() => {
        alert(“Event tracking started and dataset continuously uploaded”);
      }, (e) => alert(e));

      function stopTracking() {
        credoAppService.stopTrackingAsync().then(() => {
          alert(“Event tracking stopped”);
        }, (e) => alert(e));
      }

      function collectData() {
        credoAppService.stopTrackingAndCompleteAsync().then(() => {
          alert(“Dataset has been completed”);
        }, (e) => alert(e));
      }

❗️

Please note that it is not possible to start tracking with a new reference number if there is already ongoing tracking associated with another number. In such cases, an error will be returned, indicating that tracking for a certain reference number is currently in progress. To start tracking with a different reference number, the current tracking process must be stopped on the instance that initiated the tracking process.

🚧

To clearly identify a specific control, we highly recommend adding attribute id to the element. For example:

 <!DOCTYPE html>
<html>
<head>
    <title>Application form</title>
</head>
<body>
    <!-- Button with an ID -->
    <button id="submit_button">Click me</button>

    <!-- Input element with an ID -->
    <input type="text" id="first_name_input" placeholder="Enter your first name"/>

</body>
</html>

Next Steps

After successfully integrating our SDK, it is recommended to proceed with the following steps to utilise our platform effectively:

  1. Setting up your Reverse Proxy
  2. Uploading your Dataset
  3. Collecting your Dataset Insight or TruValidate(formerly known as iovation) Fraud Check. With the dataset uploaded, you can now get insights or perform TruValidate Fraud Checks to assess risk based on the device and transaction details provided.

If you have any further questions, please do not hesitate to contact us.

Video Tutorials

React Application Integration Tutorial

Angular Application Integration Tutorial

Updated 4 months ago