omnipay-reactnative-sdk 1.0.4 → 1.0.5

package/lib/module/components/views/Registration.js

@@ -0,0 +1,126 @@
+import React, { Fragment, useRef, useState } from 'react';
+import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { serverSdkBaseUrl } from 'src/lib/config';
+export const Registration = _ref => {
+  let {
+    color,
+    env,
+    publicKey,
+    phoneNumber,
+    onRegistrationSuccessful,
+    onClose
+  } = _ref;
+  const webviewRef = useRef(null);
+  const [webviewStatus, setWebviewStatus] = useState('loading');
+  const webHost = getWebHost();
+  const webUrl = getWebUrl();
+  const onWebviewMount = `
+        window.nativeOs = ${Platform.OS};
+        true;
+      `;
+  function getWebHost() {
+    return serverSdkBaseUrl[env];
+  }
+  function getWebUrl() {
+    const themeColor = color.includes('#') ? color.split('#')[1] : color;
+    return `${webHost}auth/register?theme=${themeColor}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+  }
+
+  //   function postMessage(data: PostMessage) {
+  //     if (!webviewRef.current) {
+  //       return;
+  //     }
+  //     try {
+  //       webviewRef.current.postMessage(JSON.stringify(data));
+  //     } catch (error) {}
+  //   }
+
+  async function onWebviewMessage(e) {
+    try {
+      if (e.nativeEvent && e.nativeEvent.data) {
+        const eventData = JSON.parse(e.nativeEvent.data);
+        const {
+          dataKey,
+          dataValue
+        } = eventData;
+        const {
+          action,
+          details
+        } = JSON.parse(dataValue);
+        if (dataKey === 'customer.registered') {
+          if (onRegistrationSuccessful) {
+            onRegistrationSuccessful({
+              customerRef: details.customerRef,
+              walletId: details.walletId
+            });
+          }
+          return;
+        }
+        if (action === 'close.registration') {
+          if (onClose) {
+            onClose();
+          }
+          return;
+        }
+      }
+    } catch (error) {}
+  }
+  if (!publicKey.includes('OMNIPUBKEY_')) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid public key");
+  }
+  if (phoneNumber.length < 10) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid phone number");
+  }
+  if (color.length < 3) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid color");
+  }
+  if (!['dev', 'prod'].includes(env)) {
+    return /*#__PURE__*/React.createElement(Text, null, "Invalid environment");
+  }
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.full
+  }, /*#__PURE__*/React.createElement(WebView, {
+    source: {
+      uri: webUrl
+    },
+    style: styles.webview,
+    injectedJavaScriptBeforeContentLoaded: onWebviewMount,
+    onMessage: onWebviewMessage,
+    ref: webviewRef,
+    onLoadEnd: () => setWebviewStatus('success')
+  }), webviewStatus === 'loading' && /*#__PURE__*/React.createElement(View, {
+    style: styles.webviewLoader
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "small",
+    color: color
+  }))));
+};
+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
+  }
+});
+//# sourceMappingURL=Registration.js.map

package/lib/module/components/views/Registration.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useRef","useState","ActivityIndicator","Platform","StyleSheet","Text","View","WebView","serverSdkBaseUrl","Registration","color","env","publicKey","phoneNumber","onRegistrationSuccessful","onClose","webviewRef","webviewStatus","setWebviewStatus","webHost","getWebHost","webUrl","getWebUrl","onWebviewMount","OS","themeColor","includes","split","onWebviewMessage","e","nativeEvent","data","eventData","JSON","parse","dataKey","dataValue","action","details","customerRef","walletId","error","length","styles","full","uri","webview","webviewLoader","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["Registration.tsx"],"mappings":"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"}

package/lib/module/index.js

@@ -1,4 +1,5 @@
+import Omnipay from './components/OmnipayView';
 export { OmnipayProvider } from './components/OmnipayProvider';
 export { useOmnipay } from './hooks/useOmnipay';
-export { Omnipay } from './components/OmnipayView';
+export default Omnipay;
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["OmnipayProvider","useOmnipay","Omnipay"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,OAAO,QAAQ,0BAA0B"}
+{"version":3,"names":["Omnipay","OmnipayProvider","useOmnipay"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,OAAOA,OAAO,MAAM,0BAA0B;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,eAAeF,OAAO"}

package/lib/module/lib/colors.js

@@ -0,0 +1,28 @@
+export const colors = {
+  10: 'rgba(166, 130, 255, 0.1)',
+  20: 'rgba(166, 130, 255, 0.2)',
+  30: 'rgba(166, 130, 255, 0.3)',
+  40: 'rgba(166, 130, 255, 0.4)',
+  50: 'rgba(166, 130, 255, 0.10)',
+  100: '#F0E6FF',
+  200: '#DFCDFF',
+  300: '#CEB3FF',
+  400: '#BFA1FF',
+  500: '#A682FF',
+  600: '#a27dff',
+  700: '#5C41B7',
+  800: '#3E2993',
+  900: '#29187A',
+  1500: '#FF9900',
+  black: '#1E3565',
+  secondary: '#E06900',
+  light: 'rgb(83, 100, 113)',
+  iconColor: 'rgba(35, 47, 73, 0.6)',
+  bgColor: '#D7EEEB',
+  grey: '#61728F',
+  danger: '#E32828',
+  black500: '#1A1D1F',
+  black600: '#3E4554',
+  darkGrey: '#6F767E'
+};
+//# sourceMappingURL=colors.js.map

package/lib/module/lib/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colors","black","secondary","light","iconColor","bgColor","grey","danger","black500","black600","darkGrey"],"sourceRoot":"../../src","sources":["colors.ts"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpB,EAAE,EAAE,0BAA0B;EAC9B,EAAE,EAAE,0BAA0B;EAC9B,EAAE,EAAE,0BAA0B;EAC9B,EAAE,EAAE,0BAA0B;EAC9B,EAAE,EAAE,2BAA2B;EAC/B,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,SAAS;EAChBC,SAAS,EAAE,SAAS;EACpBC,KAAK,EAAE,mBAAmB;EAC1BC,SAAS,EAAE,uBAAuB;EAClCC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,SAAS;EACfC,MAAM,EAAE,SAAS;EACjBC,QAAQ,EAAE,SAAS;EACnBC,QAAQ,EAAE,SAAS;EACnBC,QAAQ,EAAE;AACZ,CAAC"}

package/lib/module/lib/config.js

@@ -0,0 +1,9 @@
+export const serverSdkBaseUrl = {
+  dev: 'https://dev.omnipay-sdk.pages.dev/',
+  prod: 'https://omnipay-sdk.pages.dev/'
+};
+export const clientSdkBaseUrl = {
+  dev: 'https://omnipay-websdk.vercel.app/',
+  prod: 'https://sdk.omnipay.ng/'
+};
+//# sourceMappingURL=config.js.map

package/lib/module/lib/config.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["serverSdkBaseUrl","dev","prod","clientSdkBaseUrl"],"sourceRoot":"../../src","sources":["config.ts"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,GAAG;EAC9BC,GAAG,EAAE,oCAAoC;EACzCC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAG;EAC9BF,GAAG,EAAE,oCAAoC;EACzCC,IAAI,EAAE;AACR,CAAC"}

package/lib/typescript/components/OmnipayView.d.ts

@@ -3,10 +3,23 @@ declare type OmnipayProps = {
     env: 'dev' | 'prod';
     publicKey: string;
     phoneNumber: string;
-    view: 'bills';
+    view: 'bills' | 'registration';
     onEnterFullScreen?: () => void;
     onExitFullScreen?: () => void;
 };
-export declare const Omnipay: ({ color, env, publicKey, phoneNumber, view, onEnterFullScreen, onExitFullScreen, }: OmnipayProps) => JSX.Element;
-export {};
+declare const Omnipay: {
+    ({ color, env, publicKey, phoneNumber, view, onEnterFullScreen, onExitFullScreen, }: OmnipayProps): JSX.Element;
+    Registration: ({ color, env, publicKey, phoneNumber, onRegistrationSuccessful, onClose, }: {
+        color: string;
+        env: "prod" | "dev";
+        publicKey: string;
+        phoneNumber: string;
+        onRegistrationSuccessful?: (({ customerRef, walletId, }: {
+            customerRef: string;
+            walletId: string;
+        }) => void) | undefined;
+        onClose?: (() => void) | undefined;
+    }) => JSX.Element;
+};
+export default Omnipay;
 //# sourceMappingURL=OmnipayView.d.ts.map

package/lib/typescript/components/OmnipayView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAYA,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAQF,eAAO,MAAM,OAAO,uFAQjB,YAAY,KAAG,WA0FjB,CAAC"}
+{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAcA,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,cAAc,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAQF,QAAA,MAAM,OAAO;yFAQV,YAAY,GAAG,WAAW;;;;;;;;;;;;CA6G5B,CAAC;AA+BF,eAAe,OAAO,CAAC"}

package/lib/typescript/components/views/Registration.d.ts

@@ -0,0 +1,15 @@
+declare type RegisterSuccessType = {
+    customerRef: string;
+    walletId: string;
+};
+declare type OmnipayProps = {
+    color: string;
+    env: 'dev' | 'prod';
+    publicKey: string;
+    phoneNumber: string;
+    onRegistrationSuccessful?: ({ customerRef, walletId, }: RegisterSuccessType) => void;
+    onClose?: () => void;
+};
+export declare const Registration: ({ color, env, publicKey, phoneNumber, onRegistrationSuccessful, onClose, }: OmnipayProps) => JSX.Element;
+export {};
+//# sourceMappingURL=Registration.d.ts.map

package/lib/typescript/components/views/Registration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Registration.d.ts","sourceRoot":"","sources":["../../../../src/components/views/Registration.tsx"],"names":[],"mappings":"AAWA,aAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,CAAC,EAC1B,WAAW,EACX,QAAQ,GACT,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,YAAY,+EAOtB,YAAY,KAAG,WA6FjB,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,4 +1,5 @@
+import Omnipay from './components/OmnipayView';
 export { OmnipayProvider } from './components/OmnipayProvider';
 export { useOmnipay } from './hooks/useOmnipay';
-export { Omnipay } from './components/OmnipayView';
+export default Omnipay;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,eAAe,OAAO,CAAC"}

package/lib/typescript/lib/colors.d.ts

@@ -0,0 +1,28 @@
+export declare const colors: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    1500: string;
+    black: string;
+    secondary: string;
+    light: string;
+    iconColor: string;
+    bgColor: string;
+    grey: string;
+    danger: string;
+    black500: string;
+    black600: string;
+    darkGrey: string;
+};
+//# sourceMappingURL=colors.d.ts.map

package/lib/typescript/lib/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BlB,CAAC"}

package/lib/typescript/lib/config.d.ts

@@ -0,0 +1,9 @@
+export declare const serverSdkBaseUrl: {
+    dev: string;
+    prod: string;
+};
+export declare const clientSdkBaseUrl: {
+    dev: string;
+    prod: string;
+};
+//# sourceMappingURL=config.d.ts.map

package/lib/typescript/lib/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/lib/config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omnipay-reactnative-sdk",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Omnipay react native sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/OmnipayProvider.tsx

@@ -288,7 +288,7 @@ export const OmnipayProvider = ({
   }
 
   const _initiateBills = ({ phoneNumber, onClose }: InitiateBillsType) => {
-    if (typeof phoneNumber === 'string' && phoneNumber.length === 11) {
+    if (typeof phoneNumber === 'string' && phoneNumber.length >= 10) {
       const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
       setWebviewUrl(webUrl);
       setIsVisible(true);
@@ -320,7 +320,7 @@ export const OmnipayProvider = ({
     if (visibilityRef.current) {
       return;
     }
-    const isPhoneNumberValid = !!phoneNumber && phoneNumber.length === 11;
+    const isPhoneNumberValid = !!phoneNumber && phoneNumber.length >= 10;
     const isValidCustomerRef = !!customerRef && !!customerRef.trim();
     const isValidUserRef = !!userRef && !!userRef.trim();
     const usesNativeShare = true;

package/src/components/OmnipayView.tsx

@@ -8,14 +8,16 @@ import {
   Linking,
 } from 'react-native';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
-import { getContact, getWebHost } from '../functions';
+import { clientSdkBaseUrl, serverSdkBaseUrl } from 'src/lib/config';
+import { getContact } from '../functions';
+import { Registration } from './views/Registration';
 
 type OmnipayProps = {
   color: string;
   env: 'dev' | 'prod';
   publicKey: string;
   phoneNumber: string;
-  view: 'bills';
+  view: 'bills' | 'registration';
   onEnterFullScreen?: () => void;
   onExitFullScreen?: () => void;
 };
@@ -26,7 +28,7 @@ type PostMessage = {
 
 type Status = 'error' | 'loading' | 'success';
 
-export const Omnipay = ({
+const Omnipay = ({
   color,
   env,
   publicKey,
@@ -37,14 +39,33 @@ export const Omnipay = ({
 }: OmnipayProps): JSX.Element => {
   const webviewRef = useRef<WebView>(null);
   const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
-  const webHost = getWebHost(env);
-  const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+  const webHost = getWebHost();
+  const webUrl = getWebUrl();
 
   const onWebviewMount = `
       window.nativeOs = ${Platform.OS};
       true;
     `;
 
+  function getWebHost() {
+    /**
+     * use client rendered app url for bills sdk,
+     * else use server rendered app url
+     */
+    if (view === 'bills') {
+      return clientSdkBaseUrl[env];
+    }
+    return serverSdkBaseUrl[env];
+  }
+
+  function getWebUrl() {
+    const themeColor = color.includes('#') ? color.split('#')[1] : color;
+    if (view === 'bills') {
+      return `${webHost}?theme=${themeColor}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+    }
+    return `${webHost}auth/register?theme=${themeColor}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+  }
+
   function postMessage(data: PostMessage) {
     if (!webviewRef.current) {
       return;
@@ -83,7 +104,7 @@ export const Omnipay = ({
     } catch (error) {}
   }
 
-  if (view !== 'bills') {
+  if (view !== 'bills' && view !== 'registration') {
     return <Text>Invalid view</Text>;
   }
 
@@ -91,7 +112,7 @@ export const Omnipay = ({
     return <Text>Invalid public key</Text>;
   }
 
-  if (phoneNumber.length !== 11) {
+  if (phoneNumber.length < 10) {
     return <Text>Invalid phone number</Text>;
   }
 
@@ -153,3 +174,6 @@ const styles = StyleSheet.create({
     left: 0,
   },
 });
+
+Omnipay.Registration = Registration;
+export default Omnipay;

package/src/components/views/Registration.tsx

@@ -0,0 +1,163 @@
+import React, { Fragment, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { serverSdkBaseUrl } from 'src/lib/config';
+
+type RegisterSuccessType = {
+  customerRef: string;
+  walletId: string;
+};
+
+type OmnipayProps = {
+  color: string;
+  env: 'dev' | 'prod';
+  publicKey: string;
+  phoneNumber: string;
+  onRegistrationSuccessful?: ({
+    customerRef,
+    walletId,
+  }: RegisterSuccessType) => void;
+  onClose?: () => void;
+};
+
+// type PostMessage = {
+//   [key: string]: unknown;
+// };
+
+type Status = 'error' | 'loading' | 'success';
+
+export const Registration = ({
+  color,
+  env,
+  publicKey,
+  phoneNumber,
+  onRegistrationSuccessful,
+  onClose,
+}: OmnipayProps): 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 serverSdkBaseUrl[env];
+  }
+
+  function getWebUrl() {
+    const themeColor = color.includes('#') ? color.split('#')[1] : color;
+    return `${webHost}auth/register?theme=${themeColor}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
+  }
+
+  //   function postMessage(data: PostMessage) {
+  //     if (!webviewRef.current) {
+  //       return;
+  //     }
+  //     try {
+  //       webviewRef.current.postMessage(JSON.stringify(data));
+  //     } catch (error) {}
+  //   }
+
+  async function onWebviewMessage(e: WebViewMessageEvent) {
+    try {
+      if (e.nativeEvent && e.nativeEvent.data) {
+        const eventData = JSON.parse(e.nativeEvent.data);
+        const { dataKey, dataValue } = eventData;
+
+        const { action, details } = JSON.parse(dataValue);
+
+        if (dataKey === 'customer.registered') {
+          if (onRegistrationSuccessful) {
+            onRegistrationSuccessful({
+              customerRef: details.customerRef,
+              walletId: details.walletId,
+            });
+          }
+          return;
+        }
+        if (action === 'close.registration') {
+          if (onClose) {
+            onClose();
+          }
+          return;
+        }
+      }
+    } catch (error) {}
+  }
+
+  if (!publicKey.includes('OMNIPUBKEY_')) {
+    return <Text>Invalid public key</Text>;
+  }
+
+  if (phoneNumber.length < 10) {
+    return <Text>Invalid phone number</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={onWebviewMessage}
+          ref={webviewRef}
+          onLoadEnd={() => setWebviewStatus('success')}
+        />
+        {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/index.tsx

@@ -1,3 +1,5 @@
+import Omnipay from './components/OmnipayView';
+
 export { OmnipayProvider } from './components/OmnipayProvider';
 export { useOmnipay } from './hooks/useOmnipay';
-export { Omnipay } from './components/OmnipayView';
+export default Omnipay;

package/src/lib/colors.ts

@@ -0,0 +1,27 @@
+export const colors = {
+  10: 'rgba(166, 130, 255, 0.1)',
+  20: 'rgba(166, 130, 255, 0.2)',
+  30: 'rgba(166, 130, 255, 0.3)',
+  40: 'rgba(166, 130, 255, 0.4)',
+  50: 'rgba(166, 130, 255, 0.10)',
+  100: '#F0E6FF',
+  200: '#DFCDFF',
+  300: '#CEB3FF',
+  400: '#BFA1FF',
+  500: '#A682FF',
+  600: '#a27dff',
+  700: '#5C41B7',
+  800: '#3E2993',
+  900: '#29187A',
+  1500: '#FF9900',
+  black: '#1E3565',
+  secondary: '#E06900',
+  light: 'rgb(83, 100, 113)',
+  iconColor: 'rgba(35, 47, 73, 0.6)',
+  bgColor: '#D7EEEB',
+  grey: '#61728F',
+  danger: '#E32828',
+  black500: '#1A1D1F',
+  black600: '#3E4554',
+  darkGrey: '#6F767E',
+};

package/src/lib/config.ts

@@ -0,0 +1,9 @@
+export const serverSdkBaseUrl = {
+  dev: 'https://dev.omnipay-sdk.pages.dev/',
+  prod: 'https://omnipay-sdk.pages.dev/',
+};
+
+export const clientSdkBaseUrl = {
+  dev: 'https://omnipay-websdk.vercel.app/',
+  prod: 'https://sdk.omnipay.ng/',
+};