Web SDK Integration Guide

Web SDK integration flow
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.
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);
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"
}
SDK Tokens enable clients to securely send personal data from your web application's frontend to ComplyCube.
You must generate a new token each time you initialise the ComplyCube Web SDK.
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);
{
"token": "<CLIENT_TOKEN>"
}
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>
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)
}
},
});
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:If you have set up webhooks as described in our webhooks guide, you will be notified once a check completes.
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");
Attribute | Description |
token | Your client's SDK token. This is a required attribute. |
language | The UI language. Valid values include:
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:
|
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:
|
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 |
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 });
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