react-native-moyasar-sdk/lib/module/views/webview_payment_auth.js

Official React Native Moyasar SDK - Integrate Credit Cards, Apple Pay, Samsung Pay, and STC Pay with simple interfaces for a seamless payment experience in your React Native app

"use strict";

import { StyleSheet, Dimensions, View, KeyboardAvoidingView, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import { URL } from 'react-native-url-polyfill';
import { useState } from 'react';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  width,
  height
} = Dimensions.get('window');

/**
 * A webview component to handle 3DS payment verification.
 * @param {string} transactionUrl - The URL to the payment verification page (3DS challenge).
 * @param onPaymentAuthResult - Callback function to handle the payment verification result.
 * @param {string} [callbackUrl="https://sdk.moyasar.com/return"] - The URL to be redirected to after a 3D secure transaction. Defaults to 'https://sdk.moyasar.com/return'
 * @param {CreditCardMoyasarStyle} [style] - Optional custom styling for the webview.
 */
export const WebviewPaymentAuth = ({
  transactionUrl,
  onWebviewPaymentAuthResult: onPaymentAuthResult,
  callbackUrl = 'https://sdk.moyasar.com/return',
  style: customStyle
}) => {
  const [loading, setLoading] = useState(true);
  return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
    behavior: Platform.OS === 'ios' ? undefined : 'padding',
    children: /*#__PURE__*/_jsxs(View, {
      style: styles.container,
      children: [loading && /*#__PURE__*/_jsx(View, {
        style: styles.loadingContainer,
        children: /*#__PURE__*/_jsx(ActivityIndicator, {
          size: "large",
          color: customStyle?.webviewActivityIndicatorColor ?? '#768DFF'
        })
      }), /*#__PURE__*/_jsx(WebView, {
        source: {
          uri: transactionUrl
        },
        onLoadProgress: ({
          nativeEvent
        }) => {
          if (nativeEvent.progress >= 0.5 && loading) {
            setLoading(false);
          }
        },
        onShouldStartLoadWithRequest: request => {
          const url = new URL(request.url);
          const callbackUrlHost = new URL(callbackUrl).host;
          if (url.host === callbackUrlHost) {
            const id = url.searchParams.get('id') ?? '';
            const status = url.searchParams.get('status') ?? '';
            const message = url.searchParams.get('message') ?? '';
            onPaymentAuthResult({
              id,
              status,
              message
            });
            return false;
          }
          return true;
        }
      })]
    })
  });
};
const styles = StyleSheet.create({
  container: {
    height: height,
    width: width
  },
  loadingContainer: {
    height: height,
    width: width,
    justifyContent: 'center'
  }
});
//# sourceMappingURL=webview_payment_auth.js.map