Web SDK Integration Guide

Overview of flow
Web SDK integration flow
Integration Steps
Create Client
A client represents the individual for whom you need to perform various KYC checks.  A client is required to generate an SDK token. This must be done in your backend server.
Example request
cURL
Node.js
Python
PHP
.NET
curl -X POST https://api.complycube.com/v1/clients \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "type": "person",
          "email": "[email protected]",
          "personDetails":{
               "firstName": "John",
               "lastName" :"Doe"
          }
        }'
const { ComplyCube } = require("@complycube/api");
​
const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });
​
const client = await complycube.client.create({
  type: "person",
  email: "[email protected]",
  personDetails: {
    firstName: "John",
    lastName: "Doe"
  }
});
from complycube import ComplyCubeClient
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')
​
new_client = {
    'type':'person',
    'email':'[email protected]',
    'personDetails': {
        'firstName':'John',
        'lastName':'Doe'
    }
}
​
client = cc_api.clients.create(**new_client)
use ComplyCube\ComplyCubeClient;
​
$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');
$result = $ccapi->clients()->create(['type' => 'person',
                                     'email' => '[email protected]',
                                     'personDetails' => ['firstName' => 'John',
                                                         'lastName' => 'Doe']]);
using ComplyCube.Net;
using ComplyCube.Net.Resources.Clients;
​
var clientApi = new ClientApi(new ComplyCubeClient("<YOUR_API_KEY>"));
var newClient = new ClientRequest {
                           type = "person", 
                           email = "[email protected]",              
                           personDetails = new PersonDetails { 
                                                      firstName = "John", 
                                                      lastName = "Doe" 
                           }      
                }
                
var client = await clientApi.CreateAsync(newclientRequest);
Example response
The response will contain an id (the Client ID). It is required for the next step.
{
    "id": "5eb04fcd0f3e360008035eb1",
    "type": "person",
    "email": "[email protected]",
    "personDetails": {
        "firstName": "John",
        "lastName": "Doe",
    },
    "createdAt": "2020-01-04T17:24:29.146Z",
    "updatedAt": "2020-01-04T17:24:29.146Z"
}
Generate SDK token
SDK Tokens enable clients to securely send personal data from your web application's frontend to ComplyCube.
​To learn more about our SDK Token endpoint.
You must generate a new token each time you initialise the ComplyCube Web SDK.
Example request
cURL
Node.js
Python
PHP
.NET
curl -X POST https://api.complycube.com/v1/tokens \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "clientId":"CLIENT_ID",
          "referrer": "https://www.example.com/*"
        }'
const { ComplyCube } = require("@complycube/api");
​
const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });
​
const token = await complycube.token.generate("CLIENT_ID", {
    referrer: "https://www.example.com/*"
});
from complycube import ComplyCubeClient
​
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')
​
token = cc_api.tokens.create('CLIENT_ID','https://www.example.com/*')
 use ComplyCube\ComplyCubeClient;
​
$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');
​
$report = $ccapi->tokens()->generate('CLIENT_ID', 'https://www.example.com/*');
using ComplyCube.Net;
using ComplyCube.Net.Resources.SDKTokens;
​
var sdkTokenApi = new SDKTokenApi(new ComplyCubeClient("<YOUR_API_KEY>"));
​
var sdkTokenRequest  =  { clientId = "CLIENT_ID" , 
                        referrer = "https://www.example.com/*" }
​
var sdkToken = await sdkTokenApi.GenerateToken(sdkTokenRequest);
Example response
{
    "token": "<CLIENT_TOKEN>"
}
Import the SDK
To import our Web SDK,  you need to include it in your target page as follows:
<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Importing the Javascript library -->
    <script src="complycube.min.js"></script>
​
    <!-- Importing the default CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <!-- This is where the Web SDK will be mounted -->
    <div id="complycube-mount"></div>
  </body>
</html>
​
The links to complycube.min.js and style.css can be found in your developers portal.
Mount the SDK
With the SDK token you generated earlier, the Web SDK can be initialised in your frontend using the following Javascript code:
ComplyCube.mount({
  token: '<YOUR_WEB_SDK_TOKEN>',
  containerId: 'complycube-mount',
  stages: [
        'intro',
        'documentCapture',
        {
          name: 'faceCapture',
          options: {
            mode: "video"
          },
        },
        'completion'
  ],
  onComplete: function(data) {
    // Using the data attributes returned, request your
    // backend server to perform the necessary ComplyCube checks
    console.info("Capture complete")
  },
  onModalClose: function() {
    // Handle the modal closure attempt
    ComplyCube.updateSettings({ isModalOpen: false })
  },
  onError: function ({ type, message }) {
    if (type === 'token_expired') 
      // Request a new SDK token
    } else {
      // Handle other errors
      console.err(message)
    }
  },
});
The SDK mount parameters are described in the SDK Settings section below.
Perform Checks
Using the data returned by the SDK, via  the onComplete callback, you can now instruct your backend server to run the appropriate checks using the create a check endpoint. For instance, use:
documentCapture.documentId to run a document check​
documentCapture.documentId and faceCapture.livePhotoId to run an identity check​
documentCapture.documentId and faceCapture.liveVideoId  to run an enhanced identity check​
poaCapture.documentId to run a proof of address check​
If you have set up webhooks as described in our webhooks guide,  you will be notified once a check completes.
To retrieve the check results,  you can perform a get check request. 
Example request
cURL
Node.js
Python
PHP
.NET
curl -X GET https://api.complycube.com/v1/checks/{:checkId} \
     -H 'Authorization: <YOUR_API_KEY>' 
const { ComplyCube } = require("@complycube/api");
​
const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });
​
const check = await complycube.check.get("CHECK_ID");
from complycube import ComplyCubeClient
​
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')
​
check = cc_api.checks.get('CHECK_ID')
use ComplyCube\ComplyCubeClient;
​
$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');
​
$check = $ccapi->checks()->get('CHECK_ID');
using ComplyCube.Net;
using ComplyCube.Net.Resources.Checks;
​
var checkApi = new CheckApi(new ComplyCubeClient("<YOUR_API_KEY>"));
​
var check = await checkApi.GetAsync("CHECK_ID");
Miscellaneous
SDK Settings
Attribute
Description
token
Your client's SDK token. This is a required attribute.
language
The UI language. Valid values include:
1.en 
2.de
3.es
4.fr
5.it
6.nl
7.no
8.pl
9.pt
10.sv
11.zh
Default value: en
containerId
A string containing the ID of the container element that the Web SDK will mount to. 
This must be an empty element.
​
Default value: complycube-mount
stages
This is the array of verification stages your clients will go through. Stages can be provided as string values which include :  intro,  userConsentCapture faceCapture, documentCapture, poaCapture, and completion. 
​
Stages can be also provided as objects to enable customisations, as explained on the customisations page.
​
Default value: ['intro', 'faceCapture, 'documentCapture', 'completion']
onComplete
This callback function executes after the client completes the SDK flow.  You could then use a function to trigger a check creation on your backend server. 
​
Depending on the stages provided, data may include the following attributes:
documentCapture
documentId:  the uploaded identity document unique reference generated by ComplyCube.
documentType: the type of document uploaded.
faceCapture
liveVideoId: the captured video unique reference number generated by ComplyCube, OR;
livePhotoId: the captured photo unique reference number generated by ComplyCube.
poaCapture
documentId:  the uploaded ID document unique reference generated by ComplyCube.
documentType: the type of document uploaded.
onModalClose
This callback executes when your client tries to close the modal. You can then decide whether to close the modal or not by toggling the isModalOpenattribute using the updateSettingsmethod, as shown below.
onError
This callback executes when an error occurs. The error object has two attributes:
​
type: this can be either:
exception 
token_expired : indicates the SDK token provided has expired. When this occurs, a new SDK toke must be provided, as shown below.
message: a descriptive message of the error that has occurred.
onExit
This callback executes when your client exits the SDK verification flow prior to completion. The callback returns the exit reason e.g. USER_CONSENT_NOT_GRANTED
Updating SDK Settings
A number of settings can be updated at runtime as follows:
complycube = ComplyCube.mount({...})
​
// Replace the SDK token
complycube.updateSettings({ token: "NEW_SDK_TOKEN" });
...
// Open the modal
complycube.updateSettings({ isModalOpen: true });
​
//Close the modal
complycube.updateSettings({ isModalOpen: false });
​
Unmounting the SDK
If you are using the SDK within a Single Page Application (SPA), you can call unmount function to remove the SDK and reset its state.
complycube = ComplyCube.mount({...})
...
complycube.unmount()
​

Last modified 21d ago

Attribute	Description
`token`	Your client's SDK token. This is a required attribute.
`language`	The UI language. Valid values include: 1. `en` 2. `de` 3. `es` 4. `fr` 5. `it` 6. `nl` 7. `no` 8. `pl` 9. `pt` 10. `sv` 11. `zh` Default value: `en`
`containerId`	A string containing the ID of the container element that the Web SDK will mount to. This must be an empty element. Default value: `complycube-mount`
`stages`	This is the array of verification stages your clients will go through. Stages can be provided as string values which include : `intro`, `userConsentCapture` `faceCapture`, `documentCapture`, `poaCapture`, and `completion`. Stages can be also provided as objects to enable customisations, as explained on the customisations page. Default value: `['intro', 'faceCapture, 'documentCapture', 'completion']`
`onComplete`	This callback function executes after the client completes the SDK flow. You could then use a function to trigger a check creation on your backend server. Depending on the stages provided, `data` may include the following attributes: `documentCapture` `documentId`: the uploaded identity document unique reference generated by ComplyCube. `documentType:` the type of document uploaded. `faceCapture` `liveVideoId`: the captured video unique reference number generated by ComplyCube, OR; `livePhotoId`: the captured photo unique reference number generated by ComplyCube. `poaCapture` `documentId`: the uploaded ID document unique reference generated by ComplyCube. `documentType:` the type of document uploaded.
`onModalClose`	This callback executes when your client tries to close the modal. You can then decide whether to close the modal or not by toggling the `isModalOpen`attribute using the `updateSettings`method, as shown below.
`onError`	This callback executes when an error occurs. The error object has two attributes: `type`: this can be either: `exception` `token_expired` : indicates the SDK token provided has expired. When this occurs, a new SDK toke must be provided, as shown below. `message`: a descriptive message of the error that has occurred.
`onExit`	This callback executes when your client exits the SDK verification flow prior to completion. The callback returns the exit reason e.g. `USER_CONSENT_NOT_GRANTED`