Mobile SDK integration guide

Overview of flow

Mobile SDK integration flow

Supported SDKs

We natively support iOS, Android, React Native, Flutter, and Cordova. You will find the sample apps for our native SDKs below:

iOS

Android

React Native (BETA)

Flutter (BETA)

Cordova (BETA)

Requirements

iOS

• Swift 5.

• iOS 13 and above.

• Xcode 13 and above.

Android

• Android 5.0 (API level 21) and above.

• AndroidX.

• Kotlin 1.7 and above.

React Native

• React Native 0.71 and above.

• Please review the iOS and Android requirements.

Flutter

• Flutter 3.3.0 and above.

• Dart 3.1.3 and above.

• Please review the iOS and Android requirements.

Cordova

• Please review the iOS and Android requirements.

Getting started

Get started with our user guide for an overview of our core platform and its multiple features, or browse the API reference for fine-grained documentation of all our services.

1. Install the SDK

iOS

CocoaPods

1. Before using the ComplyCube SDK, install the CocoaPods Artifactory plugin by running the following command in your terminal:

   gem install cocoapods-art

2. To add the library, copy your repository credentials into a .netrc file to your home directory and setup the repository:

   pod repo-art add cc-cocoapods-release-local "https://complycuberepo.jfrog.io/artifactory/api/pods/cc-cocoapods-release-local"

   Remember to fetch your credentials from Jfrog using the Set Me Up button here.

3. Add plugin repos and install the pod using your Podfile:

    plugin 'cocoapods-art', :sources => [
      'cc-cocoapods-release-local',
      'trunk'
    ]
    ...
    platform :ios, '13.0' # Or above
   
    target 'YourApp' do
      use_frameworks!
      use_modular_headers!
      ...
      pod 'ComplyCubeMobileSDK'
      ...
    end

Application permissions

Our SDK uses the device camera and microphone for capture. You must add the following keys to your application Info.plist file.

1. NSCameraUsageDescription

<key>NSCameraUsageDescription</key>
<string>Used to capture facials biometrics and documents</string>

2. NSMicrophoneUsageDescription

<key>NSMicrophoneUsageDescription</key>
<string>Used to capture video biometrics</string>

Android

1. Start by adding your access credentials for the ComplyCube SDK repository to the gradle.properties file of your mobile app:

artifactory_user= "USERNAME"
artifactory_password= "ENCRYPTED PASS"
artifactory_contextUrl= https://complycuberepo.jfrog.io/artifactory

2. Then, update your project level build.gradle file with the ComplyCube SDK repository Maven settings:

buildscript {
    repositories {
        ...
    }
    dependencies {
        ....
        // Check for the latest version here: 
        // http://plugins.gradle.org/plugin/com.jfrog.artifactory
        classpath "org.jfrog.buildinfo:build-info-extractor-gradle:4+"
    }
    ...
}

allprojects {
    apply plugin: "com.jfrog.artifactory"
    ...
}

artifactory {
  contextUrl = "${artifactory_contextUrl}"  
  resolve {
    repository {
      repoKey = 'cc-gradle-release'
      username = "${artifactory_user}"
      password = "${artifactory_password}"
      maven = true
    }
  }
}

3. Update your module level build.gradle file with the SDK dependency:

dependencies {
    implementation "com.complycube:sdk:+"
}

React Native

1. Configure your npm registry to use the ComplyCube SDK repository by running the following command in your terminal:

npm config set registry https://complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/

2. Modify the .npmrc file in your home directory by adding the settings copied from jFrog to the file.

For users of Unix-based systems, the file is located at ~/.npmrc. For Windows users, this file can be found at C:\Users\{username}\.npmrc.

@complycube:registry=https://complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:_password=<PASSWORD>
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:username=<EMAIL>
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:email=<EMAIL>
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:always-auth=true

3. Install the React Native library by running:

npm i -s @complycube/react-native

4. Complete the steps in the iOS and Android tabs.

Flutter

1. Install the ComplyCube Flutter package by adding it to your pubspec.yaml file:

   dependencies:
     complycube: 
       hosted: 'https://complycuberepo.jfrog.io/artifactory/api/pub/cc-pub-release-local/'
       version: ^0.0.1

2. Then, add your token from jFrog to gain access to the Artifactory repository. Once you have the token, execute the following command:

   dart pub token add "https://complycuberepo.jfrog.io/artifactory/api/pub/cc-pub-release-local"

   and:

   dart pub get

3. iOS

   • Complete the steps 1 and 2 in the iOS tabs.

   • Add plugin repos by adding the snippet below to the top of your ios/PodFile and install the pod using the pod install command.

   • Add plugin repos and install the pod using your ios/Podfile:

     plugin 'cocoapods-art', :sources => [
       'cc-cocoapods-release-local',
       'trunk'
     ]
     ...
     
     platform :ios, '13.0' # Or above
     
     target 'Runner' do
       use_frameworks!
       use_modular_headers!
         ...
         ...
     end
     ...
     post_install do |installer|
      installer.pods_project.targets.each do |target|
        flutter_additional_ios_build_settings(target)
        target.build_configurations.each do |config|
          config.build_settings['ENABLE_BITCODE'] = 'NO'
          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
          config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
        end
      end
     end```

   • Complete Application permissions steps in the iOS tabs.

   Android

   • Complete the steps in the Android tab.

Cordova

1. Configure your npm registry to use the ComplyCube SDK repository by running the following command in your terminal:

npm config set registry https://complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/

2. Modify the .npmrc file in your home directory by adding the settings copied from jFrog to the file.

For users of Unix-based systems, the file is located at ~/.npmrc. For Windows users, this file can be found at C:\Users\{username}\.npmrc.

@complycube:registry=https://complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:_password=<PASSWORD>
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:username=<EMAIL>
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:email=<EMAIL>
//complycuberepo.jfrog.io/artifactory/api/npm/cc-react-native-npm-local/:always-auth=true

3. Install the Cordova library by running:

cordova plugin add @complycube/cordova-plugin

4. Complete the steps in the iOS and Android tabs.

2. Create a client

Before launching the SDK, your app must first create a client using the ComplyCube API.

A client represents the individual you need to perform identity verification checks on. This must be done on your mobile app backend server, not the mobile app itself.

Example request

cURL

curl -X POST https://api.complycube.com/v1/clients \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "type": "person",
          "email": "[e-mail]",
          "personDetails":{
               "firstName": "John",
               "lastName" :"Doe"
          }
        }'

Node.js

const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const client = await complycube.client.create({
  type: "person",
  email: "[e-mail]",
  personDetails: {
    firstName: "John",
    lastName: "Doe"
  }
});

Python

from complycube import ComplyCubeClient
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

new_client = {
    'type':'person',
    'email':'[e-mail]',
    'personDetails': {
        'firstName':'John',
        'lastName':'Doe'
    }
}

client = cc_api.clients.create(**new_client)

PHP

use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');
$result = $ccapi->clients()->create([
    'type' => 'person',
    'email' => '[e-mail]',
    'personDetails' => [
        'firstName' => 'John',
        'lastName' => 'Doe'
    ]
]);

.NET

using ComplyCube.Net;
using ComplyCube.Net.Resources.Clients;

var clientApi = new ClientApi(new ComplyCubeClient("<YOUR_API_KEY>"));
var newClient = new ClientRequest {
  type = "person",
  email = "[e-mail]",
  personDetails = new PersonDetails {
    firstName = "John",
    lastName = "Doe"
  }
}

var client = await clientApi.CreateAsync(newClient);

Example response

The response will contain an id (the Client ID), which is required for the next step.

{
  "id": "5eb04fcd0f3e360008035eb1",
  "type": "person",
  "email": "[e-mail]",
  "personDetails": {
    "firstName": "John",
    "lastName": "Doe"
  },
  "createdAt": "2023-01-01T17:24:29.146Z",
  "updatedAt": "2023-01-01T17:24:29.146Z"
}

3. Generate an SDK token

SDK Tokens enable clients to send personal data securely from your mobile app to ComplyCube. Learn more about our SDK Token endpoint.

You must generate a new token each time you initialize the ComplyCube Mobile SDK.

Example request

cURL

curl -X POST https://api.complycube.com/v1/tokens \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
           "clientId":"CLIENT_ID",
           "appId": "com.complycube.SampleApp"
         }'

Node.js

const { ComplyCube } = require("@complycube/api");
​
const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });
​
const token = await complycube.token.generate("CLIENT_ID", {
    appId: "com.complycube.SampleApp"
});

Python

from complycube import ComplyCubeClient
​
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')
​
token = cc_api.tokens.create('CLIENT_ID', appId='com.complycube.SampleApp')

PHP

use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$token = $ccapi->tokens()->generate('CLIENT_ID', 'com.complycube.SampleApp');

.NET

using ComplyCube.Net;
using ComplyCube.Net.Resources.SDKTokens;

var sdkTokenApi = new SDKTokenApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var sdkTokenRequest = {
  clientId = "CLIENT_ID",
  appId = "com.complycube.SampleApp"
}

var sdkToken = await sdkTokenApi.GenerateToken(sdkTokenRequest);

Example response

{
  "token": "<CLIENT_TOKEN>"
}

4. Prepare the stages

Set up the stages you wish to include in your flow.

iOS

let documentStage = DocumentStageBuilder()
  .setAllowedDocumentTypes(types: [
    .passport,
    .nationalIdentityCard(),
  ])
  .useLiveCaptureOnly(enable: false)
  .build()

Android

// Kotlin

val complyCubeBuilder = ComplyCubeSdk.Builder(this, callback =  { }).apply {
    withStages(
        Document(
            identityDocumentType = Passport(), DrivingLicence(),
            useLiveCaptureOnly = false
        ),
        SelfiePhoto()
    )
}

// Java

IdentityDocumentType[] identityDocumentTypes;

identityDocumentTypes = new IdentityDocumentType[1];

identityDocumentTypes[0] = new DrivingLicence();

Document document = new Document(
    // documentType
    null,
    // documentTypes
    identityDocumentTypes,
    // isGuidanceEnabled
    true,
    // useLiveCaptureOnly
    false,
    // isMLAssistanceEnabled
    true,
    // retryLimit
    5,
    // isNFCEnabled
    true
);

React Native

const stages = [
  {
    name: "intro",
    heading: "Green Bank ID verification",
  },
  {
    name: "documentCapture",
    showGuidance: false,
    useMLAssistance: true,
    retryLimit: 1,
    documentTypes: {
      passport: true,
      driving_license: ["GB", "FR"],
    },
  },
  "faceCapture",
];

Flutter

final stages = [
  {
    "name": 'intro',
    "heading": 'Green Bank ID verification',
  },
  {
    "name": 'documentCapture',
    "showGuidance": false,
    "useMLAssistance": true,
    "retryLimit": 1,
    "documentTypes": {
      "passport": true,
      "driving_license": ['GB', 'FR'],
    },
  },
  'faceCapture',
];

Cordova

const stages = [
  {
    name: "intro",
    heading: "Green Bank ID verification",
  },
  {
    name: "documentCapture",
    showGuidance: false,
    useMLAssistance: true,
    retryLimit: 1,
    documentTypes: {
      passport: true,
      driving_license: ["GB", "FR"],
    },
  },
  "faceCapture",
];

5. Initialize an SDK flow

You can now initialize a flow by setting the SDK Token, Client ID, and the flow stages. The sequence of stages you specify determines the order in which your client sees those stages.

iOS

let sdk = ComplyCubeMobileSDK.FlowBuilder()
  .withSDKToken("SDK_TOKEN")
  .withClientId("CLIENT_ID")
  .withStages([documentStage, selfieStage])
  .start(fromVc: self)

var clientAuth = ClientAuth("SDK_TOKEN", "CLIENT_ID")

Android

// Kotlin

val complyCubeBuilder = ComplyCubeSdk.Builder(this, callback =  { }).apply {
    withStages(
        Document(
            identityDocumentType = Passport(), DrivingLicence(),
            useLiveCaptureOnly = false
        ),
        SelfiePhoto()
    )
}.start(
    ClientAuth(
        token = "SDK_TOKEN",
        clientId = "CLIENT_ID"
    )
)

// Java

ComplyCubeSdk.Builder complycubeFlow =
    new ComplyCubeSdk.Builder(this, result - > {});

complycubeFlow.withStages(
    document,
    new SelfiePhoto()
);

complycubeFlow.start(new ClientAuth(
    "SDK_TOKEN",
    "CLIENT_ID"
));

React Native

import { ComplyCube } from "@complycube/react-native";
// ...

const settings = {
  clientID: "<CLIENT_ID>",
  clientToken: "<CLIENT_TOKEN>",
  stages: stages,
  // ... other settings
};

return (
  <View style={styles.container}>
    <ComplyCube settings={settings} />
  </View>
);

Flutter

import 'package:complycube_flutter/ComplyCubeMobileSDK.dart';
// ...

final settings = {
  "clientID": "<CLIENT_ID>",
  "clientToken": "<CLIENT_TOKEN>",
  "stages": stages,
  // ...
}

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('ComplyCube Integration'),
    ),
    body: ComplyCubeWidget(settings: settings),
  ),
);

Cordova

var complycube = cordova.require("complycube-sdk-cordova.ComplyCube");
//...

const settings = {
  clientID: "<CLIENT_ID>",
  clientToken: "<CLIENT_TOKEN>",
  stages: stages,
  // ... other settings
};

complycube.start(
    settings,
        (results) => console.log("Success"), 
        (cancel_event) => console.log("Cancel event fired"), 
        (error_event) => console.log("Error event fired"), 
        (custom_event) => console.log("Custom event fired"), 
        (token_event) => console.log("Token expiry event fired")
);

6. Perform checks

iOS

Using the results returned in the onSuccess callback, you can trigger your mobile backend to run the necessary checks on your client.

For example, use the result of a selfie and document capture as follows:

• result.documentId to run a Document Check.

• result.documentId and result.livePhotoId to run an Identity Check.

Android

Using the StageResults returned by the flow, you can trigger your mobile backend to run the necessary checks on your client.

For example, use the result of a selfie and document capture as follows:

• StageResult.Document.Id to run a Document Check.

• StageResult.Document.Id and StageResult.LivePhoto.Id to run an Identity Check.

React Native

Using the results returned in the onSuccess callback, you can trigger your mobile backend to run the necessary checks on your client.

For example, use the result of a selfie and document capture as follows:

• result.documentId to run a Document Check.

• result.documentId and result.livePhotoId to run an Identity Check.

Flutter

Using the results returned in the onSuccess callback, you can trigger your mobile backend to run the necessary checks on your client.

For example, use the result of a selfie and document capture as follows:

• result.documentId to run a Document Check.

• result.documentId and result.livePhotoId to run an Identity Check.

Cordova

Using the results returned in the onSuccess callback, you can trigger your mobile backend to run the necessary checks on your client.

For example, use the result of a selfie and document capture as follows:

• result.documentId to run a Document Check.

• result.documentId and result.livePhotoId to run an Identity Check.

Example request for a Document Check

cURL

curl -X POST https://api.complycube.com/v1/checks \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
            "clientId":"CLIENT_ID",
            "type": "document_check",
            "documentId":"DOCUMENT_ID"
         }'

Node.js

const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const check = await complycube.check.create("CLIENT_ID", {
    type: "document_check",
    documentId: "DOCUMENT_ID"
});

Python

from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

check = cc_api.checks.create(
    "CLIENT_ID", 
    "document_check", 
    documentId="DOCUMENT_ID"
)

PHP

use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$result = $ccapi->checks()->create('CLIENT_ID', [
    'type' => 'document_check',
    'documentId' => 'DOCUMENT_ID'
]);

.NET

using ComplyCube.Net;
using ComplyCube.Net.Resources.Checks;

var checkApi = new CheckApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var checkRequest = new CheckRequest {
  clientId = "CLIENT_ID",
  type = "document_check",
  documentId = "DOCUMENT_ID"
};

var check = await checkApi.CreateAsync(checkRequest);

7. Retrieve results

Your mobile backend can retrieve all check results using our API.

All our checks are asynchronous. 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

curl -X GET https://api.complycube.com/v1/checks/{:checkId} \
     -H 'Authorization: <YOUR_API_KEY>' 

Node.js

const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const check = await complycube.check.get("CHECK_ID");

Python

from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

check = cc_api.checks.get('CHECK_ID')

PHP

use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$check = $ccapi->checks()->get('CHECK_ID');

.NET

using ComplyCube.Net;
using ComplyCube.Net.Resources.Checks;

var checkApi = new CheckApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var check = await checkApi.GetAsync("CHECK_ID");

Stages

Each stage in the flow can be customized to create the ideal journey for your clients.

The snippet below demonstrates how to set up a customized flow using the ComplyCube Mobile SDK.

Learn more about our Mobile SDK stages.

iOS

let sdk = ComplyCubeMobileSDK.FlowBuilder()
  .withSDKToken("SDK_TOKEN")
  .withClientId("CLIENT_ID")
  .withStages([
    WelcomeStageBuilder().build(),
    UserConsentStageBuilder().build(),
    DocumentStageBuilder().build(),
    BiometricStageBuilder().build(),
    AddressStageBuilder().build(),
  ])
  .withEnableCompleteScreen(...)
  .withLanguage(...)
  .withLookAndFeel(...)
  .withEventHandler(...)
  .withCallbackHandler(...)
  .start(fromVc: self)

Android

// Kotlin

var complycubeFlow = ComplyCubeSdk.Builder(this, callback = ...)
  .withSDKToken("SDK_Token")
  .withClientId("CLIENT_ID")
  .withStages(
    Welcome(...),
    Consent(...),
    Document(...),
    SelfiePhoto(...),
    ProofOfAddress(...)
    Complete(...)
  )
  .withLookAndFeel(...)
  .withCustomLanguage(...)

complycubeFlow.start()

// Java

complycubeFlow.withStages(
    new Welcome(...),
    new UserConsent(...),
    new Document(...),
    new SelfiePhoto(...),
    new ProofOfAddress(...),
    new Complete(...)
);

complycubeFlow.withLookAndFeel(...);
complycubeFlow.withCustomLanguage(..);

React Native

const stages = [
  {
    name: 'intro',
    // ... other settings
  },
  {
    name: "consent",
    // ... other settings
  },
  {
    name: 'documentCapture',
    // ... other settings
  },
  {
    name: "faceCapture",
    // ... other settings
  },
  {
    name: "poaCapture",
    // ... other settings
  },
  {
    name: "complete",
    // ... other settings
  }
];

const settings = {
  clientID: "CLIENT_ID",
  clientToken: "SDK_TOKEN",
  stages: stages,
  language: "en",
  lookAndFeel: {/*...*/}
}

<ComplyCube
  settings={settings} 
  onSuccess={/*...*/} 
  onCancel={/*...*/}
  onError={/*...*/}
  onEventCallback={/*...*/}
/>

Flutter

final stages = [
  {
    name: 'intro',
    // ... other settings
  },
  {
    name: "consent",
    // ... other settings
  },
  {
    name: 'documentCapture',
    // ... other settings
  },
  {
    name: "faceCapture",
    // ... other settings
  },
  {
    name: "poaCapture",
    // ... other settings
  },
  {
    name: "complete",
    // ... other settings
  }
];

final settings = {
  "clientID": "<CLIENT_ID>",
  "clientToken": "<CLIENT_TOKEN>",
  "stages": stages,
  "language": "en",
  "lookAndFeel": {/*...*/}
}

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('ComplyCube Integration'),
    ),
    body: ComplyCubeWidget(settings: settings),
  ),
);

Cordova

const stages = [
  {
    name: 'intro',
    // ... other settings
  },
  {
    name: "consent",
    // ... other settings
  },
  {
    name: 'documentCapture',
    // ... other settings
  },
  {
    name: "faceCapture",
    // ... other settings
  },
  {
    name: "poaCapture",
    // ... other settings
  },
  {
    name: "complete",
    // ... other settings
  }
];

const settings = {
  clientID: "CLIENT_ID",
  clientToken: "SDK_TOKEN",
  stages: stages,
  language: "en",
  lookAndFeel: {/*...*/}
}

complycube.start(settings);

Look and feel

The SDK allows you to set colors to match your existing application or brand. You can customize the colors by setting the relevant values when building your flow.

Learn more about our appearance properties.

iOS

Creating a custom appearance

Before initiating the flow, create your own custom design and integrate it into your Flow Builder.

let ccLookAndFeel = LookAndFeel()
ccLookAndFeel.primaryButtonBgColor = .green
ccLookAndFeel.uiInterfaceStyle = .dark //can also be .light or .inherited

Applying your custom appearance

Set the custom appearance that you have created using the Flow Builder.

let sdk = ComplyCubeMobileSDK.FlowBuilder()
  .withLookAndFeel(ccLookAndFeel)
  .start(fromVc: self)

Android

// Kotlin

complycubeFlow.withLookAndFeel(
    lookAndFeel = LookAndFeel(
        primaryButtonBgColor = Color.RED,
        /* Can also be set to UIInterfaceStyle.LIGHT 
        or UIInterfaceStyle.INHERITED */
        uiInterfaceStyle = UIInterfaceStyle.DARK
    )
)

// Java

complycubeFlow.withLookAndFeel(new LookAndFeel(
    // primaryButtonBGColor
    Color.parseColor("#FF0000"),
    // uiInterfaceStyle
    UIInterfaceStyle.DARK,
    ...
));

React Native

const settings = {
  // ...
  lookAndFeel: {
    // Primary action button background color
    primaryButtonBgColor: "#FFFFFF",

    // Force SDK to 'dark', 'light', or 'inherit' mode
    uiInterfaceStyle: "dark",
  },
};

Flutter

final settings = {
  // ...
  "lookAndFeel": {
    // Primary action button background color
    "primaryButtonBgColor": '#FFFFFF',
    
    // Force SDK to 'dark', 'light', or 'inherit' mode
    "uiInterfaceStyle": "dark"
  }
}

To disable the header display in the ComplyCube SDK Widget on Android, please insert the following line into styles.xml:

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
  ...
  <item name="windowActionBar">false</item>
  <item name="windowNoTitle">true</item>
  ...
</style>
...

Cordova

const settings = {
  // ...
  lookAndFeel: {
    // Primary action button background color
    primaryButtonBgColor: "#FFFFFF",

    // Force SDK to 'dark', 'light', or 'inherit' mode
    uiInterfaceStyle: "dark",
  },
};

Appearance properties

Appearance Property	Description
primaryButtonBgColor	Primary action button background color.
primaryButtonPressedBgColor	Primary action button pressed background color.
primaryButtonTextColor	Primary action button text color.
primaryButtonBorderColor	Primary action button border color.
secondaryButtonBgColor	Secondary button background color.
secondaryButtonPressedBgColor	Secondary action button pressed background color.
secondaryButtonTextColor	Secondary action button text color.
secondaryButtonBorderColor	Secondary action button border color.
documentTypeSelectorBgColor	Document type selection button color.
documentTypeSelectorBorderColor	Document type selection button border color.
documentTypeSelectorTiteTextColor	Document type selection title text color.
documentTypeSelectorDescriptionTextColor	Document type selection description text color.
documentTypeSelectorIconColor	Document type selection icon color.
bodyTextColor	Screen body text color.
linkButtonTextColor	Links color.
headingTextColor	Title heading text color.
subheadingTextColor	Subheading text color.
infoPanelTitleColor	Information panel title color.
infoPanelDescriptionTextColor	Information panel description text color.
infoPanelBgColor	Information panel background color.
infoPanelIconColor	Information panel icon color.
errorPanelTitleColor	Error panel title color.
errorPanelDescriptionTextColor	Error panel description text color.
errorPanelBgColor	Error panel background color.
errorPanelIconColor	Error panel icon color.
cameraButtonBgColor	Camera capture button background color.
uiInterfaceStyle	Set the SDK to use dark mode, light mode, or system Inherited.

Localization

The SDK provides the following international language support:

• Arabic - ar 🇦🇪

• Dutch - nl 🇳🇱

• English - en 🇺🇸

• French - fr 🇫🇷

• German - de 🇩🇪

• Hindi - hi 🇮🇳

• Italian - it 🇮🇹

• Norwegian - no 🇳🇴

• Polish - po 🇵🇱

• Portuguese - pt 🇵🇹

• Spanish - es 🇪🇸

• Swedish - sv 🇸🇪

• Chinese (Simplified) - zh 🇨🇳

Result handling

To handle results you must implement the success, cancelled or error callbacks.

Upon an "on success" callback, you can initiate check requests directly from your mobile app backend server. This can be done using the IDs of the uploaded resources, returned in the result parameter.

iOS

extension ViewController: ComplyCubeMobileSDKDelegate {
  func onSuccess(_ result: ComplyCubeResult) {
   /*
    Handling successful results:
    Our default flow includes three components: an Identity Document,
    a Selfie (Live Photo), and a Proof of Address. Upon successful 
    completion, the 'result' parameter will contain `documentIds`and `livePhotoId`
    */
    print("The flow has completed - here are the ID's returned")
  }
  
  func onError(_ error: ComplyCubeError) {
    // Handle errors
    print("An error has occurred")
  }

  func onCancelled(_ error: ComplyCubeError) {
    // Handle cancellations
    print("The user has cancelled the flow or not accepted the terms")
  }  
}

Android

//Kotlin

//Register a result handler to process the outcome of the flow.
var complycubeFlow =
    ComplyCubeSdk.Builder(
        this,
        callback = { result ->
            when (result) {
                is Result.Success -> { 
                /*
                Handling successful results:
                Our default flow includes three components: an Identity Document,
                a Selfie (Live Photo), and a Proof of Address. Upon successful 
                completion, the 'Result' will contain an array of stage results.
                Each stage result provides the ID of the uploaded item:
                  - 'StageResult.Document.Id': the uploaded Document ID.
                  - 'StageResult.LivePhoto.Id': the uploaded Live Photo ID.
                  - 'StageResult.ProofOfAddress.Id': the uploaded PA Document ID.
                */
                }
                is Result.Cancelled -> { /* Handle Cancelled result */ }
                is Result.Error -> {
                    // Handle errors
                    when (result.errorCode) {
                        ComplyCubeErrorCode.UploadError -> {
                            // Handle Upload error
                        }
                        ComplyCubeErrorCode.BiometricStageCount -> {
                            // Handle BiometricStageCount error
                        }
                        // ...other error handlers
                    }
                }
                else -> {}
            }
        }
    )

complycubeFlow.start(clientAuth)

// Java

//Register a result handler to process the outcome of the flow.
ComplyCubeSdk.Builder complycubeFlow = new ComplyCubeSdk.Builder(this, result - > {
    if (result instanceof Result.Success) {
        /*
        Handling successful results:
        Our default flow includes three components: an Identity Document,
        a Selfie (Live Photo), and a Proof of Address. Upon successful 
        completion, the 'Result' will contain an array of stage results.
        Each stage result provides the ID of the uploaded item:
          - 'StageResult.Document.Id': the uploaded Document ID.
          - 'StageResult.LivePhoto.Id': the uploaded Live Photo ID.
          - 'StageResult.ProofOfAddress.Id': the uploaded PA Document ID.
        */
    } else if (result instanceof Result.Error) {
        switch (((Result.Error) result).getErrorCode()) {
            case ComplyCubeErrorCode.UploadError.INSTANCE:
                // Handle upload error
                break;
            case ComplyCubeErrorCode.BiometricStageCount.INSTANCE:
                // Handle BiometricStageCountError
                break;
                // ... other error handlers
            default:
        }
    } else if (result instanceof Result.Canceled) {
        // Handle Cancelled result
    }
    return null;
});

React Native

function onSuccess(results){
  /*
    Handling successful results:
    Our default flow includes three components: an Identity Document,
    a Selfie (Live Photo), and a Proof of Address. Upon successful 
    completion, the 'results' parameter will contain: 
      - "documentIds": ["xxxxx"]
      - "livePhotoIds": ["xxxxx"]
      - "poaIds": ["xxxxxx"]
  */
  console.log(results);
}

function onCancelled(){
  console.log("The user cancelled");
}

function onError(error){
  console.log(error);
}

return(<View>
    <ComplyCube 
      settings={settings}
      onSuccess={onSuccess}
      onCancel={onCancelled}
      onError={onError}
       />
  </View>
)

Flutter

void onSuccess(Map<String, dynamic> results) {
 /*
    Handling successful results:
    Our default flow includes three components: an Identity Document,
    a Selfie (Live Photo), and a Proof of Address. Upon successful 
    completion, the 'results' parameter will contain: 
      - "documentIds": ["xxxxx"]
      - "livePhotoIds": ["xxxxx"]
      - "poaIds": ["xxxxxx"]
  */
}

void onCancelled() {
  // Handle cancellations
}

void onError(ComplyCubeError error) {
  // Handle errors
}

ComplyCubeWidget(
  settings: settings,
  onSuccess: onSuccess,
  onCancelled: onCancelled,
  onError: onError,
)

Cordova

function onSuccess(results){
  /*
    Handling successful results:
    Our default flow includes three components: an Identity Document,
    a Selfie (Live Photo), and a Proof of Address. Upon successful 
    completion, the 'results' parameter will contain: 
      - "documentIds": ["xxxxx"]
      - "livePhotoIds": ["xxxxx"]
      - "poaIds": ["xxxxxx"]
  */
  console.log(results);
}

function onCancelled(){
  console.log("The user cancelled");
}

function onError(error){
  console.log(error);
}

complycube.start(
    settings,
        (results) => console.log("Success"), 
        (cancel_event) => console.log("Cancel event fired"), 
        (error_event) => console.log("Error event fired"), 
        (custom_event) => console.log("Custom event fired"), 
        (token_event) => console.log("Token expiry event fired")
);

If the SDK experiences any issues, the "on error" callback will return a ComplyCubeError. Learn more about our Mobile SDK error codes.

If the client exits the SDK flow before completion, the description provided by the "on cancelled" callback will specify the reason.

It's possible that the client advanced as far as the upload stage before choosing to cancel. In such cases, some data may already have been uploaded to their record.

Events tracking

The SDK tracks an array of events across the various stages of a flow.

If you want to implement your own user tracking, the SDK enables you to insert your custom tracking code for the tracked events.

iOS

To incorporate your own tracking, define a function and apply it using withEventHandler when initializing the FlowBuilder:

let sdk = ComplyCubeMobileSDK.FlowBuilder()
  .withEventHandler({ (event: Event) -> Void in
    // Insert custom user tracking code here
  })

Android

To incorporate your own tracking, define a function and apply it using withEventHandler when initializing the Builder:

// Kotlin

complycubeBuilder.withEventHandler(true) { event ->
    // Insert custom user tracking here
}

// Java

complycubeFlow.withEventHandler(true, analyticsEvent - >
    // Insert custom user tracking here
);

React Native

To incorporate your own tracking, define a function and apply it using the eventHandler property in your settings:

function myCustomEventHandler(event){
  // Insert custom user tracking code here
  console.log(event.code);
  console.log(event.message);
}

const settings = {
  eventHandler: {myCustomEventHandler}
  // ... other settings
}

Flutter

To incorporate your own tracking, define a function and apply it using the onCustomEvent property when initializing the Flutter widget:

void onCustomEvent(ComplyCubeCustomEvent event){
  switch(event.name){
    case 'BIOMETRICS_STAGE_SELFIE_CAMERA':
      print("The client reached capture camera for a selfie")
      break;
  }
}

ComplyCubeWidget(
  settings: settings,
  onCustomEvent: onCustomEvent,
  // ...
),

Cordova

To incorporate your own tracking, define a function and apply it using the eventHandler property in your settings:

function myCustomEventHandler(event){
  // Insert custom user tracking code here
  console.log(event.code);
  console.log(event.message);
}

complycube.start(
    settings,
        (results) => console.log("Success"), 
        (cancel_event) => console.log("Cancel event fired"), 
        (error_event) => console.log("Error event fired"), 
        myCustomEventHandler, 
        (token_event) => console.log("Token expiry event fired")
);

Token expiry handling

If you want to automatically manage token expiration, you can use a callback function to generate a new token and seamlessly continue the process with it.

iOS

let sdk = ComplyCubeMobileSDK.FlowBuilder()
  .withTokenExpiryHandler({ () -> String in
    // Insert custom token renewal code here
  })

Android

// Kotlin

var complyCubeBuilder = ComplyCubeSdk.Builder(this,
    callback = { result ->
        if (result is Result.Error) {
            if (result.errorCode is ComplyCubeErrorCode.ExpiredToken) {
                // Insert custom token renewal code here
            }
        }
    }
)

// Java

ComplyCubeSdk.Builder complyCubeBuilder =
    new ComplyCubeSdk.Builder(this, result - > {
        if (result instanceof Result.Error) {
            if (((Result.Error) result).getErrorCode() == ComplyCubeErrorCode.ExpiredToken.INSTANCE) {
                // Insert custom token renewal code here
            }
        }
        return null;
    });

React Native

function myCustomExpiryHandler(){
  // Insert custom token renewal code here
}

const settings = {
  tokenExpiryHandler: {myCustomExpiryHandler}
  // ... other settings
}

Flutter

String onTokenExpiry(String token){
  // Insert custom token renewal code here
}

ComplyCubeWidget(
  settings: settings,
  onTokenExpiry: onTokenExpiry,
  // ...
),

Cordova

function myCustomExpiryHandler(){
  // Insert custom token renewal code here
}

complycube.start(
    settings,
        (results) => console.log("Success"), 
        (cancel_event) => console.log("Cancel event fired"), 
        (error_event) => console.log("Error event fired"), 
        (custom_event) => console.log("Custom event fired"),
        myCustomExpiryHandler
);