MetaKYC SDK

A comprehensive React SDK for MetaKYC due diligence workflows with configurable API endpoints, dynamic form generation, and complete workflow step coverage.

Features

• ✅ Configurable API Endpoints - Support for both Host Controller and Application Service patterns
• ✅ Complete Workflow Coverage - All 9 workflow step types supported
• ✅ Dynamic Applicant Form - 23 configurable form fields for applicant creation
• 🎨 Backend-Driven Theming - Multi-tenant theme customization with 6 presets, custom logo, colors, and CSS (NEW v1.2.0)
• ✅ React Hooks - Clean API with hooks for each workflow step
• ✅ Pre-built Components - Ready-to-use UI components with Tailwind CSS
• ✅ Dynamic Form Validation - Automatic zod schema generation from API rules
• ✅ Identity Provider Integration - Sumsub, Onfido, and SardinAI support
• ✅ TypeScript - Full type safety with types generated from C# DTOs
• ✅ Dark Mode - Built-in dark mode support

Installation

npm install @metakyc/sdk
# or
yarn add @metakyc/sdk
# or
pnpm add @metakyc/sdk

Quick Start

1. Wrap your app with MetaKYCProvider

import { MetaKYCProvider } from '@metakyc/sdk';
import '@metakyc/sdk/styles';

function App() {
  return (
    <MetaKYCProvider
      config={{
        apiKey: process.env.METAKYC_API_KEY,
        tenantId: parseInt(process.env.TENANT_ID),
        baseUrl: process.env.METAKYC_BASE_URL,
        endpoints: { pattern: 'host-controller' },
        // Optional: Configure identity providers (e.g., SardinAI)
        identityProviders: {
          sardinai: process.env.SARDINAI_CLIENT_ID ? {
            clientId: process.env.SARDINAI_CLIENT_ID,
            environment: 'sandbox', // or 'production'
            region: 'us',           // 'us', 'eu', 'ca', or 'au'
            enableBiometrics: true,
            enablePortScanning: false,
          } : undefined,
        },
      }}
    >
      <YourApp />
    </MetaKYCProvider>
  );
}

2. Use the complete workflow component

import { KycWorkflow } from '@metakyc/sdk';

function KYCPage() {
  return (
    <KycWorkflow
      applicantId={applicantId}
      onComplete={(result) => console.log('Complete:', result)}
      onError={(error) => console.error('Error:', error)}
    />
  );
}

3. Or build custom UI with hooks

import { useKycWorkflow, useQuestionnaire } from '@metakyc/sdk';

function CustomKYC() {
  const { progress, currentStep, moveToNext } = useKycWorkflow(applicantId);
  const questionnaire = useQuestionnaire(applicantId);

  // Build your custom UI...
}

Documentation

Core Features

• 🎨 Theming System - Multi-tenant theme customization (NEW v1.2.0)
• Dynamic Form Configuration - Configure visible fields in applicant creation form
• Workflow Key Management - Configure and handle workflow keys and transitions
• External Reference ID - Required field for system integration
• Step Visibility - Configure which workflow steps appear in the UI
• Appropriateness Test - Quiz system with timer and retry logic
• Identity Expiration Handling - Managing expired identity verification sessions
• KYC Status Display - Rich status UI for completed/rejected/pending states
• SardinAI Integration - Automatic sessionKey generation for SardinAI Risk SDK

Backend Integration

• 🔧 Backend Theme Integration - Database schema, API endpoints, DTOs (NEW v1.2.0)
• 🎨 Panel Theme UI - Complete Panel UI implementation guide (NEW v1.2.0)

Migration & Changes

• Migration Guide - Migrate from custom form to dynamic configuration (v1.0.0 → v1.1.0)
• Changelog - Version history and changes

License

MIT