prembly-react-native-kyc 1.0.0

package/README.md

@@ -0,0 +1,64 @@
+# prembly-react-native-kyc
+
+React Native version of the Prembly Identity KYC Verification SDK.
+
+## Installation
+
+```bash
+npm install prembly-react-native-kyc
+# Also install peer dependencies if not already present
+npm install react-native-webview
+```
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import { PremblyIdentityWidget } from 'prembly-react-native-kyc';
+
+const App = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Verify Identity" onPress={() => setIsVisible(true)} />
+      
+      <PremblyIdentityWidget
+        isVisible={isVisible}
+        widgetKey="your_widget_key_here"
+        widgetId="your_widget_id_here"
+        email="john@example.com"
+        phone="+2348012345678"
+        firstName="John"
+        lastName="Doe"
+        callback={(response) => {
+          console.log('Widget Response:', response);
+          if (response.status === 'closed' || response.status === 'error_display_closed' || response.status === 'success') {
+            setIsVisible(false);
+          }
+        }}
+      />
+    </View>
+  );
+};
+
+export default App;
+```
+
+## Properties
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `isVisible` | `boolean` | Yes | Controls the visibility of the widget modal |
+| `widgetKey` | `string` | Yes | Your Prembly widget public key |
+| `widgetId` | `string` | Yes | Your configuration/widget ID from the dashboard |
+| `email` | `string` | No | User's email address |
+| `phone` | `string` | No | User's phone number |
+| `firstName` | `string` | No | User's first name |
+| `lastName` | `string` | No | User's last name |
+| `metadata` | `object` | No | Additional metadata to pass to the session |
+| `callback` | `function` | Yes | Called with payload indicating `closed`, `error`, or `success` |
+
+## License
+MIT

package/dist/PremblyIdentityWidget.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface PremblyIdentityWidgetProps {
+    isVisible: boolean;
+    widgetKey: string;
+    widgetId: string;
+    email?: string;
+    phone?: string;
+    firstName?: string;
+    lastName?: string;
+    metadata?: Record<string, any>;
+    callback: (response: any) => void;
+}
+export declare const PremblyIdentityWidget: ({ isVisible, widgetKey, widgetId, email, phone, firstName, lastName, metadata, callback, }: PremblyIdentityWidgetProps) => React.JSX.Element | null;

package/dist/PremblyIdentityWidget.js

@@ -0,0 +1,209 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PremblyIdentityWidget = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_webview_1 = require("react-native-webview");
+const PremblyIdentityWidget = ({ isVisible, widgetKey, widgetId, email = '', phone = '', firstName = '', lastName = '', metadata = {}, callback, }) => {
+    const [webViewUrl, setWebViewUrl] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (isVisible) {
+            initializePremblyWidget();
+        }
+        else {
+            setWebViewUrl(null);
+            setIsLoading(true);
+            setErrorMessage(null);
+        }
+    }, [isVisible]);
+    const initializePremblyWidget = () => __awaiter(void 0, void 0, void 0, function* () {
+        setIsLoading(true);
+        setErrorMessage(null);
+        const apiUrl = 'https://api.prembly.com/api/v1/checker-widget/sdk/sessions/initiate/';
+        const requestBody = {
+            first_name: firstName,
+            last_name: lastName,
+            email: email,
+            phone: phone,
+            widget_key: widgetKey,
+            widget_id: widgetId,
+            metadata: metadata,
+        };
+        try {
+            const response = yield fetch(apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Accept': '*/*',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestBody),
+            });
+            if (response.ok) {
+                const responseData = yield response.json();
+                if (responseData.status === true && responseData.data) {
+                    const sessionId = responseData.data.session.session_id;
+                    setWebViewUrl(`https://sdk-live.prembly.com/?session=${sessionId}`);
+                }
+                else {
+                    const errorMsg = responseData.detail || 'Failed to get widget ID from API.';
+                    setErrorMessage(errorMsg);
+                    callback({ status: 'api_error', message: errorMsg });
+                }
+            }
+            else {
+                const text = yield response.text();
+                const errorMsg = `API call failed with status: ${response.status}. Response: ${text}`;
+                setErrorMessage(errorMsg);
+                callback({ status: 'api_error', message: errorMsg });
+            }
+        }
+        catch (e) {
+            const errorMsg = `Network error or data parsing error: ${e.message}`;
+            setErrorMessage(errorMsg);
+            callback({ status: 'network_error', message: errorMsg });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const handleMessage = (event) => {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            if (data.event) {
+                switch (data.event) {
+                    case 'closed':
+                        callback({ status: 'closed' });
+                        break;
+                    case 'error':
+                        callback({ status: 'error', message: data.message });
+                        break;
+                    case 'verified':
+                        callback({ status: 'success', data: data });
+                        break;
+                    default:
+                        console.warn('Received unknown event from WebView:', data.event);
+                        break;
+                }
+            }
+        }
+        catch (e) {
+            console.error('Error decoding JSON from WebView:', e);
+            callback({ status: 'error', message: `Failed to process message from WebView: ${e}` });
+        }
+    };
+    if (!isVisible)
+        return null;
+    return (<react_native_1.Modal visible={isVisible} animationType="slide" transparent={false}>
+      <react_native_1.SafeAreaView style={styles.container}>
+        {isLoading ? (<react_native_1.View style={styles.center}>
+            <react_native_1.ActivityIndicator size="large" color="#0000ff"/>
+            <react_native_1.Text style={styles.loadingText}>Initializing secure session...</react_native_1.Text>
+          </react_native_1.View>) : errorMessage ? (<react_native_1.View style={styles.center}>
+            <react_native_1.Text style={styles.errorText}>Error: {errorMessage}</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.button} onPress={initializePremblyWidget}>
+              <react_native_1.Text style={styles.buttonText}>Retry</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity style={styles.buttonSecondary} onPress={() => callback({ status: 'error_display_closed' })}>
+              <react_native_1.Text style={styles.buttonTextSecondary}>Cancel</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>) : (<react_native_webview_1.WebView source={{ uri: webViewUrl }} onMessage={handleMessage} injectedJavaScript={`
+              window.addEventListener("message", (event) => {
+                window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+              }, false);
+              true; // note: this is required, or you'll sometimes get silent failures
+            `} style={styles.webview} allowsInlineMediaPlayback mediaPlaybackRequiresUserAction={false}/>)}
+      </react_native_1.SafeAreaView>
+    </react_native_1.Modal>);
+};
+exports.PremblyIdentityWidget = PremblyIdentityWidget;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    center: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 16,
+        color: '#333',
+    },
+    errorText: {
+        color: 'red',
+        fontSize: 16,
+        textAlign: 'center',
+        marginBottom: 20,
+    },
+    webview: {
+        flex: 1,
+    },
+    button: {
+        backgroundColor: '#007bff',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+        marginBottom: 10,
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    buttonSecondary: {
+        backgroundColor: 'transparent',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+    },
+    buttonTextSecondary: {
+        color: '#007bff',
+        fontSize: 16,
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './PremblyIdentityWidget';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PremblyIdentityWidget"), exports);

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "prembly-react-native-kyc",
+  "version": "1.0.0",
+  "description": "React Native Identity KYC Verification library",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepack": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "prembly",
+    "kyc",
+    "identity"
+  ],
+  "author": "Prembly",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-webview": ">=11.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "react-native-webview": "^13.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.0.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}