omnipay-reactnative-sdk 1.2.7 → 1.3.0

package/src/components/views/FaceVerification.tsx

@@ -0,0 +1,130 @@
+import React, { Fragment, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
+import { faceVerificationSdkBaseUrl } from '../../lib/config';
+
+type OmnipayProps = {
+  color: string;
+  env: 'dev' | 'prod';
+  preAuthKey: string;
+  onVerificationSuccessful: (facAuthToken: string) => void;
+};
+
+type Status = 'error' | 'loading' | 'success';
+
+export const FaceVerification = ({
+  color,
+  env,
+  preAuthKey,
+  onVerificationSuccessful,
+}: OmnipayProps): React.JSX.Element => {
+  const webviewRef = useRef<WebView>(null);
+  const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
+  const webHost = getWebHost();
+  const webUrl = getWebUrl();
+
+  const onWebviewMount = `
+        window.nativeOs = ${Platform.OS};
+        true;
+      `;
+
+  function getWebHost() {
+    return faceVerificationSdkBaseUrl[env];
+  }
+
+  function getWebUrl() {
+    const themeColor = color.includes('#') ? color.split('#')[1] : color;
+    return `${webHost}auth?theme=${themeColor}&preAuthKey=${preAuthKey}`;
+  }
+
+  function handleMessage(e: WebViewMessageEvent) {
+    try {
+      if (e.nativeEvent && e.nativeEvent.data) {
+        const data = JSON.parse(e.nativeEvent.data);
+
+        if (data.type === 'FACE_AUTH_COMPLETE' && data.faceAuthToken) {
+          onVerificationSuccessful(data.faceAuthToken);
+        }
+      }
+    } catch (error) {
+      // Handle parsing errors silently
+    }
+  }
+
+  if (!preAuthKey) {
+    return <Text>Preauth key is required</Text>;
+  }
+
+  if (preAuthKey.length !== 64) {
+    return <Text>Invalid preauth key</Text>;
+  }
+
+  if (color.length < 3) {
+    return <Text>Invalid color</Text>;
+  }
+
+  if (!['dev', 'prod'].includes(env)) {
+    return <Text>Invalid environment</Text>;
+  }
+
+  return (
+    <Fragment>
+      <View style={styles.full}>
+        <WebView
+          source={{
+            uri: webUrl,
+          }}
+          style={styles.webview}
+          injectedJavaScriptBeforeContentLoaded={onWebviewMount}
+          onMessage={handleMessage}
+          ref={webviewRef}
+          onLoadEnd={() => setWebviewStatus('success')}
+          mediaPlaybackRequiresUserAction={false}
+          allowsInlineMediaPlayback={true}
+          javaScriptEnabled={true}
+          domStorageEnabled={true}
+          allowsFullscreenVideo={true}
+        />
+        {webviewStatus === 'loading' && (
+          <View style={styles.webviewLoader}>
+            <ActivityIndicator size="small" color={color} />
+          </View>
+        )}
+      </View>
+    </Fragment>
+  );
+};
+
+const styles = StyleSheet.create({
+  hide: {
+    display: 'none',
+  },
+  full: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  webview: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  webviewLoader: {
+    zIndex: 3,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+});

package/src/components/views/PaymentLinking.tsx

@@ -15,6 +15,7 @@ type OmnipayProps = {
   publicKey: string;
   phoneNumber?: string;
   customerRef?: string;
+  userRef?: string;
   amount: number;
   sessionId: string;
   orderId: string;
@@ -30,6 +31,7 @@ export const PaymentLinking = ({
   publicKey,
   phoneNumber,
   customerRef,
+  userRef,
   amount,
   sessionId,
   orderId,
@@ -56,7 +58,7 @@ export const PaymentLinking = ({
       phoneNumber || ''
     }&customerRef=${customerRef || ''}&amountPending=${amount}&sessionId=${
       sessionId || ''
-    }&orderId=${orderId || ''}`;
+    }&orderId=${orderId || ''}&userRef=${userRef || ''}`;
   }
 
   async function onWebviewMessage(e: WebViewMessageEvent) {
@@ -94,7 +96,7 @@ export const PaymentLinking = ({
     return <Text>Invalid environment</Text>;
   }
 
-  if (!customerRef) {
+  if (!customerRef && !userRef) {
     if (!phoneNumber) {
       return <Text>Phone number is required</Text>;
     }

package/src/lib/config.ts

@@ -7,3 +7,8 @@ export const clientSdkBaseUrl = {
   dev: 'https://omnipay-websdk.vercel.app/',
   prod: 'https://websdk.ompy.ng/',
 };
+
+export const faceVerificationSdkBaseUrl = {
+  dev: 'https://faceauth-dev.ompy.ng/',
+  prod: 'https://faceauth.ompy.ng/',
+};

package/src/utils/buildUrlWithMetadata.ts

@@ -1,11 +1,23 @@
+/**
+ * Filters out undefined, null, and empty string values from params
+ */
+export function filterParams(
+  params: Record<string, string | number | boolean>
+): Record<string, string | number | boolean> {
+  return Object.entries(params).reduce((acc, [key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      acc[key] = value;
+    }
+    return acc;
+  }, {} as Record<string, string | number | boolean>);
+}
+
 export default function buildUrlWithMetadata(
   baseUrl: string,
   metadata: Record<string, string | number | boolean>
 ): string {
-  const query = Object.entries(metadata)
-    .filter(
-      ([_, value]) => value !== undefined && value !== null && value !== ''
-    )
+  const filtered = filterParams(metadata);
+  const query = Object.entries(filtered)
     .map(
       ([key, value]) =>
         `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`

package/src/utils/encryption.ts

@@ -0,0 +1,38 @@
+/* eslint-disable no-bitwise */
+
+import { filterParams } from './buildUrlWithMetadata';
+
+const ENCRYPTION_KEY = 'OmN1p@y$3cUr3K3y2024SDK';
+
+export function encryptData(text: string): string {
+  let hex = '';
+
+  try {
+    for (let i = 0; i < text.length; i++) {
+      const xorValue =
+        text.charCodeAt(i) ^
+        ENCRYPTION_KEY.charCodeAt(i % ENCRYPTION_KEY.length);
+
+      hex += xorValue.toString(16).padStart(2, '0');
+    }
+
+    return hex;
+  } catch (error) {
+    console.error('Encryption error:', error);
+    throw new Error('Failed to encrypt data');
+  }
+}
+
+export function encryptUrlParams(
+  params: Record<string, string | number | boolean>
+): string {
+  try {
+    const filteredParams = filterParams(params);
+    const jsonString = JSON.stringify(filteredParams);
+
+    return encryptData(jsonString);
+  } catch (error) {
+    console.error('Encryption error:', error);
+    throw new Error('Failed to encrypt data');
+  }
+}