@adsesugh/monnify-react-native/lib/module/components/monnify-modal.js

A React Native component for integrating Monnify payment gateway using WebView for both React Native CLI and Expo.

"use strict";

import React from "react";
import { Modal, View, ActivityIndicator, StyleSheet } from "react-native";
import { SafeAreaView } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';
import { jsx as _jsx } from "react/jsx-runtime";
export const MonnifyModal = ({
  visible,
  checkoutUrl,
  transactionReference,
  monnifyInstance,
  onPaymentComplete
}) => {
  const handleServiceLevelVerification = async () => {
    if (onPaymentComplete) {
      const verifiedResponse = await monnifyInstance.handlePaymentCompletion(transactionReference);
      onPaymentComplete(verifiedResponse);
    }
  };
  return /*#__PURE__*/_jsx(Modal, {
    visible: visible,
    animationType: "slide",
    children: /*#__PURE__*/_jsx(SafeAreaView, {
      style: {
        flex: 1
      },
      children: /*#__PURE__*/_jsx(View, {
        style: {
          flex: 1
        },
        children: checkoutUrl ? /*#__PURE__*/_jsx(WebView, {
          source: {
            uri: checkoutUrl
          },
          onShouldStartLoadWithRequest: request => {
            // Block redirect URLs from loading
            if (request.url.includes('webhook.site/payment-complete') || request.url.includes('payment-complete')) {
              handleServiceLevelVerification();
              return false;
            }
            return true;
          },
          onNavigationStateChange: nav => {
            // Detect completion without showing redirect
            if (nav.url.includes('transaction-receipt') || nav.url.includes('payment-successful') || nav.url.includes('payment-completed') || nav.url.includes('success')) {
              handleServiceLevelVerification();
            }
          },
          startInLoadingState: true,
          renderLoading: () => /*#__PURE__*/_jsx(View, {
            style: styles.loader,
            children: /*#__PURE__*/_jsx(ActivityIndicator, {
              size: "large"
            })
          })
        }) : /*#__PURE__*/_jsx(View, {
          style: styles.loader,
          children: /*#__PURE__*/_jsx(ActivityIndicator, {
            size: "large"
          })
        })
      })
    })
  });
};
const styles = StyleSheet.create({
  loader: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});
//# sourceMappingURL=monnify-modal.js.map