omnipay-reactnative-sdk 1.2.3-beta.9 → 1.2.4

package/src/components/OmnipayProvider.tsx

@@ -12,12 +12,16 @@ import {
   Image,
   TouchableWithoutFeedback,
   Text,
+  NativeModules,
+  NativeEventEmitter,
 } from 'react-native';
-import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import WebView, { type WebViewMessageEvent } from 'react-native-webview';
 import { getContact } from '../functions';
 import Share from 'react-native-share';
-import FaceVerification from './biometrics/FaceVerification';
-import Button from './Button';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import buildUrlWithMetadata from 'src/utils/buildUrlWithMetadata';
+
+const OmnipayActivity = NativeModules.OmnipayActivity || {};
 
 type OmnipayProviderProps = {
   publicKey: string;
@@ -26,6 +30,16 @@ type OmnipayProviderProps = {
   children: React.ReactElement | React.ReactElement[];
 };
 
+type PosTransactionType = {
+  amount: number;
+  purchaseType: 'PURCHASE' | 'KEY EXCHANGE';
+  color: string;
+  print: boolean;
+  rrn: string;
+  stan: string;
+  terminalId: string;
+};
+
 type PostMessage = {
   [key: string]: unknown;
 };
@@ -35,6 +49,7 @@ type Status = 'error' | 'loading' | 'success';
 type InitiateBillsType = {
   phoneNumber: string;
   onClose?: () => void;
+  metadata?: Record<string, string | number | boolean>;
 };
 
 type InitiateWalletType = {
@@ -57,6 +72,8 @@ type InitiateWalletType = {
   sessionId?: string;
   kycStatus?: 'verified' | 'unverified';
   launchPage?: string;
+  promoName?: string;
+  metadata?: Record<string, string | number | boolean>;
 };
 
 export type OmnipayContextType = {
@@ -81,6 +98,8 @@ export type OmnipayContextType = {
     sessionId,
     launchPage,
     kycStatus,
+    promoName,
+    metadata,
   }: InitiateWalletType) => void;
 };
 
@@ -110,18 +129,99 @@ export const OmnipayProvider = ({
   const isValidEnv = ['prod', 'dev'].includes(env);
   const isValidColor = color.length > 2;
   const onCloseRef = useRef<(() => void) | undefined>(undefined);
-  const [showFaceVerification, setShowFaceVerification] = useState(false);
+  const [canUsePos, setCanUsePos] = useState(false);
 
   useEffect(() => {
-    setTimeout(() => {
-      setShowFaceVerification(true);
-    }, 1000);
+    checkPaymentApp();
   }, []);
 
   useEffect(() => {
     visibilityRef.current = isVisible;
   }, [isVisible]);
 
+  useEffect(() => {
+    if (canUsePos) {
+      const eventEmitter = new NativeEventEmitter(OmnipayActivity);
+      eventEmitter.addListener('OmnipayEvent', (event) => {
+        console.log('native event', event);
+      });
+    }
+  }, [canUsePos]);
+
+  async function checkPaymentApp() {
+    try {
+      if (Platform.OS === 'android') {
+        const isInstalled = await OmnipayActivity.isPackageInstalled(
+          'com.horizonpay.sample'
+        );
+        if (isInstalled) {
+          setCanUsePos(true);
+        }
+      }
+    } catch (error) {}
+  }
+
+  async function startPosTransaction({
+    amount,
+    purchaseType,
+    print,
+    rrn,
+    stan,
+    terminalId,
+  }: PosTransactionType) {
+    try {
+      if (Platform.OS === 'android') {
+        let result = '';
+
+        if (purchaseType === 'KEY EXCHANGE') {
+          const isKeyExchanged = await AsyncStorage.getItem('isKeyExchanged');
+          if (!isKeyExchanged) {
+            result = await OmnipayActivity.initiateHorizonTransaction(
+              amount,
+              purchaseType,
+              color,
+              print,
+              rrn,
+              stan,
+              terminalId
+            );
+            if (
+              terminalId &&
+              result &&
+              result.toLowerCase().includes('-message-success')
+            ) {
+              await AsyncStorage.setItem('isKeyExchanged', terminalId);
+            }
+            postMessage({
+              dataKey: 'onPosKeyExchanged',
+              dataValue: result,
+            });
+          }
+        } else {
+          result = await OmnipayActivity.initiateHorizonTransaction(
+            amount,
+            purchaseType,
+            color,
+            print,
+            rrn,
+            stan,
+            terminalId
+          );
+          postMessage({
+            dataKey: 'onPosTransactionSuccess',
+            dataValue: result,
+          });
+        }
+      }
+    } catch (error) {
+      console.log(error);
+      postMessage({
+        dataKey: 'onPosTransactionFailure',
+        dataValue: '',
+      });
+    }
+  }
+
   function getWebviewStyle() {
     if (!showWebview) {
       return { opacity: 0, height: 0, width: 0, flex: 0 };
@@ -181,6 +281,9 @@ export const OmnipayProvider = ({
         if (dataKey === 'shareReceipt') {
           shareReceipt(dataValue);
         }
+        if (dataKey === 'startPosTransaction') {
+          startPosTransaction(JSON.parse(dataValue));
+        }
       }
     } catch (error) {}
   }
@@ -197,16 +300,21 @@ export const OmnipayProvider = ({
     }
   }
 
-  const _initiateBills = ({ phoneNumber, onClose }: InitiateBillsType) => {
-    if (typeof phoneNumber === 'string' && phoneNumber.length >= 10) {
-      const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
-      setWebviewUrl(webUrl);
-      setIsVisible(true);
-      onCloseRef.current = onClose;
-      return;
-    }
-    console.warn('Omnipay error: Invalid phone number');
-  };
+   const _initiateBills = ({
+     phoneNumber,
+     onClose,
+     metadata = {},
+   }: InitiateBillsType) => {
+     if (typeof phoneNumber === 'string' && phoneNumber.length >= 10) {
+       const baseUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+       const webUrl = buildUrlWithMetadata(baseUrl, metadata);
+       setWebviewUrl(webUrl);
+       setIsVisible(true);
+       onCloseRef.current = onClose;
+       return;
+     }
+     console.warn('Omnipay error: Invalid phone number');
+   };
 
   const _initiateWallet = ({
     phoneNumber = '',
@@ -228,6 +336,8 @@ export const OmnipayProvider = ({
     sessionId = '',
     kycStatus,
     launchPage = 'wallet',
+    promoName = '',
+    metadata = {},
   }: InitiateWalletType) => {
     //prevent opening if it's already open
     if (visibilityRef.current) {
@@ -239,9 +349,10 @@ export const OmnipayProvider = ({
     const usesNativeShare = true;
 
     if (isPhoneNumberValid || isValidCustomerRef || isValidUserRef) {
-      const webUrl = `${webHost}?theme=${color}&view=wallet&publicKey=${publicKey}&phoneNumber=${phoneNumber}&usesPaylater=${usesPaylater}&usesPromo=${usesPromo}&usesAirtimeData=${usesAirtimeData}&usesTransfer=${usesTransfer}&usesBills=${usesBills}&usesPos=${usesPos}&customerRef=${customerRef}&userRef=${userRef}&promoBalanceOffset=${promoBalanceOffset}&deviceId=${deviceId}&deviceName=${deviceName}&hideWalletTransfer=${hideWalletTransfer}&bvnRequired=${isBvnValidationRequired}&usesNativeShare=${usesNativeShare}&walletTab=${walletTab}&sessionId=${sessionId}&kycStatus=${
+      const baseUrl = `${webHost}?theme=${color}&view=wallet&publicKey=${publicKey}&phoneNumber=${phoneNumber}&usesPaylater=${usesPaylater}&usesPromo=${usesPromo}&usesAirtimeData=${usesAirtimeData}&usesTransfer=${usesTransfer}&usesBills=${usesBills}&usesPos=${usesPos}&customerRef=${customerRef}&userRef=${userRef}&promoBalanceOffset=${promoBalanceOffset}&deviceId=${deviceId}&deviceName=${deviceName}&hideWalletTransfer=${hideWalletTransfer}&bvnRequired=${isBvnValidationRequired}&usesNativeShare=${usesNativeShare}&isPosEnabled=${canUsePos}&walletTab=${walletTab}&sessionId=${sessionId}&kycStatus=${
         kycStatus || ''
-      }&launchPage=${launchPage}`;
+      }&launchPage=${launchPage}&promoName=${promoName}`;
+       const webUrl = buildUrlWithMetadata(baseUrl, metadata);
       setWebviewUrl(webUrl);
       setIsVisible(true);
       onCloseRef.current = onClose;
@@ -317,6 +428,7 @@ export const OmnipayProvider = ({
                         }}
                         domStorageEnabled={true}
                         originWhitelist={['*']}
+                        allowsInlineMediaPlayback={true}
                         onLoadEnd={() => setWebviewStatus('success')}
                         renderError={() => (
                           <View style={StyleSheet.absoluteFillObject}>
@@ -324,12 +436,21 @@ export const OmnipayProvider = ({
                               <Text style={styles.errorSubtitle}>
                                 Unable to open your wallet. Please try again
                               </Text>
-                              <Button
-                                title="Retry"
+                              <TouchableOpacity
+                                activeOpacity={0.8}
                                 onPress={reloadWebview}
-                                backgroundColor={color}
-                                borderColor={color}
-                              />
+                                style={[
+                                  styles.button,
+                                  {
+                                    backgroundColor: color,
+                                    borderColor: color,
+                                  },
+                                ]}
+                              >
+                                <>
+                                  <Text style={styles.buttonText}>Retry</Text>
+                                </>
+                              </TouchableOpacity>
                             </View>
                           </View>
                         )}
@@ -350,13 +471,6 @@ export const OmnipayProvider = ({
         </>
       )}
       {children}
-      {showFaceVerification && (
-        <FaceVerification
-          onClose={() => setShowFaceVerification(false)}
-          onSuccess={() => setShowFaceVerification(false)}
-          primaryColor={color}
-        />
-      )}
     </OmnipayContext.Provider>
   );
 };
@@ -467,4 +581,13 @@ const styles = StyleSheet.create({
     minWidth: 160,
     marginHorizontal: 'auto',
   },
+  button: {
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 14,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: { color: 'white', fontSize: 16, paddingHorizontal: 30 },
 });

package/src/components/OmnipayView.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   Linking,
 } from 'react-native';
-import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import { clientSdkBaseUrl, serverSdkBaseUrl } from '../lib/config';
 import { getContact } from '../functions';
 import { Registration } from './views/Registration';

package/src/components/views/BvnVerification.tsx

@@ -6,7 +6,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import { serverSdkBaseUrl } from '../../lib/config';
 
 type OmnipayProps = {

package/src/components/views/PaylaterAgreement.tsx

@@ -6,7 +6,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import { serverSdkBaseUrl } from '../../lib/config';
 
 type AgreementSubmittedType = {

package/src/components/views/Registration.tsx

@@ -6,7 +6,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import { serverSdkBaseUrl } from '../../lib/config';
 
 type RegisterSuccessType = {

package/src/hooks/useOmnipay.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import {
   OmnipayContext,
-  OmnipayContextType,
+  type OmnipayContextType,
 } from '../components/OmnipayProvider';
 
 export function useOmnipay() {

package/src/utils/buildUrlWithMetadata.ts

@@ -0,0 +1,21 @@
+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 !== ''
+    )
+    .map(
+      ([key, value]) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`
+    )
+    .join('&');
+  if (query) {
+    return baseUrl.includes('?')
+      ? `${baseUrl}&${query}`
+      : `${baseUrl}?${query}`;
+  }
+
+  return baseUrl;
+}

package/android/src/main/java/com/omniretail/omnipay/FaceVerificationFrameProcessor.kt

@@ -1,111 +0,0 @@
-package com.omniretail.omnipay
-
-import android.util.Log
-import com.google.mlkit.vision.common.InputImage
-import com.google.mlkit.vision.face.FaceDetection
-import com.google.mlkit.vision.face.FaceDetectorOptions
-import com.google.mlkit.vision.face.Face
-import com.mrousavy.camera.core.FrameInvalidError
-import com.mrousavy.camera.frameprocessor.Frame
-import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin
-import com.mrousavy.camera.frameprocessor.VisionCameraProxy
-
-class FaceVerificationFrameProcessor(proxy: VisionCameraProxy, options: Map<String, Any>?) : FrameProcessorPlugin() {
-  
-  private val faceDetector = FaceDetection.getClient(
-    FaceDetectorOptions.Builder()
-      .setPerformanceMode(FaceDetectorOptions.PERFORMANCE_MODE_FAST)
-      .setLandmarkMode(FaceDetectorOptions.LANDMARK_MODE_ALL)
-      .setClassificationMode(FaceDetectorOptions.CLASSIFICATION_MODE_ALL)
-      .setMinFaceSize(0.15f)
-      .enableTracking()
-      .build()
-  )
-  
-  override fun callback(frame: Frame, arguments: Map<String, Any>?): Any {
-    return try {
-      val results = mutableMapOf<String, Any>()
-      
-      // Convert frame to InputImage
-      val image = InputImage.fromMediaImage(frame.image, frame.imageRotationDegrees)
-      
-      // Process face detection synchronously
-      val task = faceDetector.process(image)
-      
-      // Wait for result (this blocks the thread but that's OK for frame processors)
-      val faces = try {
-        // For simplicity, we'll use a blocking approach
-        // In production, you might want to handle this differently
-        while (!task.isComplete && !task.isCanceled) {
-          Thread.sleep(1)
-        }
-        
-        if (task.isSuccessful) {
-          task.result
-        } else {
-          emptyList()
-        }
-      } catch (e: Exception) {
-        Log.e("FaceVerification", "Face detection failed: ${e.message}")
-        results["error"] = e.message ?: "Face detection failed"
-        return results
-      }
-      
-      if (faces.isEmpty()) {
-        results["faceDetected"] = false
-        return results
-      }
-      
-      // Process first detected face
-      val face = faces[0]
-      results["faceDetected"] = true
-      
-      // Face bounding box
-      results["boundingBox"] = mapOf(
-        "left" to face.boundingBox.left,
-        "top" to face.boundingBox.top,
-        "right" to face.boundingBox.right,
-        "bottom" to face.boundingBox.bottom
-      )
-      
-      // Smile detection
-      face.smilingProbability?.let { smilingProbability ->
-        results["isSmiling"] = smilingProbability > 0.7f
-        results["smileProbability"] = smilingProbability
-      }
-      
-      // Eye detection (for blinking)
-      val leftEyeOpenProbability = face.leftEyeOpenProbability
-      val rightEyeOpenProbability = face.rightEyeOpenProbability
-      
-      if (leftEyeOpenProbability != null && rightEyeOpenProbability != null) {
-        val leftEyeClosed = leftEyeOpenProbability < 0.3f
-        val rightEyeClosed = rightEyeOpenProbability < 0.3f
-        
-        results["leftEyeClosed"] = leftEyeClosed
-        results["rightEyeClosed"] = rightEyeClosed
-        results["isBlinking"] = leftEyeClosed && rightEyeClosed
-        results["leftEyeOpenProbability"] = leftEyeOpenProbability
-        results["rightEyeOpenProbability"] = rightEyeOpenProbability
-      }
-      
-      // Head pose detection
-      results["headPose"] = mapOf(
-        "yaw" to face.headEulerAngleY,     // Left-right movement
-        "pitch" to face.headEulerAngleX,   // Up-down movement
-        "roll" to face.headEulerAngleZ     // Tilt movement
-      )
-      
-      // Face tracking ID (useful for consistency across frames)
-      face.trackingId?.let { trackingId ->
-        results["trackingId"] = trackingId
-      }
-      
-      results
-      
-    } catch (e: Exception) {
-      Log.e("FaceVerification", "Unexpected error: ${e.message}")
-      mapOf("error" to (e.message ?: "Unknown error occurred"))
-    }
-  }
-}

package/ios/FaceVerificationFrameProcessor.swift

@@ -1,138 +0,0 @@
-import VisionCamera
-import Vision
-import AVFoundation
-
-@objc(FaceVerificationFrameProcessor)
-public class FaceVerificationFrameProcessor: FrameProcessorPlugin {
-  
-  public override init(proxy: VisionCameraProxyHolder, options: [AnyHashable : Any]! = [:]) {
-    super.init(proxy: proxy, options: options)
-  }
-  
-  public override func callback(_ frame: Frame, withArguments arguments: [AnyHashable : Any]?) -> Any {
-    let buffer = frame.buffer
-    guard let imageBuffer = CMSampleBufferGetImageBuffer(buffer) else {
-      return ["error": "Failed to get image buffer"]
-    }
-    
-    return performFaceDetection(on: imageBuffer)
-  }
-  
-  private func performFaceDetection(on imageBuffer: CVImageBuffer) -> [String: Any] {
-    let request = VNDetectFaceLandmarksRequest()
-    let handler = VNImageRequestHandler(cvPixelBuffer: imageBuffer, options: [:])
-    
-    do {
-      try handler.perform([request])
-      
-      guard let observations = request.results as? [VNFaceObservation],
-            let face = observations.first else {
-        return ["faceDetected": false]
-      }
-      
-      var results: [String: Any] = [
-        "faceDetected": true,
-        "boundingBox": [
-          "x": face.boundingBox.origin.x,
-          "y": face.boundingBox.origin.y,
-          "width": face.boundingBox.size.width,
-          "height": face.boundingBox.size.height
-        ]
-      ]
-      
-      // Analyze facial features
-      if let landmarks = face.landmarks {
-        results = analyzeFacialFeatures(landmarks: landmarks, results: results)
-      }
-      
-      // Calculate head pose
-      if let pose = calculateHeadPose(face: face) {
-        results["headPose"] = pose
-      }
-      
-      return results
-      
-    } catch {
-      return ["error": error.localizedDescription]
-    }
-  }
-  
-  private func analyzeFacialFeatures(landmarks: VNFaceLandmarks2D, results: [String: Any]) -> [String: Any] {
-    var updatedResults = results
-    
-    // Detect smile
-    if let mouth = landmarks.outerLips {
-      let isSmiling = detectSmile(mouthPoints: mouth.normalizedPoints)
-      updatedResults["isSmiling"] = isSmiling
-    }
-    
-    // Detect blinks
-    if let leftEye = landmarks.leftEye, let rightEye = landmarks.rightEye {
-      let leftEyeClosed = detectEyeClosure(eyePoints: leftEye.normalizedPoints)
-      let rightEyeClosed = detectEyeClosure(eyePoints: rightEye.normalizedPoints)
-      
-      updatedResults["leftEyeClosed"] = leftEyeClosed
-      updatedResults["rightEyeClosed"] = rightEyeClosed
-      updatedResults["isBlinking"] = leftEyeClosed && rightEyeClosed
-    }
-    
-    return updatedResults
-  }
-  
-  private func detectSmile(mouthPoints: [CGPoint]) -> Bool {
-    guard mouthPoints.count >= 6 else { return false }
-    
-    // Calculate mouth corner heights vs center
-    let leftCorner = mouthPoints[0]
-    let rightCorner = mouthPoints[3] 
-    let topCenter = mouthPoints[1]
-    let bottomCenter = mouthPoints[4]
-    
-    let cornerHeight = (leftCorner.y + rightCorner.y) / 2
-    let centerHeight = (topCenter.y + bottomCenter.y) / 2
-    
-    // Smile detection: corners higher than center
-    return cornerHeight < centerHeight - 0.01
-  }
-  
-  private func detectEyeClosure(eyePoints: [CGPoint]) -> Bool {
-    guard eyePoints.count >= 6 else { return false }
-    
-    // Calculate eye aspect ratio
-    let topPoints = Array(eyePoints[1...2])
-    let bottomPoints = Array(eyePoints[4...5])
-    let leftPoint = eyePoints[0]
-    let rightPoint = eyePoints[3]
-    
-    let verticalDist1 = distance(topPoints[0], bottomPoints[0])
-    let verticalDist2 = distance(topPoints[1], bottomPoints[1])
-    let horizontalDist = distance(leftPoint, rightPoint)
-    
-    let eyeAspectRatio = (verticalDist1 + verticalDist2) / (2.0 * horizontalDist)
-    
-    // Eye is closed if aspect ratio is below threshold
-    return eyeAspectRatio < 0.2
-  }
-  
-  private func calculateHeadPose(face: VNFaceObservation) -> [String: Double]? {
-    guard let yaw = face.yaw, let pitch = face.pitch, let roll = face.roll else {
-      return nil
-    }
-    
-    let yawDegrees = Double(truncating: yaw) * 180.0 / Double.pi
-    let pitchDegrees = Double(truncating: pitch) * 180.0 / Double.pi
-    let rollDegrees = Double(truncating: roll) * 180.0 / Double.pi
-    
-    return [
-      "yaw": yawDegrees,     // Left-right head movement
-      "pitch": pitchDegrees, // Up-down head movement  
-      "roll": rollDegrees    // Head tilt
-    ]
-  }
-  
-  private func distance(_ point1: CGPoint, _ point2: CGPoint) -> Double {
-    let dx = point1.x - point2.x
-    let dy = point1.y - point2.y
-    return sqrt(Double(dx * dx + dy * dy))
-  }
-}

package/ios/FaceVerificationFrameProcessorPlugin.m

@@ -1,4 +0,0 @@
-#import <VisionCamera/FrameProcessorPlugin.h>
-#import <VisionCamera/FrameProcessorPluginRegistry.h>
-
-VISION_EXPORT_SWIFT_FRAME_PROCESSOR(FaceVerificationFrameProcessor, detectFaces)

package/ios/OmnipayReactnativeSdk.m

@@ -1,5 +0,0 @@
-#import <React/RCTBridgeModule.h>
-
-@interface RCT_EXTERN_MODULE(OmnipayReactnativeSdk, NSObject)
-
-@end

package/ios/OmnipayReactnativeSdk.swift

@@ -1,10 +0,0 @@
-import Foundation
-
-@objc(OmnipayReactnativeSdk)
-class OmnipayReactnativeSdk: NSObject {
-    
-    @objc static func requiresMainQueueSetup() -> Bool {
-        return false
-    }
-    
-}

package/ios/omnipay-reactnative-sdk-Bridging-Header.h

@@ -1,8 +0,0 @@
-//
-//  Use this file to import your target's public headers that you would like to expose to Swift.
-//
-
-#import <React/RCTBridgeModule.h>
-#import <VisionCamera/FrameProcessorPlugin.h>
-#import <VisionCamera/FrameProcessorPluginRegistry.h>
-#import <VisionCamera/Frame.h>

package/ios/omnipay_reactnative_sdk.h

@@ -1,6 +0,0 @@
-#ifndef omnipay_reactnative_sdk_h
-#define omnipay_reactnative_sdk_h
-
-#import <React/RCTBridgeModule.h>
-
-#endif /* omnipay_reactnative_sdk_h */