@vouchmark/widget-react-native

React Native SDK for embedding the Vouchmark KYB verification widget via WebView.

Installation

npm install @vouchmark/widget-react-native react-native-webview
# or
yarn add @vouchmark/widget-react-native react-native-webview

iOS

cd ios && pod install

Required Permissions

iOS

Add the following to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for identity verification</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for liveness checks</string>

Android

Add the following to your AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />

Usage

Full-screen Widget

import { VouchmarkWidget } from "@vouchmark/widget-react-native";

function VerificationScreen() {
  return (
    <VouchmarkWidget
      widgetId="wgt_abc123"
      publicKey="pk_live_xyz"
      environment="live"
      applicant={{
        email: "[email protected]",
        businessName: "Acme Inc",
      }}
      onSuccess={(applicant) => {
        console.log("Verified:", applicant.id, applicant.status);
      }}
      onAbandon={() => {
        navigation.goBack();
      }}
      onError={(error) => {
        console.error("Widget error:", error.code, error.message);
      }}
      onStepCompleted={(step) => {
        console.log("Step completed:", step.moduleId, step.status);
      }}
    />
  );
}

Modal Widget

import { useState } from "react";
import { Button } from "react-native";
import { VouchmarkModal } from "@vouchmark/widget-react-native";

function App() {
  const [showWidget, setShowWidget] = useState(false);

  return (
    <>
      <Button title="Start Verification" onPress={() => setShowWidget(true)} />
      <VouchmarkModal
        visible={showWidget}
        onDismiss={() => setShowWidget(false)}
        animationType="slide"
        widgetId="wgt_abc123"
        publicKey="pk_live_xyz"
        environment="live"
        onSuccess={(applicant) => {
          console.log("Verified:", applicant.status);
        }}
        onError={(error) => {
          console.error(error.message);
        }}
      />
    </>
  );
}

Props

VouchmarkWidget

| Prop | Type | Required | Description | |------|------|----------|-------------| | widgetId | string | Yes | Your Vouchmark widget ID | | publicKey | string | Yes | Your Vouchmark public API key | | environment | "sandbox" \| "live" | Yes | API environment | | applicant | ApplicantInput | No | Pre-fill applicant data | | referenceId | string | No | Your internal reference ID | | sessionToken | string | No | Pre-authenticated session token | | locale | string | No | Widget language (default: "en") | | presentationStyle | "fullScreen" \| "modal" | No | Presentation hint | | onSuccess | (applicant: ApplicantResult) => void | No | Called when verification succeeds | | onAbandon | () => void | No | Called when user exits the widget | | onError | (error: WidgetError) => void | No | Called on widget error | | onStepCompleted | (step: StepResult) => void | No | Called when a verification step completes |

VouchmarkModal

Extends all VouchmarkWidget props, plus:

| Prop | Type | Required | Description | |------|------|----------|-------------| | visible | boolean | Yes | Controls modal visibility | | onDismiss | () => void | No | Called when modal is dismissed | | animationType | "slide" \| "fade" \| "none" | No | Modal animation (default: "slide") |

Types

interface ApplicantInput {
  email?: string;
  businessName?: string;
  registrationNumber?: string;
  phone?: string;
  tin?: string;
  jurisdiction?: string;
  industry?: string;
}

interface ApplicantResult {
  id: string;
  status: "approved" | "rejected" | "requires_review";
  riskScore: number | null;
  decisionReason: string | null;
  subject: ApplicantInput;
}

interface WidgetError {
  code: string;
  message: string;
}

interface StepResult {
  moduleId: string;
  status: "passed" | "failed" | "requires_review";
}

License

MIT