Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.smartcomply.com/llms.txt

Use this file to discover all available pages before exploring further.

SmartComply Web SDK

The SmartComply Web SDK enables you to rapidly and securely verify user identities and perform facial liveness checks directly in your web applications. This SDK is incredibly lightweight and mounts a beautifully animated drop-in widget right cleanly over your application layout, intercepting user webcam video and securely negotiating verifications with the SmartComply backend.

Features

  • Drop-in UI Modal — Clean, animated, and responsive design seamlessly overlaying via SmartComplyFlow.open().
  • Dynamic Routing — Adapts requirements dynamically, securely streaming permitted document types from your dashboard backend.
  • One-Time Use Policy — Built to strictly prevent duplicate verifications ensuring maximum anti-fraud integrity.
  • Nigeria & Global Identity — Fully handles Nigeria BVN/NIN validations, alongside passport mapping for International Users.
  • Hardware Agnostic Liveness — Operates using raw DOM webcams and MediaRecord capturing for cross-platform device capability.

Installation

You can install the SDK via npm or yarn:
npm install @smartcomply/sdk
# or
yarn add @smartcomply/sdk
(Advanced setup allows using the bundled payload located in ./dist/smartcomply.browser.js via a CDN).
To mount the SmartComply drop-in SDK properly, provide your authenticated API Key. The widget will automatically spawn a gorgeous welcome screen to guide the end-user into copy-pasting their unique Single-Use Client ID.
import { SmartComplyFlow } from '@smartcomply/sdk';

const launchVerification = () => {
  const sdkModal = SmartComplyFlow.open({
    apiKey: "your_live_api_key_here",
    environment: "production", // Optional, defaults to "sandbox"
    
    // Callback Executions
    onComplete: (result) => {
      console.log("Success! Verification Payload:", result);
      /* 
        Returns an object mapping your session flags:
        {
           entryId: 9942,
           status: "success",
           verificationResult: { ... }
        }
      */
    },
    onError: (error) => {
      console.error("SDK Authorization Refused:", error);
    },
    onClose: () => {
      console.log("User aborted verification.");
    }
  });
};
That’s it! When executed, the SDK handles the complete end-to-end user lifecycle:
  1. Validating their provided client_id dynamically.
  2. Collecting and OCR processing their NIN/BVN slips or International Passports.
  3. Engaging their hardware camera and testing Liveness checks automatically.
  4. Tearing down the DOM container cleanly and gracefully returning the Promise payload.

Headless API Architecture (Advanced usage)

If you don’t want to use our modal window, you can instantiate the underlying SmartComply Engine and orchestrate your custom Web UI natively using our methods.
import { SmartComply } from '@smartcomply/sdk/core';

// 1. Initialise the Engine using your Secret API Token
const sdk = new SmartComply({
  apiKey: "your_live_api_key_here",
  environment: "production"
});

// 2. Safely capture the Client ID from your custom UI input
const handleBegin = async (userProvidedClientId) => {
    
    // Attempt session login
    const sessionToken = await sdk.createSession(userProvidedClientId);

    // Call data verification
    const idVerified = await sdk.onboarding.verify({ 
      onboardingType: 'bvn',
      idNumber: '12345678912',
      country: 'NG'
    });

    // Directly bind the camera to a custom HTML Video container
    const livenessResult = await sdk.liveness.startCheck({
      videoContainer: document.getElementById('my-camera-div')
    });
}

Security & Architecture Limits

Client ID Redundancy Protection: Because the architecture handles zero-trust KYC policies, the active Client ID immediately vaporizes from the backend the second the final video liveness check computes. Attempting to restart that same Client ID again via createSession will throw a CLIENT_ID_ALREADY_USED status securely blocking entry. Ensure your backend dynamically handles spinning up fresh Client IDs per-user.