omnipay-reactnative-sdk 1.2.2-beta.0 → 1.2.2-beta.3

package/README.md

@@ -11,25 +11,14 @@ yarn add omnipay-reactnative-sdk
 ## Dependencies
 
 ```sh
-yarn add react-native-select-contact react-native-webview react-native-share react-native-svg react-native-vision-camera react-native-vision-camera-face-detector
+yarn add react-native-select-contact react-native-webview react-native-share
 ```
 
-Make sure your manifest files includes permissions for contacts and camera access:
+Make sure your manifest files includes permission to read contacts
 
-**Android (android/app/src/main/AndroidManifest.xml):**
-
-```xml
+```sh
 <uses-permission android:name="android.permission.READ_CONTACTS" />
-<uses-permission android:name="android.permission.CAMERA" />
-```
-
-**iOS (ios/YourApp/Info.plist):**
 
-```xml
-<key>NSContactsUsageDescription</key>
-<string>This app needs access to contacts to help you select recipients.</string>
-<key>NSCameraUsageDescription</key>
-<string>This app needs camera access for face verification.</string>
 ```
 
 Also add this for Android 11+ support below the application tag in your AndroidManifest.xml file
@@ -113,48 +102,45 @@ initiateWallet({
 ### Properties
 
 #### OmnipayProvider Props
-
-| Name      | Type   | Description                          |
-| --------- | ------ | ------------------------------------ |
-| color     | String | color of primary buttons and links   |
-| env       | String | dev or prod                          |
-| publicKey | String | public key of the company on omnipay |
+| Name            | Type     | Description                                              |
+| --------------- | -------- | -------------------------------------------------------- |
+| color           | String   | color of primary buttons and links                       |
+| env             | String   | dev or prod                                              |
+| publicKey       | String   | public key of the company on omnipay                     |
 
 #### initiateBills Props
-
-| Name        | Type     | Description                                    |
-| ----------- | -------- | ---------------------------------------------- |
-| phoneNumber | String   | phone number of the customer                   |
-| onClose     | Function | this is used to notify you when the sdk closes |
+| Name            | Type     | Description                                              |
+| --------------- | -------- | -------------------------------------------------------- |
+| phoneNumber     | String   | phone number of the customer                             |
+| onClose         | Function | this is used to notify you when the sdk closes          |
 
 #### initiateWallet Props
+| Name                    | Type     | Description                                                      |
+| ----------------------- | -------- | ---------------------------------------------------------------- |
+| phoneNumber             | String   | phone number of the customer                                     |
+| customerRef             | String   | unique reference for the customer                                |
+| userRef                 | String   | unique reference for the user                                    |
+| onClose                 | Function | this is used to notify you when the sdk closes                  |
+| usesPaylater            | Boolean  | whether to show paylater tab in wallet view                      |
+| usesPromo               | Boolean  | whether to show promo tab in wallet view                         |
+| usesAirtimeData         | Boolean  | whether to show airtime and data shortcut in wallet view         |
+| usesTransfer            | Boolean  | whether to show transfer shortcut in wallet view                 |
+| usesBills               | Boolean  | whether to show bills shortcut in wallet view                    |
+| usesPos                 | Boolean  | whether to show pos shortcut in wallet view                      |
+| promoBalanceOffset      | Number   | offset for promo balance display                                 |
+| deviceId                | String   | unique identifier for the device                                 |
+| deviceName              | String   | name of the device                                               |
+| hideWalletTransfer      | Boolean  | whether to hide wallet transfer functionality                    |
+| isBvnValidationRequired | Boolean  | whether BVN validation is required                               |
+| walletTab               | String   | initial wallet tab to display ('Paylater', 'Account', 'Omoni')  |
+| sessionId               | String   | unique session identifier                                        |
+| kycStatus               | String   | KYC status of the user ('verified', 'unverified')               |
+| launchPage              | String   | page to launch in the wallet                                     |
 
-| Name                    | Type     | Description                                                    |
-| ----------------------- | -------- | -------------------------------------------------------------- |
-| phoneNumber             | String   | phone number of the customer                                   |
-| customerRef             | String   | unique reference for the customer                              |
-| userRef                 | String   | unique reference for the user                                  |
-| onClose                 | Function | this is used to notify you when the sdk closes                 |
-| usesPaylater            | Boolean  | whether to show paylater tab in wallet view                    |
-| usesPromo               | Boolean  | whether to show promo tab in wallet view                       |
-| usesAirtimeData         | Boolean  | whether to show airtime and data shortcut in wallet view       |
-| usesTransfer            | Boolean  | whether to show transfer shortcut in wallet view               |
-| usesBills               | Boolean  | whether to show bills shortcut in wallet view                  |
-| usesPos                 | Boolean  | whether to show pos shortcut in wallet view                    |
-| promoBalanceOffset      | Number   | offset for promo balance display                               |
-| deviceId                | String   | unique identifier for the device                               |
-| deviceName              | String   | name of the device                                             |
-| hideWalletTransfer      | Boolean  | whether to hide wallet transfer functionality                  |
-| isBvnValidationRequired | Boolean  | whether BVN validation is required                             |
-| walletTab               | String   | initial wallet tab to display ('Paylater', 'Account', 'Omoni') |
-| sessionId               | String   | unique session identifier                                      |
-| kycStatus               | String   | KYC status of the user ('verified', 'unverified')              |
-| launchPage              | String   | page to launch in the wallet                                   |
 
 ## Registration Sdk
-
 ```js
-import { Omnipay } from 'omnipay-reactnative-sdk';
+import { Omnipay } from "omnipay-reactnative-sdk";
 
 //render it anywhere on your page where you want to display the registration sdk
 <Omnipay.Registration
@@ -164,9 +150,9 @@ import { Omnipay } from 'omnipay-reactnative-sdk';
   phoneNumber="09031234571"
   onRegistrationSuccessful={({ customerRef, walletId }) => {
     /**
-     * the customer ref and walletid can be saved
+     * the customer ref and walletid can be saved 
      * to your database at this point
-     *
+     * 
      * we will also be sending a webhook notification
      * so, you can either save at this point or via the webhook
      */
@@ -177,94 +163,17 @@ import { Omnipay } from 'omnipay-reactnative-sdk';
      * the user is done with registration.
      * you can navigate them else where at this point
      */
+   
   }}
-/>;
+/>
 ```
 
 ### Properties
 
-| Name        | Type   | Description                          |
-| ----------- | ------ | ------------------------------------ |
-| color       | String | color of primary buttons and links   |
-| env         | String | dev or prod                          |
-| phoneNumber | String | phone number of the customer         |
-| publicKey   | String | public key of the company on omnipay |
-| view        | String | the view to render on the sdk        |
-
-## Face Verification Feature
-
-The SDK now includes face verification functionality that can be triggered from the webview. This feature provides liveness detection with multiple verification steps including blinking, smiling, and final position verification.
-
-### Usage from WebView
-
-The webview can trigger face verification by sending a message:
-
-```javascript
-// From webview JavaScript
-window.ReactNativeWebView.postMessage(
-  JSON.stringify({
-    dataKey: 'startFaceVerification',
-    dataValue: JSON.stringify({
-      // additional options can be passed here
-      customData: {
-        /* any custom data */
-      },
-    }),
-  })
-);
-```
-
-### Handling Face Verification Results
-
-The SDK will post back results to the webview:
-
-```javascript
-// Listen for results in webview
-window.addEventListener('message', function (event) {
-  const data = JSON.parse(event.data);
-
-  if (data.dataKey === 'faceVerificationComplete') {
-    if (data.dataValue.success) {
-      // Verification successful
-      const base64Image = data.dataValue.image;
-      // Handle success
-    } else {
-      // Verification failed
-      console.error(data.dataValue.error);
-    }
-  }
-
-  if (data.dataKey === 'faceVerificationCancelled') {
-    // User cancelled verification
-    console.log('Face verification cancelled');
-  }
-});
-```
-
-### Required Setup for Face Verification
-
-1. **Install additional dependencies** (already included if you followed the Dependencies section above):
-
-   - `react-native-vision-camera` for camera access
-   - `react-native-vision-camera-face-detector` for face detection
-   - `react-native-svg` for UI components
-
-2. **Permissions** (already included if you followed the Dependencies section above):
-
-   - Camera permissions are required on both iOS and Android
-
-3. **Platform-specific setup**:
-   - Follow the setup instructions for `react-native-vision-camera` in your project
-   - Ensure camera permissions are properly configured
-
-### Face Verification Flow
-
-1. User triggers verification from webview
-2. SDK displays face verification modal with "Proceed" button
-3. User goes through verification steps:
-   - Position face in frame
-   - Blink eyes
-   - Smile
-   - Hold still for final capture
-4. SDK captures image and shows preview with "Continue" and "Retake" options
-5. SDK returns base64 image data to webview when user selects "Continue"
+| Name            | Type     | Description                                              |
+| --------------- | -------- | -------------------------------------------------------- |
+| color           | String   | color of primary buttons and links                       |
+| env             | String   | dev or prod                                              |
+| phoneNumber     | String   | phone number of the customer                             |
+| publicKey       | String   | public key of the company on omnipay                     |
+| view            | String   | the view to render on the sdk                            |

package/android/build.gradle

@@ -43,4 +43,17 @@ repositories {
 
 dependencies {
   implementation "com.facebook.react:react-native:${safeExtGet('reactNativeVersion', '+')}"
+  
+  // CameraX dependencies for liveness detection
+  implementation 'androidx.camera:camera-core:1.3.1'
+  implementation 'androidx.camera:camera-camera2:1.3.1'
+  implementation 'androidx.camera:camera-lifecycle:1.3.1'
+  implementation 'androidx.camera:camera-view:1.3.1'
+  
+  // ML Kit for face detection
+  implementation 'com.google.mlkit:face-detection:16.1.5'
+  
+  // Additional required dependencies
+  implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
+  implementation 'androidx.core:core-ktx:1.12.0'
 }

package/android/src/main/AndroidManifest.xml

@@ -1,6 +1,11 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="com.omniretail.omnipay">
 
+    <!-- Camera permissions for liveness detection -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-feature android:name="android.hardware.camera" android:required="true" />
+    <uses-feature android:name="android.hardware.camera.front" android:required="false" />
+
     <application>
         <service
             android:name=".OmnipayActivityModule"

package/android/src/main/java/com/omniretail/omnipay/LivenessCameraViewManager.java

@@ -0,0 +1,116 @@
+package com.omniretail.omnipay;
+
+import android.content.Context;
+import android.view.View;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.camera.view.PreviewView;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import java.util.Map;
+
+public class LivenessCameraViewManager extends SimpleViewManager<FrameLayout> {
+    public static final String REACT_CLASS = "LivenessCameraView";
+    private ReactApplicationContext reactContext;
+
+    public LivenessCameraViewManager(ReactApplicationContext reactContext) {
+        this.reactContext = reactContext;
+    }
+
+    @Override
+    @NonNull
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    @NonNull
+    public FrameLayout createViewInstance(@NonNull ThemedReactContext context) {
+        FrameLayout frameLayout = new FrameLayout(context);
+        frameLayout.setLayoutParams(new FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.MATCH_PARENT,
+            FrameLayout.LayoutParams.MATCH_PARENT
+        ));
+        
+        // Get the camera preview from the LivenessDetectionModule
+        try {
+            LivenessDetectionModule livenessModule = reactContext.getNativeModule(LivenessDetectionModule.class);
+            if (livenessModule != null) {
+                PreviewView previewView = livenessModule.getPreviewView();
+                if (previewView != null) {
+                    // Remove from any existing parent
+                    if (previewView.getParent() != null) {
+                        ((FrameLayout) previewView.getParent()).removeView(previewView);
+                    }
+                    
+                    frameLayout.addView(previewView, new FrameLayout.LayoutParams(
+                        FrameLayout.LayoutParams.MATCH_PARENT,
+                        FrameLayout.LayoutParams.MATCH_PARENT
+                    ));
+                }
+            }
+        } catch (Exception e) {
+            // Handle gracefully - the camera view will be set up later
+        }
+        
+        return frameLayout;
+    }
+
+    @ReactProp(name = "scaleType")
+    public void setScaleType(FrameLayout view, @Nullable String scaleType) {
+        // Find the PreviewView child and set scale type
+        for (int i = 0; i < view.getChildCount(); i++) {
+            View child = view.getChildAt(i);
+            if (child instanceof PreviewView) {
+                PreviewView previewView = (PreviewView) child;
+                if ("fillStart".equals(scaleType)) {
+                    previewView.setScaleType(PreviewView.ScaleType.FILL_START);
+                } else if ("fillCenter".equals(scaleType)) {
+                    previewView.setScaleType(PreviewView.ScaleType.FILL_CENTER);
+                } else if ("fillEnd".equals(scaleType)) {
+                    previewView.setScaleType(PreviewView.ScaleType.FILL_END);
+                } else if ("fitStart".equals(scaleType)) {
+                    previewView.setScaleType(PreviewView.ScaleType.FIT_START);
+                } else if ("fitCenter".equals(scaleType)) {
+                    previewView.setScaleType(PreviewView.ScaleType.FIT_CENTER);
+                } else if ("fitEnd".equals(scaleType)) {
+                    previewView.setScaleType(PreviewView.ScaleType.FIT_END);
+                } else {
+                    // Default to fill center
+                    previewView.setScaleType(PreviewView.ScaleType.FILL_CENTER);
+                }
+                break;
+            }
+        }
+    }
+
+    @Override
+    public void onDropViewInstance(@NonNull FrameLayout view) {
+        super.onDropViewInstance(view);
+        // Clean up camera resources if needed
+        try {
+            LivenessDetectionModule livenessModule = reactContext.getNativeModule(LivenessDetectionModule.class);
+            if (livenessModule != null) {
+                // The module will handle cleanup when detection stops
+            }
+        } catch (Exception e) {
+            // Handle gracefully
+        }
+    }
+
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        return MapBuilder.<String, Object>builder()
+            .put("onCameraReady", MapBuilder.of("registrationName", "onCameraReady"))
+            .put("onCameraError", MapBuilder.of("registrationName", "onCameraError"))
+            .build();
+    }
+}