Installation

npm install @trustgate/react-sdk
# or
yarn add @trustgate/react-sdk
# or
pnpm add @trustgate/react-sdk

Quick Start

1. Get a Session Token

First, create a verification session from your backend:

curl -X POST https://api.bytrustgate.com/api/v1/sdk/access-token \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "external_user_id": "user_123",
    "email": "[email protected]",
    "flow_name": "default"
  }'

2. Use the SDK Component

import { VerificationFlow } from '@trustgate/react-sdk';
import '@trustgate/react-sdk/styles.css';

function VerificationPage() {
  return (
    <VerificationFlow
      sessionToken="sess_abc123..."
      onComplete={(result) => {
        if (result.outcome === 'approved') {
          // User verified successfully
          console.log('Verification complete:', result.verification_id);
        }
      }}
      onError={(error) => {
        console.error('Verification error:', error.message);
      }}
    />
  );
}

Features

• Document Verification - Passport, driver's license, national ID, residence permit
• Biometric Liveness - Active and passive liveness detection
• Face Matching - Compare selfie to document photo
• Wallet Verification - Cryptocurrency wallet address collection
• Responsive Design - Mobile-optimized, works on all screen sizes
• Customizable Theme - Light/dark mode and custom branding

Props

VerificationFlow

| Prop | Type | Required | Description | |------|------|----------|-------------| | sessionToken | string | Yes | Session token from /api/v1/sdk/access-token | | onComplete | (result: VerificationResult) => void | No | Called when verification completes | | onError | (error: SDKError) => void | No | Called on error | | onStepComplete | (step: StepName, data: object) => void | No | Called after each step | | theme | 'light' \| 'dark' | No | Theme mode (default: 'light') | | themeOptions | SDKThemeOptions | No | Custom theme colors | | baseUrl | string | No | API base URL (for self-hosted) | | className | string | No | Additional CSS class | | style | CSSProperties | No | Inline styles |

VerificationResult

interface VerificationResult {
  verification_id: string;
  outcome: 'approved' | 'pending_review' | 'denied' | 'error';
  confidence_score?: number;
  outcome_reason?: string;
  redirect_url?: string;
}

SDKThemeOptions

interface SDKThemeOptions {
  primaryColor?: string;    // e.g., '#0066FF'
  accentColor?: string;
  borderRadius?: number;    // e.g., 8
  fontFamily?: string;      // e.g., 'Inter, sans-serif'
}

Customization

Custom Theme

<VerificationFlow
  sessionToken={token}
  theme="light"
  themeOptions={{
    primaryColor: '#0066FF',
    borderRadius: 12,
    fontFamily: 'Inter, system-ui, sans-serif'
  }}
/>

Dark Mode

<VerificationFlow
  sessionToken={token}
  theme="dark"
/>

Verification Steps

The SDK guides users through these steps (configurable per flow):

1. Consent - Terms and privacy policy acceptance
2. Personal Info - Name, date of birth, address
3. Document - Upload government-issued ID
4. Selfie/Liveness - Face verification
5. Review - Summary before submission

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Camera access requires HTTPS in production.

Documentation

• Integration Guide
• API Reference
• Webhook Events

Support

• Documentation: docs.bytrustgate.com
• Email: [email protected]
• Dashboard: app.bytrustgate.com

License

MIT - see LICENSE