vult-security-kyc 0.0.1 → 0.0.3

package/README.md

@@ -9,77 +9,188 @@ The client side construction for the KYC Widget
 * [Typescript](https://www.typescriptlang.org/)
 * [Yarn](https://yarnpkg.com//)
 
+## Installation
+
+Install the package using npm or yarn:
+
+```bash
+npm install vult-security-kyc
+# or
+yarn add vult-security-kyc
+```
+
 ## Usage
 
+The package provides two ways to use the KYC Widget:
+1. **Generic Class Usage** - Use the `KYCWidget` class directly for maximum flexibility
+2. **React Components** - Use the pre-built React components (`VULTIda` and `VULTIdv`)
+
+### Generic Class Usage
+
+The `KYCWidget` class can be used in any JavaScript/TypeScript application (not just React). This gives you full control over when and how the widget is initialized and started.
+
 ```typescript
- window.addEventListener("load", () => {
-    // Code to run once the entire page (including images) is fully loaded
-    idv = new VultKYC.KYCWidget({
-        onComplete: function () {
-            console.log("The Kyc is completed.")
-        },
-        onDismiss:function(){
-            // callback when dismissing modal by pressing/clicking on backdrop
-        },
-        Session_Type: VultKYC.IDV,
-    })
-    ida = new VultKYC.KYCWidget({
-        onComplete: function () {
-            console.log("The Kyc is completed.")
-        },
-        onDismiss:function(){
-            // callback when dismissing modal by pressing/clicking on backdrop
-        },
-        Session_Type: VultKYC.IDA,
-    })
+import { KYCWidget, IDV, IDA } from 'vult-security-kyc';
+
+// Initialize ID Verification widget
+const idvWidget = new KYCWidget({
+    Session_Type: IDV, // or "IDVerification"
+    env: "dev", // Options: "dev" | "development" | "stage" | "demo" | "prod" | "production"
+    onComplete: (response) => {
+        console.log("ID Verification completed", response);
+        // Handle completion logic here
+    },
+    onDismiss: () => {
+        console.log("Widget dismissed");
+        // Handle dismissal logic here
+    }
+});
+
+// Start ID Verification with a session ID
+function startVerification(sessionId: string) {
+    idvWidget.startIDVerify(sessionId);
+}
+
+// Initialize ID Authentication widget
+const idaWidget = new KYCWidget({
+    Session_Type: IDA, // or "IDAuthentication"
+    env: "prod",
+    onComplete: (response) => {
+        console.log("ID Authentication completed", response);
+    },
+    onDismiss: () => {
+        console.log("Widget dismissed");
+    }
 });
 
-function onPressIDV() {
-    idv.startIDVerify("e595a489-3706-4942-969d-17259db47b51")
+// Start ID Authentication with a session ID
+function startAuthentication(sessionId: string) {
+    idaWidget.startIDAuthenticate(sessionId);
 }
-function onPressIDA() {
-        ida.startIDAuthenticate("beba906a-76aa-4231-a610-763f6fef8855")
+
+// Close the widget programmatically
+function closeWidget() {
+    idvWidget.close(); // or idaWidget.close()
 }
 ```
 
-The object needed to instantiate KYC widget.
+**Configuration Interface:**
 
 ```typescript
-interface IKYCWidget {
-    Session_Type: "IDVerification" | "IDAuthentication",
-    onComplete?: () => void
-    onDismiss?: () => void
+interface KYCWidgetConfig {
+    Session_Type: "IDVerification" | "IDAuthentication";
+    env: "dev" | "development" | "stage" | "demo" | "prod" | "production";
+    onComplete?: (response?: any) => void;
+    onDismiss?: () => void;
 }
 ```
-## Development
 
-### Installing the Package Locally
+### IDA Component (ID Authentication)
 
-```bash
-# Step 1: Clear yarn cache for the specific package
-yarn cache clean kyc-widget
+For React applications, you can use the `VULTIda` component for ID Authentication. This component handles the widget lifecycle automatically.
 
-# Step 2: Verify it's cleared (should return nothing)
-yarn cache list | grep kyc-widget
+```typescript
+import { useState } from 'react';
+import { VULTIda } from 'vult-security-kyc/components';
+import type { VULTProps } from 'vult-security-kyc/components';
+
+function MyComponent() {
+    const [sessionId, setSessionId] = useState<string>('');
+
+    const handleComplete = () => {
+        console.log('ID Authentication completed');
+        // Handle completion logic
+    };
+
+    const handleDismiss = () => {
+        console.log('Widget dismissed');
+        // Handle dismissal logic
+    };
+
+    return (
+        <div>
+            <button onClick={() => setSessionId('your-session-id-here')}>
+                Start ID Authentication
+            </button>
+            
+            {sessionId && (
+                <VULTIda
+                    sessionId={sessionId}
+                    environment="prod"
+                    autoClose={true}
+                    onComplete={handleComplete}
+                    onDismiss={handleDismiss}
+                />
+            )}
+        </div>
+    );
+}
+```
 
-# Step 3: Remove the package from node_modules (you already did this)
-rm -rf node_modules/kyc-widget
+**VULTIda Props:**
 
-# Step 4: Remove yarn.lock entry if it exists (optional but recommended)
-# Manually edit yarn.lock to remove kyc-widget entries, or:
+```typescript
+interface VULTProps {
+    sessionId: string; // Required: The session ID for authentication
+    environment: "dev" | "development" | "stage" | "demo" | "prod" | "production"; // Required
+    autoClose?: boolean; // Optional: Automatically close widget on completion (default: true)
+    onComplete?: () => void; // Optional: Callback when authentication completes
+    onDismiss?: () => void; // Optional: Callback when widget is dismissed
+}
+```
 
-# Step 5: Clear yarn's entire cache (nuclear option if step 1 doesn't work)
-yarn cache clean
+### IDV Component (ID Verification)
 
-# Step 6: Remove node_modules and yarn.lock (if you want completely fresh install)
-rm -rf node_modules
-rm yarn.lock
+For React applications, you can use the `VULTIdv` component for ID Verification. This component handles the widget lifecycle automatically.
 
-# Step 7: Reinstall everything
-yarn install
+```typescript
+import { useState } from 'react';
+import { VULTIdv } from 'vult-security-kyc/components';
+import type { VULTProps } from 'vult-security-kyc/components';
+
+function MyComponent() {
+    const [sessionId, setSessionId] = useState<string>('');
+
+    const handleComplete = () => {
+        console.log('ID Verification completed');
+        // Handle completion logic
+    };
+
+    const handleDismiss = () => {
+        console.log('Widget dismissed');
+        // Handle dismissal logic
+    };
+
+    return (
+        <div>
+            <button onClick={() => setSessionId('your-session-id-here')}>
+                Start ID Verification
+            </button>
+            
+            {sessionId && (
+                <VULTIdv
+                    sessionId={sessionId}
+                    environment="dev"
+                    autoClose={true}
+                    onComplete={handleComplete}
+                    onDismiss={handleDismiss}
+                />
+            )}
+        </div>
+    );
+}
+```
 
-# Step 8: Then add your local package
-yarn add ./path/to/kyc-widget-2.0.0.tgz
+**VULTIdv Props:**
+
+```typescript
+interface VULTProps {
+    sessionId: string; // Required: The session ID for verification
+    environment: "dev" | "development" | "stage" | "demo" | "prod" | "production"; // Required
+    autoClose?: boolean; // Optional: Automatically close widget on completion (default: true)
+    onComplete?: () => void; // Optional: Callback when verification completes
+    onDismiss?: () => void; // Optional: Callback when widget is dismissed
+}
 ```
 
 ## Licensing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vult-security-kyc",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "typescript widget",
   "author": "Nexrage",
   "license": "ISC",
@@ -50,7 +50,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "isomorphic-dompurify": "^2.15.0"
+    "isomorphic-dompurify": "2.30.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",