@adsesugh/monnify-react-native
Version:
A React Native component for integrating Monnify payment gateway using WebView for both React Native CLI and Expo.
35 lines (34 loc) • 1.71 kB
JavaScript
import React, { useRef } from 'react';
import { Modal, StyleSheet, Platform } from 'react-native';
import { WebView } from 'react-native-webview';
import { generateHtml } from './utils';
var Monnify = function (_a) {
var paymentParams = _a.paymentParams, onSuccess = _a.onSuccess, onError = _a.onError, onDismiss = _a.onDismiss, visible = _a.visible, _b = _a.customStyles, customStyles = _b === void 0 ? {} : _b;
var webviewRef = useRef(null);
var handleMessage = function (event) {
var _a = JSON.parse(event.nativeEvent.data), eventType = _a.event, response = _a.response, data = _a.data;
switch (eventType) {
case 'onComplete':
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
break;
case 'onClose':
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(data);
break;
case 'onError':
onError === null || onError === void 0 ? void 0 : onError(response);
break;
default:
break;
}
};
return (React.createElement(Modal, { visible: visible, animationType: "slide", transparent: true, onRequestClose: onDismiss },
React.createElement(WebView, { ref: webviewRef, originWhitelist: ['*'], source: { html: generateHtml(paymentParams) }, onMessage: handleMessage, javaScriptEnabled: true, startInLoadingState: true, scalesPageToFit: Platform.OS !== 'ios', mixedContentMode: "always", style: styles.webView })));
};
var styles = StyleSheet.create({
webView: {
padding: 20,
borderRadius: 10,
overflow: 'hidden',
}
});
export default Monnify;