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

package/README.md

@@ -11,14 +11,25 @@ yarn add omnipay-reactnative-sdk
 ## Dependencies
 
 ```sh
-yarn add react-native-select-contact react-native-webview react-native-share
+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
 ```
 
-Make sure your manifest files includes permission to read contacts
+Make sure your manifest files includes permissions for contacts and camera access:
 
-```sh
+**Android (android/app/src/main/AndroidManifest.xml):**
+
+```xml
 <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
@@ -102,45 +113,48 @@ 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
@@ -150,9 +164,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
      */
@@ -163,17 +177,94 @@ 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                            |
+| 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"