omnipay-reactnative-sdk 0.2.9 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -12
- package/lib/commonjs/components/OmnipayProvider.js +23 -36
- package/lib/commonjs/components/OmnipayProvider.js.map +1 -1
- package/lib/commonjs/components/OmnipayView.js +116 -9
- package/lib/commonjs/components/OmnipayView.js.map +1 -1
- package/lib/module/components/OmnipayProvider.js +23 -36
- package/lib/module/components/OmnipayProvider.js.map +1 -1
- package/lib/module/components/OmnipayView.js +117 -10
- package/lib/module/components/OmnipayView.js.map +1 -1
- package/lib/typescript/components/OmnipayProvider.d.ts +0 -1
- package/lib/typescript/components/OmnipayProvider.d.ts.map +1 -1
- package/lib/typescript/components/OmnipayView.d.ts +7 -1
- package/lib/typescript/components/OmnipayView.d.ts.map +1 -1
- package/package.json +2 -1
- package/src/components/OmnipayProvider.tsx +25 -31
- package/src/components/OmnipayView.tsx +140 -8
package/README.md
CHANGED
|
@@ -49,7 +49,7 @@ android.enableJetifier=true
|
|
|
49
49
|
## Usage
|
|
50
50
|
|
|
51
51
|
```js
|
|
52
|
-
import Omnipay from 'omnipay-reactnative-sdk';
|
|
52
|
+
import { Omnipay } from 'omnipay-reactnative-sdk';
|
|
53
53
|
|
|
54
54
|
<Omnipay
|
|
55
55
|
color="#FD7A23"
|
|
@@ -57,20 +57,19 @@ import Omnipay from 'omnipay-reactnative-sdk';
|
|
|
57
57
|
phoneNumber="08020001111"
|
|
58
58
|
publicKey="OMNIPUBKEY_HZA3ERGYEE5XUFGTZDQV_MNKRSTA3-TU"
|
|
59
59
|
view="bills"
|
|
60
|
-
onEnterFullScreen={()=> hideExtraUiElements()}
|
|
61
|
-
onExitFullScreen={()=> unhideExtraUiElements()}
|
|
60
|
+
onEnterFullScreen={() => hideExtraUiElements()}
|
|
61
|
+
onExitFullScreen={() => unhideExtraUiElements()}
|
|
62
62
|
/>;
|
|
63
|
-
|
|
64
63
|
```
|
|
65
64
|
|
|
66
65
|
### Properties
|
|
67
66
|
|
|
68
|
-
| Name
|
|
69
|
-
|
|
|
70
|
-
| color
|
|
71
|
-
| env
|
|
72
|
-
| phoneNumber
|
|
73
|
-
| publicKey
|
|
74
|
-
| view
|
|
67
|
+
| Name | Type | Description |
|
|
68
|
+
| ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| color | String | color of primary buttons and links |
|
|
70
|
+
| env | String | dev or prod |
|
|
71
|
+
| phoneNumber | String | phone number of the customer |
|
|
72
|
+
| publicKey | String | public key of the company on omnipay |
|
|
73
|
+
| view | String | the view to render. it accepts only bills |
|
|
75
74
|
| onEnterFullScreen | Function | the sdk uses a webview to render the content and might not neccesarily fill up the whole screen. This will be called whenever the sdk needs to show a modal. Other ui elements can be hidden at this point so the modal of the sdk can take up the full width and height of the screen |
|
|
76
|
-
| onExitFullScreen
|
|
75
|
+
| onExitFullScreen | Function | this is when the hidden elements can be made visible again as the sdk is no longer displaying a modal |
|
|
@@ -21,15 +21,14 @@ const OmnipayProvider = _ref => {
|
|
|
21
21
|
color
|
|
22
22
|
} = _ref;
|
|
23
23
|
const [webviewStatus, setWebviewStatus] = (0, _react.useState)('loading');
|
|
24
|
-
const [
|
|
24
|
+
const [isVisible, setIsVisible] = (0, _react.useState)(false);
|
|
25
25
|
const webviewRef = (0, _react.useRef)(null);
|
|
26
26
|
const webHost = getWebHost();
|
|
27
27
|
const webviewStyle = getWebviewStyle();
|
|
28
28
|
const [webviewUrl, setWebviewUrl] = (0, _react.useState)(webHost);
|
|
29
|
-
const
|
|
30
|
-
console.log(useFullscreen);
|
|
29
|
+
const showWebview = !webviewUrl.includes("view") && isVisible;
|
|
31
30
|
function getWebviewStyle() {
|
|
32
|
-
if (
|
|
31
|
+
if (!showWebview) {
|
|
33
32
|
return {
|
|
34
33
|
opacity: 0,
|
|
35
34
|
height: 0,
|
|
@@ -75,12 +74,8 @@ const OmnipayProvider = _ref => {
|
|
|
75
74
|
if (dataKey === 'openLink') {
|
|
76
75
|
_reactNative.Linking.openURL(dataValue);
|
|
77
76
|
}
|
|
78
|
-
if (dataKey === 'modalOpen') {
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
if (dataKey === 'modalClosed') {
|
|
82
|
-
setUseFullScreen(false);
|
|
83
|
-
}
|
|
77
|
+
if (dataKey === 'modalOpen') {}
|
|
78
|
+
if (dataKey === 'modalClosed') {}
|
|
84
79
|
}
|
|
85
80
|
} catch (error) {}
|
|
86
81
|
}
|
|
@@ -90,43 +85,35 @@ const OmnipayProvider = _ref => {
|
|
|
90
85
|
if (phoneNumber.length === 11) {
|
|
91
86
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
92
87
|
setWebviewUrl(webUrl);
|
|
88
|
+
setIsVisible(true);
|
|
93
89
|
}
|
|
94
90
|
}
|
|
95
91
|
}, []);
|
|
96
|
-
function WebviewContainer() {
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
98
|
-
style: {
|
|
99
|
-
flex: 1,
|
|
100
|
-
height: "100%"
|
|
101
|
-
}
|
|
102
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
|
|
103
|
-
source: {
|
|
104
|
-
uri: webviewUrl
|
|
105
|
-
},
|
|
106
|
-
style: webviewStyle,
|
|
107
|
-
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
108
|
-
onMessage: onWebviewMessage,
|
|
109
|
-
ref: webviewRef,
|
|
110
|
-
onLoadStart: () => setWebviewStatus("loading"),
|
|
111
|
-
onLoadEnd: () => setWebviewStatus('success')
|
|
112
|
-
}), webviewStatus === 'loading' && !isNoviewLoaded && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
113
|
-
style: styles.webviewLoader
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
|
|
115
|
-
size: "small",
|
|
116
|
-
color: color
|
|
117
|
-
})));
|
|
118
|
-
}
|
|
119
92
|
return /*#__PURE__*/_react.default.createElement(OmnipayContext.Provider, {
|
|
120
93
|
value: {
|
|
121
|
-
initiateBills: _initiateBills
|
|
122
|
-
container: WebviewContainer()
|
|
94
|
+
initiateBills: _initiateBills
|
|
123
95
|
}
|
|
124
96
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
125
97
|
style: {
|
|
126
98
|
flex: 1,
|
|
127
99
|
height: "100%"
|
|
128
100
|
}
|
|
129
|
-
},
|
|
101
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
|
|
102
|
+
source: {
|
|
103
|
+
uri: webviewUrl
|
|
104
|
+
},
|
|
105
|
+
style: webviewStyle,
|
|
106
|
+
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
107
|
+
onMessage: onWebviewMessage,
|
|
108
|
+
ref: webviewRef,
|
|
109
|
+
onLoadStart: () => setWebviewStatus("loading"),
|
|
110
|
+
onLoadEnd: () => setWebviewStatus('success')
|
|
111
|
+
}), webviewStatus === 'loading' && showWebview && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
112
|
+
style: styles.webviewLoader
|
|
113
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
|
|
114
|
+
size: "small",
|
|
115
|
+
color: color
|
|
116
|
+
})), children));
|
|
130
117
|
};
|
|
131
118
|
exports.OmnipayProvider = OmnipayProvider;
|
|
132
119
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["OmnipayContext","React","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useState","
|
|
1
|
+
{"version":3,"names":["OmnipayContext","React","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useState","isVisible","setIsVisible","webviewRef","useRef","webHost","getWebHost","webviewStyle","getWebviewStyle","webviewUrl","setWebviewUrl","showWebview","includes","opacity","height","width","flex","styles","webview","onWebviewMount","Platform","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","getContact","Linking","openURL","_initiateBills","useCallback","phoneNumber","console","log","length","webUrl","initiateBills","uri","webviewLoader","StyleSheet","create","hide","display","full","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
|
|
@@ -5,20 +5,127 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Omnipay = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeWebview = require("react-native-webview");
|
|
10
|
+
var _functions = require("../functions");
|
|
9
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
13
|
const Omnipay = _ref => {
|
|
12
14
|
let {
|
|
13
|
-
|
|
15
|
+
color,
|
|
16
|
+
env,
|
|
17
|
+
publicKey,
|
|
18
|
+
phoneNumber,
|
|
19
|
+
view,
|
|
20
|
+
onEnterFullScreen,
|
|
21
|
+
onExitFullScreen
|
|
14
22
|
} = _ref;
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
const webviewRef = (0, _react.useRef)(null);
|
|
24
|
+
const [webviewStatus, setWebviewStatus] = (0, _react.useState)('loading');
|
|
25
|
+
const webHost = (0, _functions.getWebHost)(env);
|
|
26
|
+
const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
27
|
+
const onWebviewMount = `
|
|
28
|
+
window.nativeOs = ${_reactNative.Platform.OS};
|
|
29
|
+
true;
|
|
30
|
+
`;
|
|
31
|
+
function postMessage(data) {
|
|
32
|
+
if (!webviewRef.current) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
try {
|
|
36
|
+
webviewRef.current.postMessage(JSON.stringify(data));
|
|
37
|
+
} catch (error) {}
|
|
38
|
+
}
|
|
39
|
+
async function onWebviewMessage(e) {
|
|
40
|
+
try {
|
|
41
|
+
if (e.nativeEvent && e.nativeEvent.data) {
|
|
42
|
+
const eventData = JSON.parse(e.nativeEvent.data);
|
|
43
|
+
const {
|
|
44
|
+
dataKey,
|
|
45
|
+
dataValue
|
|
46
|
+
} = eventData;
|
|
47
|
+
if (dataKey === 'chooseContact') {
|
|
48
|
+
const contactDetails = await (0, _functions.getContact)();
|
|
49
|
+
postMessage({
|
|
50
|
+
dataKey: 'contactSelected',
|
|
51
|
+
dataValue: contactDetails
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
if (dataKey === 'modalOpen') {
|
|
55
|
+
if (onEnterFullScreen) {
|
|
56
|
+
onEnterFullScreen();
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (dataKey === 'modalClosed') {
|
|
60
|
+
if (onExitFullScreen) {
|
|
61
|
+
onExitFullScreen();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if (dataKey === 'openLink') {
|
|
65
|
+
_reactNative.Linking.openURL(dataValue);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
} catch (error) {}
|
|
69
|
+
}
|
|
70
|
+
if (view !== 'bills') {
|
|
71
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid view");
|
|
72
|
+
}
|
|
73
|
+
if (!publicKey.includes('OMNIPUBKEY_')) {
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid public key");
|
|
75
|
+
}
|
|
76
|
+
if (phoneNumber.length !== 11) {
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid phone number");
|
|
78
|
+
}
|
|
79
|
+
if (color.length < 3) {
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid color");
|
|
81
|
+
}
|
|
82
|
+
if (!['dev', 'prod'].includes(env)) {
|
|
83
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid environment");
|
|
84
|
+
}
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
86
|
+
style: styles.full
|
|
87
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.WebView, {
|
|
88
|
+
source: {
|
|
89
|
+
uri: webUrl
|
|
90
|
+
},
|
|
91
|
+
style: styles.webview,
|
|
92
|
+
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
93
|
+
onMessage: onWebviewMessage,
|
|
94
|
+
ref: webviewRef,
|
|
95
|
+
onLoadEnd: () => setWebviewStatus('success')
|
|
96
|
+
}), webviewStatus === 'loading' && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
97
|
+
style: styles.webviewLoader
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
|
|
99
|
+
size: "small",
|
|
100
|
+
color: color
|
|
101
|
+
}))));
|
|
22
102
|
};
|
|
23
103
|
exports.Omnipay = Omnipay;
|
|
104
|
+
const styles = _reactNative.StyleSheet.create({
|
|
105
|
+
hide: {
|
|
106
|
+
display: 'none'
|
|
107
|
+
},
|
|
108
|
+
full: {
|
|
109
|
+
flex: 1,
|
|
110
|
+
width: '100%',
|
|
111
|
+
height: '100%'
|
|
112
|
+
},
|
|
113
|
+
webview: {
|
|
114
|
+
flex: 1,
|
|
115
|
+
width: '100%',
|
|
116
|
+
height: '100%'
|
|
117
|
+
},
|
|
118
|
+
webviewLoader: {
|
|
119
|
+
zIndex: 3,
|
|
120
|
+
backgroundColor: 'white',
|
|
121
|
+
alignItems: 'center',
|
|
122
|
+
justifyContent: 'center',
|
|
123
|
+
flex: 1,
|
|
124
|
+
width: '100%',
|
|
125
|
+
height: '100%',
|
|
126
|
+
position: 'absolute',
|
|
127
|
+
top: 0,
|
|
128
|
+
left: 0
|
|
129
|
+
}
|
|
130
|
+
});
|
|
24
131
|
//# sourceMappingURL=OmnipayView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Omnipay","phoneNumber","
|
|
1
|
+
{"version":3,"names":["Omnipay","color","env","publicKey","phoneNumber","view","onEnterFullScreen","onExitFullScreen","webviewRef","useRef","webviewStatus","setWebviewStatus","useState","webHost","getWebHost","webUrl","onWebviewMount","Platform","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","getContact","Linking","openURL","includes","length","styles","full","uri","webview","webviewLoader","StyleSheet","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":"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"}
|
|
@@ -11,15 +11,14 @@ export const OmnipayProvider = _ref => {
|
|
|
11
11
|
color
|
|
12
12
|
} = _ref;
|
|
13
13
|
const [webviewStatus, setWebviewStatus] = useState('loading');
|
|
14
|
-
const [
|
|
14
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
15
15
|
const webviewRef = useRef(null);
|
|
16
16
|
const webHost = getWebHost();
|
|
17
17
|
const webviewStyle = getWebviewStyle();
|
|
18
18
|
const [webviewUrl, setWebviewUrl] = useState(webHost);
|
|
19
|
-
const
|
|
20
|
-
console.log(useFullscreen);
|
|
19
|
+
const showWebview = !webviewUrl.includes("view") && isVisible;
|
|
21
20
|
function getWebviewStyle() {
|
|
22
|
-
if (
|
|
21
|
+
if (!showWebview) {
|
|
23
22
|
return {
|
|
24
23
|
opacity: 0,
|
|
25
24
|
height: 0,
|
|
@@ -65,12 +64,8 @@ export const OmnipayProvider = _ref => {
|
|
|
65
64
|
if (dataKey === 'openLink') {
|
|
66
65
|
Linking.openURL(dataValue);
|
|
67
66
|
}
|
|
68
|
-
if (dataKey === 'modalOpen') {
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
if (dataKey === 'modalClosed') {
|
|
72
|
-
setUseFullScreen(false);
|
|
73
|
-
}
|
|
67
|
+
if (dataKey === 'modalOpen') {}
|
|
68
|
+
if (dataKey === 'modalClosed') {}
|
|
74
69
|
}
|
|
75
70
|
} catch (error) {}
|
|
76
71
|
}
|
|
@@ -80,43 +75,35 @@ export const OmnipayProvider = _ref => {
|
|
|
80
75
|
if (phoneNumber.length === 11) {
|
|
81
76
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
82
77
|
setWebviewUrl(webUrl);
|
|
78
|
+
setIsVisible(true);
|
|
83
79
|
}
|
|
84
80
|
}
|
|
85
81
|
}, []);
|
|
86
|
-
function WebviewContainer() {
|
|
87
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
88
|
-
style: {
|
|
89
|
-
flex: 1,
|
|
90
|
-
height: "100%"
|
|
91
|
-
}
|
|
92
|
-
}, /*#__PURE__*/React.createElement(WebView, {
|
|
93
|
-
source: {
|
|
94
|
-
uri: webviewUrl
|
|
95
|
-
},
|
|
96
|
-
style: webviewStyle,
|
|
97
|
-
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
98
|
-
onMessage: onWebviewMessage,
|
|
99
|
-
ref: webviewRef,
|
|
100
|
-
onLoadStart: () => setWebviewStatus("loading"),
|
|
101
|
-
onLoadEnd: () => setWebviewStatus('success')
|
|
102
|
-
}), webviewStatus === 'loading' && !isNoviewLoaded && /*#__PURE__*/React.createElement(View, {
|
|
103
|
-
style: styles.webviewLoader
|
|
104
|
-
}, /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
105
|
-
size: "small",
|
|
106
|
-
color: color
|
|
107
|
-
})));
|
|
108
|
-
}
|
|
109
82
|
return /*#__PURE__*/React.createElement(OmnipayContext.Provider, {
|
|
110
83
|
value: {
|
|
111
|
-
initiateBills: _initiateBills
|
|
112
|
-
container: WebviewContainer()
|
|
84
|
+
initiateBills: _initiateBills
|
|
113
85
|
}
|
|
114
86
|
}, /*#__PURE__*/React.createElement(View, {
|
|
115
87
|
style: {
|
|
116
88
|
flex: 1,
|
|
117
89
|
height: "100%"
|
|
118
90
|
}
|
|
119
|
-
},
|
|
91
|
+
}, /*#__PURE__*/React.createElement(WebView, {
|
|
92
|
+
source: {
|
|
93
|
+
uri: webviewUrl
|
|
94
|
+
},
|
|
95
|
+
style: webviewStyle,
|
|
96
|
+
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
97
|
+
onMessage: onWebviewMessage,
|
|
98
|
+
ref: webviewRef,
|
|
99
|
+
onLoadStart: () => setWebviewStatus("loading"),
|
|
100
|
+
onLoadEnd: () => setWebviewStatus('success')
|
|
101
|
+
}), webviewStatus === 'loading' && showWebview && /*#__PURE__*/React.createElement(View, {
|
|
102
|
+
style: styles.webviewLoader
|
|
103
|
+
}, /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
104
|
+
size: "small",
|
|
105
|
+
color: color
|
|
106
|
+
})), children));
|
|
120
107
|
};
|
|
121
108
|
const styles = StyleSheet.create({
|
|
122
109
|
hide: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useRef","useState","ActivityIndicator","Linking","Platform","StyleSheet","View","WebView","getContact","OmnipayContext","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useRef","useState","ActivityIndicator","Linking","Platform","StyleSheet","View","WebView","getContact","OmnipayContext","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","isVisible","setIsVisible","webviewRef","webHost","getWebHost","webviewStyle","getWebviewStyle","webviewUrl","setWebviewUrl","showWebview","includes","opacity","height","width","flex","styles","webview","onWebviewMount","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","openURL","_initiateBills","phoneNumber","console","log","length","webUrl","initiateBills","uri","webviewLoader","create","hide","display","full","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,iBAAiB,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACrF,OAAOC,OAAO,MAA+B,sBAAsB;AACnE,SAASC,UAAU,QAAQ,cAAc;AAmBzC,OAAO,MAAMC,cAAc,gBAAGX,KAAK,CAACY,aAAa,CAA4B,IAAI,CAAC;AAElF,OAAO,MAAMC,eAAe,GAAG,QAA+D;EAAA,IAA9D;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG;IAAEC;EAA4B,CAAC;EACrF,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGhB,QAAQ,CAAS,SAAS,CAAC;EACrE,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMmB,UAAU,GAAGpB,MAAM,CAAU,IAAI,CAAC;EACxC,MAAMqB,OAAO,GAAGC,UAAU,EAAE;EAC5B,MAAMC,YAAY,GAAGC,eAAe,EAAE;EACtC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGzB,QAAQ,CAACoB,OAAO,CAAC;EACrD,MAAMM,WAAW,GAAG,CAACF,UAAU,CAACG,QAAQ,CAAC,MAAM,CAAC,IAAIV,SAAS;EAG7D,SAASM,eAAe,GAAG;IACvB,IAAI,CAACG,WAAW,EAAE;MACd,OAAO;QAAEE,OAAO,EAAE,CAAC;QAAEC,MAAM,EAAE,CAAC;QAAEC,KAAK,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAE,CAAC;IACvD;IACA,OAAOC,MAAM,CAACC,OAAO;EACzB;EAEA,SAASZ,UAAU,GAAG;IAClB,IAAIR,GAAG,KAAK,KAAK,EAAE;MACf,OAAO,oCAAoC;IAC/C;IACA,OAAO,yBAAyB;EACpC;EAGA,MAAMqB,cAAc,GAAI;AAC5B,0BAA0B/B,QAAQ,CAACgC,EAAG;AACtC;AACA,KAAK;EAED,SAASC,WAAW,CAACC,IAAiB,EAAE;IACpC,IAAI,CAAClB,UAAU,CAACmB,OAAO,EAAE;MACrB;IACJ;IACA,IAAI;MACAnB,UAAU,CAACmB,OAAO,CAACF,WAAW,CAACG,IAAI,CAACC,SAAS,CAACH,IAAI,CAAC,CAAC;IACxD,CAAC,CAAC,OAAOI,KAAK,EAAE,CAAE;EACtB;EAEA,eAAeC,gBAAgB,CAACC,CAAsB,EAAE;IACpD,IAAI;MACA,IAAIA,CAAC,CAACC,WAAW,IAAID,CAAC,CAACC,WAAW,CAACP,IAAI,EAAE;QACrC,MAAMQ,SAAS,GAAGN,IAAI,CAACO,KAAK,CAACH,CAAC,CAACC,WAAW,CAACP,IAAI,CAAC;QAChD,MAAM;UAAEU,OAAO;UAAEC;QAAU,CAAC,GAAGH,SAAS;QACxC,IAAIE,OAAO,KAAK,eAAe,EAAE;UAC7B,MAAME,cAAc,GAAG,MAAM1C,UAAU,EAAE;UACzC6B,WAAW,CAAC;YACRW,OAAO,EAAE,iBAAiB;YAC1BC,SAAS,EAAEC;UACf,CAAC,CAAC;QACN;QAEA,IAAIF,OAAO,KAAK,UAAU,EAAE;UACxB7C,OAAO,CAACgD,OAAO,CAACF,SAAS,CAAC;QAC9B;QACA,IAAID,OAAO,KAAK,WAAW,EAAE,CAE7B;QACA,IAAIA,OAAO,KAAK,aAAa,EAAE,CAE/B;MACJ;IACJ,CAAC,CAAC,OAAON,KAAK,EAAE,CAAE;EACtB;EAIA,MAAMU,cAAc,GAAGrD,WAAW,CAE1BsD,WAAmB,IAClB;IACDC,OAAO,CAACC,GAAG,CAACF,WAAW,CAAC;IACxB,IAAIA,WAAW,EAAE;MACb,IAAIA,WAAW,CAACG,MAAM,KAAK,EAAE,EAAE;QAC3B,MAAMC,MAAM,GAAI,GAAEpC,OAAQ,UAASN,KAAM,yBAAwBF,SAAU,gBAAewC,WAAY,EAAC;QACvG3B,aAAa,CAAC+B,MAAM,CAAC;QACrBtC,YAAY,CAAC,IAAI,CAAC;MACtB;IACJ;EACJ,CAAC,EACD,EAAE,CACL;EAGD,oBACI,oBAAC,cAAc,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEuC,aAAa,EAAEN;IAAe;EAAE,gBAC9D,oBAAC,IAAI;IAAC,KAAK,EAAE;MAAEpB,IAAI,EAAE,CAAC;MAAEF,MAAM,EAAE;IAAO;EAAE,gBACrC,oBAAC,OAAO;IACJ,MAAM,EAAE;MACJ6B,GAAG,EAAElC;IACT,CAAE;IACF,KAAK,EAAEF,YAAa;IACpB,qCAAqC,EAAEY,cAAe;IACtD,SAAS,EAAEQ,gBAAiB;IAC5B,GAAG,EAAEvB,UAAW;IAChB,WAAW,EAAE,MAAMH,gBAAgB,CAAC,SAAS,CAAE;IAC/C,SAAS,EAAE,MAAMA,gBAAgB,CAAC,SAAS;EAAE,EAC/C,EACDD,aAAa,KAAK,SAAS,IAAIW,WAAW,iBACvC,oBAAC,IAAI;IAAC,KAAK,EAAEM,MAAM,CAAC2B;EAAc,gBAC9B,oBAAC,iBAAiB;IAAC,IAAI,EAAC,OAAO;IAAC,KAAK,EAAE7C;EAAM,EAAG,CAEvD,EAEAH,QAAQ,CACN,CACe;AAElC,CAAC;AAED,MAAMqB,MAAM,GAAG5B,UAAU,CAACwD,MAAM,CAAC;EAC7BC,IAAI,EAAE;IACFC,OAAO,EAAE;EACb,CAAC;EACDC,IAAI,EAAE;IACFhC,IAAI,EAAE,CAAC;IACPD,KAAK,EAAE,MAAM;IACbD,MAAM,EAAE;EACZ,CAAC;EACDI,OAAO,EAAE;IACLF,IAAI,EAAE,CAAC;IACPD,KAAK,EAAE,MAAM;IACbD,MAAM,EAAE;IACR;IACA;IACA;EACJ,CAAC;;EACD8B,aAAa,EAAE;IACXK,MAAM,EAAE,CAAC;IACTC,eAAe,EAAE,OAAO;IACxBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBpC,IAAI,EAAE,CAAC;IACPD,KAAK,EAAE,MAAM;IACbD,MAAM,EAAE,MAAM;IACduC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE;EACV;AACJ,CAAC,CAAC"}
|
|
@@ -1,15 +1,122 @@
|
|
|
1
|
-
import React, { Fragment,
|
|
2
|
-
import {
|
|
1
|
+
import React, { Fragment, useRef, useState } from 'react';
|
|
2
|
+
import { StyleSheet, View, Platform, ActivityIndicator, Text, Linking } from 'react-native';
|
|
3
|
+
import { WebView } from 'react-native-webview';
|
|
4
|
+
import { getContact, getWebHost } from "../functions";
|
|
3
5
|
export const Omnipay = _ref => {
|
|
4
6
|
let {
|
|
5
|
-
|
|
7
|
+
color,
|
|
8
|
+
env,
|
|
9
|
+
publicKey,
|
|
10
|
+
phoneNumber,
|
|
11
|
+
view,
|
|
12
|
+
onEnterFullScreen,
|
|
13
|
+
onExitFullScreen
|
|
6
14
|
} = _ref;
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
const webviewRef = useRef(null);
|
|
16
|
+
const [webviewStatus, setWebviewStatus] = useState('loading');
|
|
17
|
+
const webHost = getWebHost(env);
|
|
18
|
+
const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
19
|
+
const onWebviewMount = `
|
|
20
|
+
window.nativeOs = ${Platform.OS};
|
|
21
|
+
true;
|
|
22
|
+
`;
|
|
23
|
+
function postMessage(data) {
|
|
24
|
+
if (!webviewRef.current) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
try {
|
|
28
|
+
webviewRef.current.postMessage(JSON.stringify(data));
|
|
29
|
+
} catch (error) {}
|
|
30
|
+
}
|
|
31
|
+
async function onWebviewMessage(e) {
|
|
32
|
+
try {
|
|
33
|
+
if (e.nativeEvent && e.nativeEvent.data) {
|
|
34
|
+
const eventData = JSON.parse(e.nativeEvent.data);
|
|
35
|
+
const {
|
|
36
|
+
dataKey,
|
|
37
|
+
dataValue
|
|
38
|
+
} = eventData;
|
|
39
|
+
if (dataKey === 'chooseContact') {
|
|
40
|
+
const contactDetails = await getContact();
|
|
41
|
+
postMessage({
|
|
42
|
+
dataKey: 'contactSelected',
|
|
43
|
+
dataValue: contactDetails
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
if (dataKey === 'modalOpen') {
|
|
47
|
+
if (onEnterFullScreen) {
|
|
48
|
+
onEnterFullScreen();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
if (dataKey === 'modalClosed') {
|
|
52
|
+
if (onExitFullScreen) {
|
|
53
|
+
onExitFullScreen();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
if (dataKey === 'openLink') {
|
|
57
|
+
Linking.openURL(dataValue);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
} catch (error) {}
|
|
61
|
+
}
|
|
62
|
+
if (view !== 'bills') {
|
|
63
|
+
return /*#__PURE__*/React.createElement(Text, null, "Invalid view");
|
|
64
|
+
}
|
|
65
|
+
if (!publicKey.includes('OMNIPUBKEY_')) {
|
|
66
|
+
return /*#__PURE__*/React.createElement(Text, null, "Invalid public key");
|
|
67
|
+
}
|
|
68
|
+
if (phoneNumber.length !== 11) {
|
|
69
|
+
return /*#__PURE__*/React.createElement(Text, null, "Invalid phone number");
|
|
70
|
+
}
|
|
71
|
+
if (color.length < 3) {
|
|
72
|
+
return /*#__PURE__*/React.createElement(Text, null, "Invalid color");
|
|
73
|
+
}
|
|
74
|
+
if (!['dev', 'prod'].includes(env)) {
|
|
75
|
+
return /*#__PURE__*/React.createElement(Text, null, "Invalid environment");
|
|
76
|
+
}
|
|
77
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
|
|
78
|
+
style: styles.full
|
|
79
|
+
}, /*#__PURE__*/React.createElement(WebView, {
|
|
80
|
+
source: {
|
|
81
|
+
uri: webUrl
|
|
82
|
+
},
|
|
83
|
+
style: styles.webview,
|
|
84
|
+
injectedJavaScriptBeforeContentLoaded: onWebviewMount,
|
|
85
|
+
onMessage: onWebviewMessage,
|
|
86
|
+
ref: webviewRef,
|
|
87
|
+
onLoadEnd: () => setWebviewStatus('success')
|
|
88
|
+
}), webviewStatus === 'loading' && /*#__PURE__*/React.createElement(View, {
|
|
89
|
+
style: styles.webviewLoader
|
|
90
|
+
}, /*#__PURE__*/React.createElement(ActivityIndicator, {
|
|
91
|
+
size: "small",
|
|
92
|
+
color: color
|
|
93
|
+
}))));
|
|
14
94
|
};
|
|
95
|
+
const styles = StyleSheet.create({
|
|
96
|
+
hide: {
|
|
97
|
+
display: 'none'
|
|
98
|
+
},
|
|
99
|
+
full: {
|
|
100
|
+
flex: 1,
|
|
101
|
+
width: '100%',
|
|
102
|
+
height: '100%'
|
|
103
|
+
},
|
|
104
|
+
webview: {
|
|
105
|
+
flex: 1,
|
|
106
|
+
width: '100%',
|
|
107
|
+
height: '100%'
|
|
108
|
+
},
|
|
109
|
+
webviewLoader: {
|
|
110
|
+
zIndex: 3,
|
|
111
|
+
backgroundColor: 'white',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
justifyContent: 'center',
|
|
114
|
+
flex: 1,
|
|
115
|
+
width: '100%',
|
|
116
|
+
height: '100%',
|
|
117
|
+
position: 'absolute',
|
|
118
|
+
top: 0,
|
|
119
|
+
left: 0
|
|
120
|
+
}
|
|
121
|
+
});
|
|
15
122
|
//# sourceMappingURL=OmnipayView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Fragment","
|
|
1
|
+
{"version":3,"names":["React","Fragment","useRef","useState","StyleSheet","View","Platform","ActivityIndicator","Text","Linking","WebView","getContact","getWebHost","Omnipay","color","env","publicKey","phoneNumber","view","onEnterFullScreen","onExitFullScreen","webviewRef","webviewStatus","setWebviewStatus","webHost","webUrl","onWebviewMount","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","openURL","includes","length","styles","full","uri","webview","webviewLoader","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACzD,SACIC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,iBAAiB,EACjBC,IAAI,EACJC,OAAO,QACJ,cAAc;AACrB,SAASC,OAAO,QAA6B,sBAAsB;AACnE,SAASC,UAAU,EAAEC,UAAU,QAAQ,cAAc;AAkBrD,OAAO,MAAMC,OAAO,GAAG,QAQU;EAAA,IART;IACpBC,KAAK;IACLC,GAAG;IACHC,SAAS;IACTC,WAAW;IACXC,IAAI;IACJC,iBAAiB;IACjBC;EACU,CAAC;EAEX,MAAMC,UAAU,GAAGnB,MAAM,CAAU,IAAI,CAAC;EACxC,MAAM,CAACoB,aAAa,EAAEC,gBAAgB,CAAC,GAAGpB,QAAQ,CAAS,SAAS,CAAC;EACrE,MAAMqB,OAAO,GAAGZ,UAAU,CAACG,GAAG,CAAC;EAC/B,MAAMU,MAAM,GAAI,GAAED,OAAQ,UAASV,KAAM,SAAQI,IAAK,cAAaF,SAAU,gBAAeC,WAAY,EAAC;EAIzG,MAAMS,cAAc,GAAI;AAC5B,0BAA0BpB,QAAQ,CAACqB,EAAG;AACtC;AACA,KAAK;EAED,SAASC,WAAW,CAACC,IAAiB,EAAE;IACpC,IAAI,CAACR,UAAU,CAACS,OAAO,EAAE;MACrB;IACJ;IACA,IAAI;MACAT,UAAU,CAACS,OAAO,CAACF,WAAW,CAACG,IAAI,CAACC,SAAS,CAACH,IAAI,CAAC,CAAC;IACxD,CAAC,CAAC,OAAOI,KAAK,EAAE,CAAE;EACtB;EAEA,eAAeC,gBAAgB,CAACC,CAAsB,EAAE;IACpD,IAAI;MACA,IAAIA,CAAC,CAACC,WAAW,IAAID,CAAC,CAACC,WAAW,CAACP,IAAI,EAAE;QACrC,MAAMQ,SAAS,GAAGN,IAAI,CAACO,KAAK,CAACH,CAAC,CAACC,WAAW,CAACP,IAAI,CAAC;QAChD,MAAM;UAAEU,OAAO;UAAEC;QAAU,CAAC,GAAGH,SAAS;QACxC,IAAIE,OAAO,KAAK,eAAe,EAAE;UAC7B,MAAME,cAAc,GAAG,MAAM9B,UAAU,EAAE;UACzCiB,WAAW,CAAC;YACRW,OAAO,EAAE,iBAAiB;YAC1BC,SAAS,EAAEC;UACf,CAAC,CAAC;QACN;QACA,IAAIF,OAAO,KAAK,WAAW,EAAE;UACzB,IAAIpB,iBAAiB,EAAE;YACnBA,iBAAiB,EAAE;UACvB;QACJ;QACA,IAAIoB,OAAO,KAAK,aAAa,EAAE;UAC3B,IAAInB,gBAAgB,EAAE;YAClBA,gBAAgB,EAAE;UACtB;QACJ;QACA,IAAImB,OAAO,KAAK,UAAU,EAAE;UACxB9B,OAAO,CAACiC,OAAO,CAACF,SAAS,CAAC;QAC9B;MACJ;IACJ,CAAC,CAAC,OAAOP,KAAK,EAAE,CAAE;EACtB;EAGA,IAAIf,IAAI,KAAK,OAAO,EAAE;IAClB,oBAAO,oBAAC,IAAI,uBAAoB;EACpC;EAEA,IAAI,CAACF,SAAS,CAAC2B,QAAQ,CAAC,aAAa,CAAC,EAAE;IACpC,oBAAO,oBAAC,IAAI,6BAA0B;EAC1C;EAEA,IAAI1B,WAAW,CAAC2B,MAAM,KAAK,EAAE,EAAE;IAC3B,oBAAO,oBAAC,IAAI,+BAA4B;EAC5C;EAEA,IAAI9B,KAAK,CAAC8B,MAAM,GAAG,CAAC,EAAE;IAClB,oBAAO,oBAAC,IAAI,wBAAqB;EACrC;EAEA,IAAI,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAACD,QAAQ,CAAC5B,GAAG,CAAC,EAAE;IAChC,oBAAO,oBAAC,IAAI,8BAA2B;EAC3C;EAEA,oBACI,oBAAC,QAAQ,qBACL,oBAAC,IAAI;IAAC,KAAK,EAAE8B,MAAM,CAACC;EAAK,gBACrB,oBAAC,OAAO;IACJ,MAAM,EAAE;MACJC,GAAG,EAAEtB;IACT,CAAE;IACF,KAAK,EAAEoB,MAAM,CAACG,OAAQ;IACtB,qCAAqC,EAAEtB,cAAe;IACtD,SAAS,EAAEQ,gBAAiB;IAC5B,GAAG,EAAEb,UAAW;IAChB,SAAS,EAAE,MAAME,gBAAgB,CAAC,SAAS;EAAE,EAC/C,EACDD,aAAa,KAAK,SAAS,iBACxB,oBAAC,IAAI;IAAC,KAAK,EAAEuB,MAAM,CAACI;EAAc,gBAC9B,oBAAC,iBAAiB;IAAC,IAAI,EAAC,OAAO;IAAC,KAAK,EAAEnC;EAAM,EAAG,CAEvD,CACE,CACA;AAEnB,CAAC;AAED,MAAM+B,MAAM,GAAGzC,UAAU,CAAC8C,MAAM,CAAC;EAC7BC,IAAI,EAAE;IACFC,OAAO,EAAE;EACb,CAAC;EACDN,IAAI,EAAE;IACFO,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACZ,CAAC;EACDP,OAAO,EAAE;IACLK,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACZ,CAAC;EACDN,aAAa,EAAE;IACXO,MAAM,EAAE,CAAC;IACTC,eAAe,EAAE,OAAO;IACxBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBN,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdK,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE;EACV;AACJ,CAAC,CAAC"}
|
|
@@ -7,7 +7,6 @@ declare type OmnipayProviderProps = {
|
|
|
7
7
|
};
|
|
8
8
|
export declare type OmnipayContextType = {
|
|
9
9
|
initiateBills: (phoneNumber: string) => void;
|
|
10
|
-
container?: JSX.Element;
|
|
11
10
|
};
|
|
12
11
|
export declare const OmnipayContext: React.Context<OmnipayContextType | null>;
|
|
13
12
|
export declare const OmnipayProvider: ({ children, publicKey, env, color }: OmnipayProviderProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,aAAK,oBAAoB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;CACtD,CAAA;AAQD,oBAAY,kBAAkB,GAAG;IAC7B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,aAAK,oBAAoB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;CACtD,CAAA;AAQD,oBAAY,kBAAkB,GAAG;IAC7B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAA;AAED,eAAO,MAAM,cAAc,0CAAuD,CAAC;AAEnF,eAAO,MAAM,eAAe,wCAAyC,oBAAoB,gBA4GxF,CAAC"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
declare type OmnipayProps = {
|
|
2
|
+
color: string;
|
|
3
|
+
env: 'dev' | 'prod';
|
|
4
|
+
publicKey: string;
|
|
2
5
|
phoneNumber: string;
|
|
6
|
+
view: 'bills';
|
|
7
|
+
onEnterFullScreen?: () => void;
|
|
8
|
+
onExitFullScreen?: () => void;
|
|
3
9
|
};
|
|
4
|
-
export declare const Omnipay: ({ phoneNumber, }: OmnipayProps) => JSX.Element;
|
|
10
|
+
export declare const Omnipay: ({ color, env, publicKey, phoneNumber, view, onEnterFullScreen, onExitFullScreen, }: OmnipayProps) => JSX.Element;
|
|
5
11
|
export {};
|
|
6
12
|
//# sourceMappingURL=OmnipayView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAYA,aAAK,YAAY,GAAG;IAChB,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;CACjC,CAAC;AAQF,eAAO,MAAM,OAAO,uFAQjB,YAAY,KAAG,WA8FjB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "omnipay-reactnative-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Omnipay react native sdk",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -152,6 +152,7 @@
|
|
|
152
152
|
]
|
|
153
153
|
},
|
|
154
154
|
"dependencies": {
|
|
155
|
+
"react-native-modal": "^13.0.1",
|
|
155
156
|
"react-native-select-contact": "^1.6.3",
|
|
156
157
|
"react-native-webview": "^11.23.1"
|
|
157
158
|
}
|
|
@@ -18,25 +18,22 @@ type Status = 'error' | 'loading' | 'success';
|
|
|
18
18
|
|
|
19
19
|
export type OmnipayContextType = {
|
|
20
20
|
initiateBills: (phoneNumber: string) => void;
|
|
21
|
-
container?: JSX.Element
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
export const OmnipayContext = React.createContext<OmnipayContextType | null>(null);
|
|
25
24
|
|
|
26
25
|
export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProviderProps) => {
|
|
27
26
|
const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
|
|
28
|
-
const [
|
|
27
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
29
28
|
const webviewRef = useRef<WebView>(null);
|
|
30
29
|
const webHost = getWebHost();
|
|
31
30
|
const webviewStyle = getWebviewStyle();
|
|
32
31
|
const [webviewUrl, setWebviewUrl] = useState(webHost);
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
console.log(useFullscreen)
|
|
32
|
+
const showWebview = !webviewUrl.includes("view") && isVisible;
|
|
36
33
|
|
|
37
34
|
|
|
38
35
|
function getWebviewStyle() {
|
|
39
|
-
if (
|
|
36
|
+
if (!showWebview) {
|
|
40
37
|
return { opacity: 0, height: 0, width: 0, flex: 0 };
|
|
41
38
|
}
|
|
42
39
|
return styles.webview;
|
|
@@ -81,10 +78,10 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
81
78
|
Linking.openURL(dataValue);
|
|
82
79
|
}
|
|
83
80
|
if (dataKey === 'modalOpen') {
|
|
84
|
-
|
|
81
|
+
|
|
85
82
|
}
|
|
86
83
|
if (dataKey === 'modalClosed') {
|
|
87
|
-
|
|
84
|
+
|
|
88
85
|
}
|
|
89
86
|
}
|
|
90
87
|
} catch (error) { }
|
|
@@ -100,38 +97,35 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
|
|
|
100
97
|
if (phoneNumber) {
|
|
101
98
|
if (phoneNumber.length === 11) {
|
|
102
99
|
const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
103
|
-
setWebviewUrl(webUrl)
|
|
100
|
+
setWebviewUrl(webUrl);
|
|
101
|
+
setIsVisible(true);
|
|
104
102
|
}
|
|
105
103
|
}
|
|
106
104
|
},
|
|
107
105
|
[]
|
|
108
106
|
);
|
|
109
107
|
|
|
110
|
-
function WebviewContainer() {
|
|
111
|
-
return <View style={{ flex: 1, height: "100%" }}>
|
|
112
|
-
<WebView
|
|
113
|
-
source={{
|
|
114
|
-
uri: webviewUrl,
|
|
115
|
-
}}
|
|
116
|
-
style={webviewStyle}
|
|
117
|
-
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
118
|
-
onMessage={onWebviewMessage}
|
|
119
|
-
ref={webviewRef}
|
|
120
|
-
onLoadStart={() => setWebviewStatus("loading")}
|
|
121
|
-
onLoadEnd={() => setWebviewStatus('success')}
|
|
122
|
-
/>
|
|
123
|
-
{webviewStatus === 'loading' && !isNoviewLoaded && (
|
|
124
|
-
<View style={styles.webviewLoader}>
|
|
125
|
-
<ActivityIndicator size="small" color={color} />
|
|
126
|
-
</View>
|
|
127
|
-
)}
|
|
128
|
-
</View>;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
108
|
|
|
132
109
|
return (
|
|
133
|
-
<OmnipayContext.Provider value={{ initiateBills: _initiateBills
|
|
110
|
+
<OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
|
|
134
111
|
<View style={{ flex: 1, height: "100%" }}>
|
|
112
|
+
<WebView
|
|
113
|
+
source={{
|
|
114
|
+
uri: webviewUrl,
|
|
115
|
+
}}
|
|
116
|
+
style={webviewStyle}
|
|
117
|
+
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
118
|
+
onMessage={onWebviewMessage}
|
|
119
|
+
ref={webviewRef}
|
|
120
|
+
onLoadStart={() => setWebviewStatus("loading")}
|
|
121
|
+
onLoadEnd={() => setWebviewStatus('success')}
|
|
122
|
+
/>
|
|
123
|
+
{webviewStatus === 'loading' && showWebview && (
|
|
124
|
+
<View style={styles.webviewLoader}>
|
|
125
|
+
<ActivityIndicator size="small" color={color} />
|
|
126
|
+
</View>
|
|
127
|
+
)}
|
|
128
|
+
|
|
135
129
|
{children}
|
|
136
130
|
</View>
|
|
137
131
|
</OmnipayContext.Provider>
|
|
@@ -1,28 +1,160 @@
|
|
|
1
|
-
import React, { Fragment,
|
|
2
|
-
import {
|
|
1
|
+
import React, { Fragment, useRef, useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
StyleSheet,
|
|
4
|
+
View,
|
|
5
|
+
Platform,
|
|
6
|
+
ActivityIndicator,
|
|
7
|
+
Text,
|
|
8
|
+
Linking,
|
|
9
|
+
} from 'react-native';
|
|
10
|
+
import { WebView, WebViewMessageEvent } from 'react-native-webview';
|
|
11
|
+
import { getContact, getWebHost } from "../functions"
|
|
3
12
|
|
|
4
13
|
type OmnipayProps = {
|
|
14
|
+
color: string;
|
|
15
|
+
env: 'dev' | 'prod';
|
|
16
|
+
publicKey: string;
|
|
5
17
|
phoneNumber: string;
|
|
18
|
+
view: 'bills';
|
|
19
|
+
onEnterFullScreen?: () => void;
|
|
20
|
+
onExitFullScreen?: () => void;
|
|
6
21
|
};
|
|
7
22
|
|
|
23
|
+
type PostMessage = {
|
|
24
|
+
[key: string]: unknown;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type Status = 'error' | 'loading' | 'success';
|
|
8
28
|
|
|
9
29
|
export const Omnipay = ({
|
|
30
|
+
color,
|
|
31
|
+
env,
|
|
32
|
+
publicKey,
|
|
10
33
|
phoneNumber,
|
|
34
|
+
view,
|
|
35
|
+
onEnterFullScreen,
|
|
36
|
+
onExitFullScreen,
|
|
11
37
|
}: OmnipayProps): JSX.Element => {
|
|
12
|
-
const { initiateBills } = useOmnipay();
|
|
13
38
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
39
|
+
const webviewRef = useRef<WebView>(null);
|
|
40
|
+
const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
|
|
41
|
+
const webHost = getWebHost(env);
|
|
42
|
+
const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
const onWebviewMount = `
|
|
47
|
+
window.nativeOs = ${Platform.OS};
|
|
48
|
+
true;
|
|
49
|
+
`;
|
|
50
|
+
|
|
51
|
+
function postMessage(data: PostMessage) {
|
|
52
|
+
if (!webviewRef.current) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
try {
|
|
56
|
+
webviewRef.current.postMessage(JSON.stringify(data));
|
|
57
|
+
} catch (error) { }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
async function onWebviewMessage(e: WebViewMessageEvent) {
|
|
61
|
+
try {
|
|
62
|
+
if (e.nativeEvent && e.nativeEvent.data) {
|
|
63
|
+
const eventData = JSON.parse(e.nativeEvent.data);
|
|
64
|
+
const { dataKey, dataValue } = eventData;
|
|
65
|
+
if (dataKey === 'chooseContact') {
|
|
66
|
+
const contactDetails = await getContact();
|
|
67
|
+
postMessage({
|
|
68
|
+
dataKey: 'contactSelected',
|
|
69
|
+
dataValue: contactDetails,
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
if (dataKey === 'modalOpen') {
|
|
73
|
+
if (onEnterFullScreen) {
|
|
74
|
+
onEnterFullScreen();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
if (dataKey === 'modalClosed') {
|
|
78
|
+
if (onExitFullScreen) {
|
|
79
|
+
onExitFullScreen();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (dataKey === 'openLink') {
|
|
83
|
+
Linking.openURL(dataValue);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
} catch (error) { }
|
|
87
|
+
}
|
|
17
88
|
|
|
18
89
|
|
|
90
|
+
if (view !== 'bills') {
|
|
91
|
+
return <Text>Invalid view</Text>;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (!publicKey.includes('OMNIPUBKEY_')) {
|
|
95
|
+
return <Text>Invalid public key</Text>;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
if (phoneNumber.length !== 11) {
|
|
99
|
+
return <Text>Invalid phone number</Text>;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (color.length < 3) {
|
|
103
|
+
return <Text>Invalid color</Text>;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
if (!['dev', 'prod'].includes(env)) {
|
|
107
|
+
return <Text>Invalid environment</Text>;
|
|
108
|
+
}
|
|
19
109
|
|
|
20
110
|
return (
|
|
21
111
|
<Fragment>
|
|
22
|
-
|
|
112
|
+
<View style={styles.full}>
|
|
113
|
+
<WebView
|
|
114
|
+
source={{
|
|
115
|
+
uri: webUrl,
|
|
116
|
+
}}
|
|
117
|
+
style={styles.webview}
|
|
118
|
+
injectedJavaScriptBeforeContentLoaded={onWebviewMount}
|
|
119
|
+
onMessage={onWebviewMessage}
|
|
120
|
+
ref={webviewRef}
|
|
121
|
+
onLoadEnd={() => setWebviewStatus('success')}
|
|
122
|
+
/>
|
|
123
|
+
{webviewStatus === 'loading' && (
|
|
124
|
+
<View style={styles.webviewLoader}>
|
|
125
|
+
<ActivityIndicator size="small" color={color} />
|
|
126
|
+
</View>
|
|
127
|
+
)}
|
|
128
|
+
</View>
|
|
23
129
|
</Fragment>
|
|
24
130
|
);
|
|
25
131
|
};
|
|
26
132
|
|
|
27
|
-
|
|
133
|
+
const styles = StyleSheet.create({
|
|
134
|
+
hide: {
|
|
135
|
+
display: 'none',
|
|
136
|
+
},
|
|
137
|
+
full: {
|
|
138
|
+
flex: 1,
|
|
139
|
+
width: '100%',
|
|
140
|
+
height: '100%',
|
|
141
|
+
},
|
|
142
|
+
webview: {
|
|
143
|
+
flex: 1,
|
|
144
|
+
width: '100%',
|
|
145
|
+
height: '100%',
|
|
146
|
+
},
|
|
147
|
+
webviewLoader: {
|
|
148
|
+
zIndex: 3,
|
|
149
|
+
backgroundColor: 'white',
|
|
150
|
+
alignItems: 'center',
|
|
151
|
+
justifyContent: 'center',
|
|
152
|
+
flex: 1,
|
|
153
|
+
width: '100%',
|
|
154
|
+
height: '100%',
|
|
155
|
+
position: 'absolute',
|
|
156
|
+
top: 0,
|
|
157
|
+
left: 0,
|
|
158
|
+
},
|
|
159
|
+
});
|
|
28
160
|
|