@anankai/kyc-sdk

A React SDK for the KYC (Know Your Customer) verification flow. Uses the same UI, components, and API flow as the main app: Material UI, axios, multi-step flows, and backend integration.

Flow Overview

| Step | Description | |------|-------------| | 1. User Details | Full form (Settings): name, address, DOB, phone, gender, occupation, etc. Updates profile + negative screening API | | 2. KYC Questionnaire | Screening questions from API; dynamic types (text, radio, select, etc.); saves answers to backend | | 3. Document Upload | Proof of ID and Proof of Address with stepper: select type → upload front/back → details → review |

Installation

npm install @anankai/kyc-sdk
# or
yarn add @anankai/kyc-sdk
# or
pnpm add @anankai/kyc-sdk

Peer dependencies: React 17+

Quick Start – Full Flow (Production UI)

Use KYCFullFlow for the full production-style flow. No extra providers required — the SDK includes its own i18n, MUI theme, and styling:

import { KYCFullFlow } from '@anankai/kyc-sdk';

function KYCPage() {
  return (
    <KYCFullFlow
      config={{
        baseUrl: 'https://your-api.com',
        loginData: {
          access_token: 'your-jwt-token',
          user_id: 1,
          entity_id: 1,
          username: 'user',
          current_profile: 'wallet_user',
          user_state: 'kyc upload pending',
          selfregistered: true,
          owner_company: 1,
          programme_manager: 0,
          subprogramme_manager: 0,
          corporate: 0,
        },
        userProfile: {
          first_name: '',
          last_name: '',
          address_1: '',
          city: '',
          state: '',
          zip_code: '',
          country: 'United Kingdom',
          phone_number: '',
          birthdate: '',
          email: '',
          gender: 'Unknown',
        },
        onComplete: () => console.log('KYC completed'),
      }}
    />
  );
}

Asset setup (document upload icons)

For the document selection screen to show passport and utility bill icons, add these to your app's public/img/icons/:

• passport-icon.png
• utility-bill-icon.png

KYCFullFlow Config

| Prop | Type | Required | Description | |------|------|----------|-------------| | baseUrl | string | Yes | API base URL (e.g. https://api.example.com) | | loginData | object | Yes | Auth + user context: access_token, user_id, entity_id, username, current_profile, user_state, etc. | | userProfile | object | Yes | Pre-filled or empty profile: first_name, last_name, address_1, city, state, zip_code, country, phone_number, birthdate, email, gender | | onComplete | () => void | No | Called when user completes the full KYC flow | | onStepChange | (screen, index) => void | No | Called when navigating between screens | | onError | (error) => void | No | Called on API or validation errors |

Simplified Flow (KYCJourney)

For a simpler, customizable flow with feature flags:

import { KYCJourney } from '@anankai/kyc-sdk';

<KYCJourney
  config={{
    featureFlags: {
      steps: {
        questionnaire: { enabled: false },  // Skip questionnaire
      },
    },
    onComplete: () => {},
  }}
/>

Feature Flags (KYCJourney)

| Step | Option | Default | Description | |------|--------|---------|-------------| | userDetails | enabled | true | Show user details step | | questionnaire | enabled | true | Show questionnaire step | | questionnaire | skipWhenEmpty | true | Skip questionnaire if there are no questions | | documentUpload | enabled | true | Show document upload step |

| Feature | Description | |---------|-------------| | proofOfId | Allow Proof of ID document uploads | | proofOfAddress | Allow Proof of Address document uploads | | documentReview | Show document review step before submission |

Customization (KYCJourney)

Custom User Details

<KYCJourney
  config={{ onComplete: () => {} }}
  renderUserDetails={({ onSubmit, onBack }) => (
    <YourCustomForm onSubmit={onSubmit} onBack={onBack} />
  )}
/>

Questionnaire – Static or API

// Static questions
<KYCJourney
  config={{ onComplete: () => {} }}
  questionnaireQuestions={[
    { id: 'q1', question: 'Occupation?', type: 'text', required: true },
  ]}
/>

// Fetch from API
<KYCJourney
  config={{ onComplete: () => {} }}
  fetchQuestionnaire={async () => {
    const res = await fetch('/api/kyc/questions');
    const data = await res.json();
    return data.questions;
  }}
/>

Exports

import {
  KYCFullFlow,      // Full production flow
  KYCJourney,       // Simplified flow with feature flags
  UserDetailsStep,
  QuestionnaireStep,
  DocumentUploadStep,
  useFeatureFlags,
  loadFeatureFlags,
} from '@anankai/kyc-sdk';

import type {
  KYCSDKConfig,
  FeatureFlagsConfig,
  UserDetailsData,
  QuestionnaireQuestion,
  DocumentUploadData,
} from '@anankai/kyc-sdk';

API Calls & Endpoints

The SDK uses the same KYC flow as the main app (not SumSub). All API calls use your baseUrl and loginData.access_token from config.

| Step | Endpoints | |------|-----------| | User Details | POST update-user-profile, POST rt-main-user-kyc (negative screening) | | Questionnaire | GET get-entity-screening-questions, POST insert-users-screening-questions | | Document Upload | GET get-kyc-docs-needed-uploaded-by-user, GET get-acceptable-kyc-document-by-user, POST get-customer-file-pre-signed-url / get-staff-file-pre-signed-url, POST insert-kyc-document-status |

Request handlers (universalGetRequestWithParams, universalPostRequestWithData) add the Bearer token and lang automatically. See API_REFERENCE.md for full details.

Package Structure

@anankai/kyc-sdk
├── API_REFERENCE.md    # Full API docs (endpoints, flow, request handlers)
├── config/
│   ├── feature-flags.json
│   └── feature-flags.schema.json
└── dist/              # Built output (JS, CSS, types)

Publishing (Maintainers)

1. Replace YOUR_NPM_ACCESS_TOKEN in .npmrc with your npm token.

2. Run:

   npm run publish:public

License

MIT