Biometrics Module

const sdk = await OneSdk({
  mode: 'production',
  session: { token: 'your-token' }
});

// Create Biometrics component instance
const biometricsComponent = sdk.component('biometrics', options);

const biometricsComponent = sdk.component('biometrics', {
  provider: {
    name: 'onfido'
  }
});

checkProcessingPool: {
  enabled: true,      // Enable polling for check results
  wait_time: 5,       // Wait time between polls (seconds)
  max_attempts: 1     // Maximum polling attempts
}

const biometricsComponent = sdk.component('biometrics', {
  provider: {
    name: 'onfido',
    sdkVersion: '13.0.0',                // Onfido SDK version
    theme: 'light',                       // 'light' or 'dark'
    biometricsVariant: 'standard',        // 'standard', 'video', or 'motion'
    fallback: 'standard',                 // Fallback method: 'standard' or 'video'
    showExitButton: true,                 // Show exit button in UI
    crossDevicePolicy: 'disable',         // Cross-device flow: 'force' or 'disable'
    customUI: {                           // Custom UI configuration
      // See Onfido Custom UI options below
    }
  }
});

customUI: {
  // Typography
  fontWeightBody: 400,
  fontSizeBody: '16px',
  fontSizeSubtitle: '18px',
  fontSizeTitle: '24px',

  // Colors - Background
  colorBackgroundSurfaceModal: '#FFFFFF',
  colorBackgroundIcon: '#353FF4',
  colorBackgroundInput: '#FFFFFF',

  // Colors - Content/Text
  colorContentBody: '#475467',
  colorContentTitle: '#101828',
  colorContentSubtitle: '#344054',
  colorContentInput: '#101828',

  // Colors - Buttons (Primary)
  colorContentButtonPrimaryText: '#FFFFFF',
  colorBackgroundButtonPrimary: '#353FF4',
  colorBackgroundButtonPrimaryHover: '#2835E5',
  colorBackgroundButtonPrimaryActive: '#1F2AD1',

  // Colors - Buttons (Secondary)
  colorContentButtonSecondaryText: '#344054',
  colorBackgroundButtonSecondary: '#FFFFFF',
  colorBackgroundButtonSecondaryHover: '#F9FAFB',
  colorBackgroundButtonSecondaryActive: '#F2F4F7',

  // Colors - Buttons (Tertiary)
  colorContentButtonTertiaryText: '#344054',

  // Borders
  borderRadiusButton: '8px',
  borderStyleSurfaceModal: '1px solid #E4E7EC',
  colorBorderInput: '#D0D5DD',
  colorInputOutline: '#353FF4',

  // Additional UI elements
  colorIcon: '#667085',
  colorBackgroundInfoPill: '#F2F4F7',
  colorContentInfoPill: '#344054',
  // ... see Onfido documentation for full list
}

const biometricsComponent = sdk.component('biometrics', {
  provider: {
    name: 'sumsub',
    config: {
      theme: 'light',  // 'light' or 'dark'
      lang: 'en',      // Language code (optional)
      email: 'user@example.com',  // Pre-fill email (optional)
      phone: '+1234567890'        // Pre-fill phone (optional)
    },
    options: {
      addViewportTag: true,      // Add viewport meta tag
      adaptIframeHeight: true    // Auto-adjust iframe height
    }
  }
});

const biometricsComponent = sdk.component('biometrics', {
  provider: {
    name: 'incode',
    sdkVersion: '1.0.0'  // Incode SDK version (optional)
  }
});

const biometricsComponent = sdk.component('biometrics', {
  provider: {
    name: 'idverse',
    skipFaceScanIntro: false,     // Skip intro screen
    logoUrl: 'https://...',       // Custom logo URL
    retryCount: 3,                // Number of retry attempts
    skipLoad: false,              // Skip loading screen
    workerPathString: '/path',    // Custom worker path
    assetPathString: '/assets'    // Custom asset path
  }
});

const biometricsComponent = sdk.component('biometrics', {
  provider: {
    name: 'daon',
    products: ['faceLiveness']  // Array of Daon products to use
  }
});

mount(domElementOrSelector: string | HTMLElement): void

// Mount to element by ID
biometricsComponent.mount('#biometrics-container');

// Mount to element reference
const container = document.getElementById('biometrics-container');
biometricsComponent.mount(container);

unmount(): void

biometricsComponent.unmount();

biometricsComponent.on('vendor_sdk_loaded', ({ vendor }) => {
  console.log('SDK loaded for:', vendor);
});

biometricsComponent.on('vendor_sdk_failed_loading', ({ vendor, errorObject }) => {
  console.error(`Failed to load ${vendor} SDK:`, errorObject);
});

biometricsComponent.on('session_data_generated', ({ session }) => {
  console.log('Session created for entity:', session.entityId);
  console.log('Vendor parameters:', session.vendorParameters);
});

biometricsComponent.on('session_data_failed_loading', ({ code, message }) => {
  console.error('Session failed:', message);
});

biometricsComponent.on('ready', ({ domElement }) => {
  console.log('Biometrics UI ready');
  // Camera capture can begin
});

biometricsComponent.on('input_required', (info, status) => {
  console.log('Input required. Status:', status);
  console.log('User can retry to continue verification');

  // Handle different statuses
  showRetryMessage(status);
});

biometricsComponent.on('detection_complete', ({ provider }) => {
  console.log('Face captured successfully by:', provider);
  showMessage('Processing your biometric data...');
});

biometricsComponent.on('detection_failed', ({ message }) => {
  console.error('Capture failed:', message);
  showError(message || 'Biometric capture failed. Please try again.');
});

biometricsComponent.on('processing', ({ checkStatus, entityId }) => {
  console.log('Processing biometric data:', checkStatus);
  showLoadingIndicator();
});

biometricsComponent.on('results', ({ provider, checkStatus, document, entityId }) => {
  console.log('Verification complete');
  console.log('Provider:', provider);
  console.log('Status:', checkStatus);

  if (checkStatus === 'COMPLETE') {
    console.log('✓ Biometric verification passed');
    navigateToSuccess();
  } else {
    console.log('✗ Verification status:', checkStatus);
    handleFailure(checkStatus);
  }
});

biometricsComponent.on('session_closed', () => {
  console.log('Biometric session closed');
  cleanup();
});

biometricsComponent.on('session_interrupted', (interruptInfo) => {
  console.log('User interrupted verification');
  saveProgress();
  showMessage('You can resume verification later');
});

biometricsComponent.on('vendor_event', (eventData) => {
  console.log('Provider event:', eventData);
  // Handle provider-specific logic
});

import OneSdk from '@frankieone/one-sdk';

async function performBiometricVerification() {
  try {
    // Initialize SDK
    const sdk = await OneSdk({
      mode: 'production',
      session: { token: await getSessionToken() }
    });

    // Create Biometrics component with Onfido provider
    const biometricsComponent = sdk.component('biometrics', {
      provider: {
        name: 'onfido',
        theme: 'light',
        biometricsVariant: 'standard',
        showExitButton: true,
        fallback: 'video'
      },
      checkProcessingPool: {
        enabled: true,
        wait_time: 5,
        max_attempts: 3
      }
    });

    // Set up event listeners
    biometricsComponent.on('vendor_sdk_loaded', ({ vendor }) => {
      console.log(`${vendor} SDK loaded successfully`);
    });

    biometricsComponent.on('vendor_sdk_failed_loading', ({ vendor, errorObject }) => {
      console.error(`Failed to load ${vendor} SDK:`, errorObject);
      showError('Biometric verification unavailable. Please try again later.');
    });

    biometricsComponent.on('session_data_generated', ({ session }) => {
      console.log('Biometric session created for:', session.entityId);
    });

    biometricsComponent.on('session_data_failed_loading', ({ message }) => {
      console.error('Session failed:', message);
      showError('Failed to start biometric verification');
    });

    biometricsComponent.on('ready', ({ domElement }) => {
      console.log('Camera ready, please position your face');
      showInstruction('Position your face in the frame');
    });

    biometricsComponent.on('input_required', (info, status) => {
      console.log('Input required:', status);
      showRetryButton();
    });

    biometricsComponent.on('detection_complete', ({ provider }) => {
      console.log('Face captured successfully');
      showMessage('Processing your biometric data...');
      hideCamera();
    });

    biometricsComponent.on('detection_failed', ({ message }) => {
      console.error('Capture failed:', message);
      showError(message || 'Failed to capture face. Please try again.');
    });

    biometricsComponent.on('processing', ({ checkStatus }) => {
      console.log('Processing:', checkStatus);
      showLoadingIndicator();
    });

    biometricsComponent.on('results', ({ checkStatus, entityId }) => {
      console.log('Verification complete');

      if (checkStatus === 'COMPLETE') {
        console.log('✓ Biometric verification passed');
        navigateToSuccess();
      } else if (checkStatus === 'FAILED') {
        console.log('✗ Biometric verification failed');
        showFailureScreen();
      } else {
        console.log('Status:', checkStatus);
        handleOtherStatus(checkStatus);
      }
    });

    biometricsComponent.on('session_interrupted', () => {
      console.log('User interrupted verification');
      saveProgress();
    });

    biometricsComponent.on('session_closed', () => {
      console.log('Session closed');
      cleanup();
    });

    // Mount and start biometric verification
    biometricsComponent.mount('#biometrics-container');

  } catch (error) {
    console.error('Biometrics initialization failed:', error);
    throw error;
  }
}

#biometrics-container {
  width: 100%;
  min-height: 600px;
}