boxpay-checkout-reactnative-sdk 1.0.0-beta2 → 1.0.0-beta24

package/lib/module/index.js

@@ -1,626 +1,23 @@
 "use strict";
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { View, Text, BackHandler, AppState, Image, ScrollView, StatusBar, Alert } from 'react-native'; // Added ScrollView
-import Header from "./components/header.js";
-import upiPostRequest from "./postRequest/upiPostRequest.js";
-import { decode as atob } from 'base-64';
-import { Linking } from 'react-native';
-import LottieView from 'lottie-react-native';
-import PaymentSuccess from "./components/paymentSuccess.js";
-import SessionExpire from "./components/sessionExpire.js";
-import PaymentFailed from "./components/paymentFailed.js";
-import fetchStatus from "./postRequest/fetchStatus.js";
-import UpiScreen from "./screens/upiScreen.js";
-import { router, useFocusEffect } from 'expo-router';
-import { paymentHandler, setPaymentHandler } from "./sharedContext/paymentStatusHandler.js";
-import { loadCustomFonts, loadInterCustomFonts } from "./components/fontFamily.js";
-import { setUserDataHandler, userDataHandler } from "./sharedContext/userdataHandler.js";
-import { APIStatus } from "./interface.js";
-import { checkoutDetailsHandler, setCheckoutDetailsHandler } from "./sharedContext/checkoutDetailsHandler.js";
-import WebViewScreen from "./screens/webViewScreen.js";
 import styles from "./styles/indexStyles.js";
-import getSymbolFromCurrency from 'currency-symbol-map';
-import OrderDetails from "./components/orderDetails.js";
 import { SafeAreaView } from 'react-native-safe-area-context';
-import PaymentSelectorView from "./components/paymentSelector.js";
-import SavedCardComponentView from "./components/savedCardComponent.js";
-import ShimmerView from "./components/shimmerView.js";
-import AddressComponent from "./components/addressCard.js";
-import { navigateToAddressScreen, navigateToCardScreen, navigateToUpiTimerModal } from "./navigation.js";
-import fetchSessionDetails from "./postRequest/fetchSessionDetails.js";
-import MorePaymentMethods from "./components/morePaymentMethods.js";
-import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from "./sharedContext/handlePaymentResponseHandler.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import CheckoutContainer from "./navigation.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const BoxpayCheckout = ({
   token,
-  configurationOptions = {},
+  configurationOptions,
   onPaymentResult,
   shopperToken = null
 }) => {
-  const [status, setStatus] = useState('NOACTION');
-  const [transactionId, setTransactionId] = useState('');
-  const env = configurationOptions?.ENABLE_SANDBOX_ENV ? 'test' : 'prod';
-  const appStateListenerRef = useRef(null);
-  const [loadingState, setLoadingState] = useState(false);
-  const [isFirstLoading, setIsFirstLoading] = useState(true);
-  const [amount, setAmount] = useState('');
-  const totalItemsRef = useRef(0);
-  const [address, setAddress] = useState('');
-  const [failedModalOpen, setFailedModalState] = useState(false);
-  const [successModalOpen, setSuccessModalState] = useState(false);
-  const lastOpenendUrl = useRef('');
-  const paymentFailedMessage = useRef('You may have cancelled the payment or there was a delay in response. Please retry.');
-  const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
-  const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
-  const timerRef = useRef(null);
-  const [showWebView, setShowWebView] = useState(false);
-  const [paymentUrl, setPaymentUrl] = useState(null);
-  const [paymentHtml, setPaymentHtml] = useState(null);
-  const isUpiOpeningRef = useRef(false);
-  const shippingAmountRef = useRef('');
-  const taxAmountRef = useRef('');
-  const subTotalAmountRef = useRef('');
-  const orderItemsArrayRef = useRef([]);
-  const [recommendedInstrumentsArray, setRecommendedInstruments] = useState([]);
-  const [savedCardArray, setSavedCardArray] = useState([]);
-  const [savedUpiArray, setSavedUpiArray] = useState([]);
-  let isFirstTimeLoadRef = true;
-  const handlePaymentIntent = async selectedIntent => {
-    setLoadingState(true);
-    const response = await upiPostRequest({
-      type: 'upi/intent',
-      ...(selectedIntent && {
-        upiAppDetails: {
-          upiApp: selectedIntent
-        }
-      }) // Conditionally add upiAppDetails only if upiIntent is present
-    });
-    handlePaymentResponse({
-      response: response,
-      checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
-      onSetStatus: setStatus,
-      onSetTransactionId: setTransactionId,
-      onSetPaymentHtml: setPaymentHtml,
-      onSetPaymentUrl: setPaymentUrl,
-      onSetFailedMessage: msg => paymentFailedMessage.current = msg,
-      onShowFailedModal: () => setFailedModalState(true),
-      onShowSuccessModal: ts => {
-        setSuccessfulTimeStamp(ts);
-        setSuccessModalState(true);
-      },
-      onShowSessionExpiredModal: () => setSessionExppireModalState(true),
-      onNavigateToTimer: navigateToUpiTimerModal,
-      onOpenUpiIntent: url => {
-        urlToBase64(url);
-      },
-      setLoading: setLoadingState
-    });
-  };
-  const handleUpiCollectPayment = async (upiId, instrumentRef, type) => {
-    const requestPayload = type === 'Card' ? {
-      type: 'card/token',
-      savedCard: {
-        instrumentRef: instrumentRef
-      }
-    } : {
-      type: 'upi/collect',
-      upi: instrumentRef ? {
-        instrumentRef: instrumentRef
-      } : {
-        shopperVpa: upiId
-      }
-    };
-    setLoadingState(true);
-    const response = await upiPostRequest(requestPayload);
-    handlePaymentResponse({
-      response: response,
-      upiId: upiId,
-      checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
-      onSetStatus: setStatus,
-      onSetTransactionId: setTransactionId,
-      onSetPaymentHtml: setPaymentHtml,
-      onSetPaymentUrl: setPaymentUrl,
-      onSetFailedMessage: msg => paymentFailedMessage.current = msg,
-      onShowFailedModal: () => setFailedModalState(true),
-      onShowSuccessModal: ts => {
-        setSuccessfulTimeStamp(ts);
-        setSuccessModalState(true);
-      },
-      onShowSessionExpiredModal: () => setSessionExppireModalState(true),
-      onNavigateToTimer: navigateToUpiTimerModal,
-      onOpenUpiIntent: url => {
-        urlToBase64(url);
-      },
-      setLoading: setLoadingState
-    });
-  };
-  useFocusEffect(useCallback(() => {
-    if (isFirstTimeLoadRef) {
-      isFirstTimeLoadRef = false;
-      return;
-    }
-    const refreshData = () => {
-      const address1Ref = userDataHandler.userData.address1;
-      const address2Ref = userDataHandler.userData.address2;
-      const cityRef = userDataHandler.userData.city;
-      const stateRef = userDataHandler.userData.state;
-      const postalCodeRef = userDataHandler.userData.pincode;
-      if (address2Ref == null || address2Ref == '') {
-        setAddress(`${address1Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
-      } else {
-        setAddress(`${address1Ref}, ${address2Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
-      }
-    };
-    refreshData();
-  }, []));
-  const urlToBase64 = base64String => {
-    try {
-      const decodedString = atob(base64String);
-      lastOpenendUrl.current = decodedString;
-      openUPIIntent(decodedString);
-    } catch (error) {
-      setFailedModalState(true);
-      setLoadingState(false);
-    }
-  };
-  const getRecommendedInstruments = async () => {
-    fetchSavedInstrumentsHandler({
-      setRecommendedList: setRecommendedInstruments,
-      setUpiInstrumentList: setSavedUpiArray,
-      setCardInstrumentList: setSavedCardArray
-    });
-    setIsFirstLoading(false);
-  };
-  useEffect(() => {
-    if (paymentUrl || paymentHtml) {
-      setShowWebView(true);
-    }
-  }, [paymentUrl, paymentHtml]);
-  const openUPIIntent = async url => {
-    try {
-      await Linking.openURL(url); // Open the UPI app
-      appStateListenerRef.current = AppState.addEventListener('change', handleAppStateChange);
-      isUpiOpeningRef.current = true;
-    } catch (error) {
-      isUpiOpeningRef.current = false;
-      setFailedModalState(true);
-      setLoadingState(false);
-    }
-  };
-  const handleAppStateChange = () => {
-    if (AppState.currentState === 'active' && isUpiOpeningRef.current) {
-      callFetchStatusApi();
-    }
-  };
-  const stopExpireTimerCountDown = () => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-    }
-  };
-  const callFetchStatusApi = async () => {
-    const response = await fetchStatus();
-    handleFetchStatusResponseHandler({
-      response: response,
-      checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
-      onSetStatus: setStatus,
-      onSetTransactionId: setTransactionId,
-      onSetFailedMessage: msg => paymentFailedMessage.current = msg,
-      onShowFailedModal: () => setFailedModalState(true),
-      onShowSuccessModal: ts => {
-        setSuccessfulTimeStamp(ts);
-        setSuccessModalState(true);
-      },
-      onShowSessionExpiredModal: () => setSessionExppireModalState(true),
-      setLoading: setLoadingState
-    });
-    appStateListenerRef.current?.remove();
-    isUpiOpeningRef.current = false;
-  };
-  const onExitCheckout = () => {
-    if (!loadingState) {
-      stopExpireTimerCountDown();
-      const mockPaymentResult = {
-        status: status,
-        transactionId: transactionId
-      };
-      paymentHandler.onPaymentResult(mockPaymentResult);
-      router.dismissAll();
-      return true;
-    }
-    return false;
-  };
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-      if (showWebView) {
-        setShowWebView(false);
-        paymentFailedMessage.current = checkoutDetailsHandler.checkoutDetails.errorMessage;
-        setStatus('Failed');
-        setFailedModalState(true);
-        setLoadingState(false);
-        return true;
-      } else if (loadingState) {
-        return true;
-      }
-      return onExitCheckout(); // Allow back navigation if not loading
-    });
-    return () => backHandler.remove();
-  });
-  useEffect(() => {
-    async function loadFonts() {
-      await loadCustomFonts();
-      await loadInterCustomFonts();
-    }
-    loadFonts();
-    async function loadSession() {
-      if (token != "") {
-        checkoutDetailsHandler.checkoutDetails.env = env;
-        checkoutDetailsHandler.checkoutDetails.token = token;
-        const response = await fetchSessionDetails();
-        switch (response.apiStatus) {
-          case APIStatus.Success:
-            {
-              const paymentMethods = response.data.configs.paymentMethods;
-              const enabledFields = response.data.configs.enabledFields;
-              const paymentDetails = response.data.paymentDetails;
-              const methodFlags = {
-                isUPIIntentVisible: false,
-                isUPICollectVisible: false,
-                isCardsVisible: false,
-                isWalletVisible: false,
-                isNetbankingVisible: false,
-                isEMIVisible: false,
-                isBNPLVisible: false
-              };
-              paymentMethods.forEach(method => {
-                if (method.type === 'Upi') {
-                  if (method.brand === 'UpiIntent') {
-                    methodFlags.isUPIIntentVisible = true;
-                  } else if (method.brand === 'UpiCollect') {
-                    methodFlags.isUPICollectVisible = true;
-                  }
-                } else if (method.type === 'Card') {
-                  methodFlags.isCardsVisible = true;
-                } else if (method.type === 'Wallet') {
-                  methodFlags.isWalletVisible = true;
-                } else if (method.type === 'NetBanking') {
-                  methodFlags.isNetbankingVisible = true;
-                } else if (method.type === 'Emi') {
-                  methodFlags.isEMIVisible = true;
-                } else if (method.type === 'BuyNowPayLater') {
-                  methodFlags.isBNPLVisible = true;
-                }
-              });
-              setAmount(paymentDetails.money.amountLocaleFull);
-              const currencyCode = paymentDetails?.money?.currencyCode;
-              const symbol = currencyCode ? getSymbolFromCurrency(currencyCode) ?? '₹' : '₹';
-              if (paymentDetails.order != null && paymentDetails.order.items != null) {
-                const total = paymentDetails.order.items.reduce((sum, item) => sum + (item.quantity || 1), 0);
-                totalItemsRef.current = total;
-                shippingAmountRef.current = paymentDetails.order.shippingAmountLocaleFull != null ? paymentDetails.order.shippingAmountLocaleFull : '';
-                taxAmountRef.current = paymentDetails.order.taxAmountLocaleFull != null ? paymentDetails.order.taxAmountLocaleFull : '';
-                subTotalAmountRef.current = paymentDetails.order.originalAmountLocaleFull != null ? paymentDetails.order.originalAmountLocaleFull : '';
-                const formattedItemsArray = paymentDetails.order.items.map(item => ({
-                  imageUrl: item.imageUrl,
-                  imageTitle: item.itemName,
-                  imageOty: item.quantity,
-                  imageAmount: item.amountWithoutTaxLocaleFull
-                }));
-                orderItemsArrayRef.current = formattedItemsArray;
-              }
-              const emailRef = paymentDetails.shopper.email;
-              const firstNameRef = paymentDetails.shopper.firstName;
-              const lastNameRef = paymentDetails.shopper.lastName;
-              const phoneRef = paymentDetails.shopper.phoneNumber;
-              const uniqueIdRef = paymentDetails.shopper.uniqueReference;
-              const dobRef = paymentDetails.shopper.dateOfBirth;
-              const panRef = paymentDetails.shopper.panNumber;
-              startCountdown(response.data.sessionExpiryTimestamp);
-              let labelTypeRef = null;
-              let address1Ref = null;
-              let labelNameRef = null;
-              let address2Ref = null;
-              let cityRef = null;
-              let stateRef = null;
-              let postalCodeRef = null;
-              let countryCodeRef = null;
-              if (paymentDetails.shopper.deliveryAddress != null) {
-                const deliveryObject = paymentDetails.shopper.deliveryAddress;
-                labelTypeRef = deliveryObject.labelType;
-                labelNameRef = deliveryObject.labelName;
-                address1Ref = deliveryObject.address1;
-                address2Ref = deliveryObject.address2;
-                cityRef = deliveryObject.city;
-                stateRef = deliveryObject.state;
-                postalCodeRef = deliveryObject.postalCode;
-                countryCodeRef = deliveryObject.countryCode;
-                if (address2Ref == null || address2Ref == '') {
-                  setAddress(`${address1Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
-                } else {
-                  setAddress(`${address1Ref}, ${address2Ref}, ${cityRef}, ${stateRef}, ${postalCodeRef}`);
-                }
-              }
-              if (['APPROVED', 'SUCCESS', 'PAID'].includes(response.data.status)) {
-                setSuccessfulTimeStamp(response.data.lastPaidAtTimestamp);
-                setTransactionId(response.data.lastTransactionId);
-                setStatus(response.data.status);
-                setSuccessModalState(true);
-              } else if (['EXPIRED'].includes(response.data.status)) {
-                setSessionExppireModalState(true);
-              }
-              setUserDataHandler({
-                userData: {
-                  email: emailRef,
-                  firstName: firstNameRef,
-                  lastName: lastNameRef,
-                  phone: phoneRef,
-                  uniqueId: uniqueIdRef,
-                  dob: dobRef,
-                  pan: panRef,
-                  address1: address1Ref,
-                  address2: address2Ref,
-                  city: cityRef,
-                  state: stateRef,
-                  pincode: postalCodeRef,
-                  country: countryCodeRef,
-                  labelType: labelTypeRef,
-                  labelName: labelNameRef
-                }
-              });
-              const isFieldEnabled = fieldName => {
-                return enabledFields.some(field => field.field === fieldName);
-              };
-              const isFieldEditable = fieldName => {
-                const field = enabledFields.find(field => field.field === fieldName);
-                return field?.editable === true;
-              };
-              setCheckoutDetailsHandler({
-                checkoutDetails: {
-                  currencySymbol: symbol,
-                  amount: paymentDetails.money.amountLocaleFull,
-                  token: token,
-                  brandColor: response.data.merchantDetails.checkoutTheme.primaryButtonColor,
-                  env: env,
-                  itemsLength: totalItemsRef.current,
-                  errorMessage: 'You may have cancelled the payment or there was a delay in response. Please retry.',
-                  shopperToken: shopperToken,
-                  isSuccessScreenVisible: configurationOptions?.SHOW_BOXPAY_SUCCESS_SCREEN ? true : false,
-                  isShippingAddressEnabled: isFieldEnabled('SHIPPING_ADDRESS'),
-                  isShippingAddressEditable: isFieldEditable('SHIPPING_ADDRESS'),
-                  isFullNameEnabled: isFieldEnabled('SHOPPER_NAME'),
-                  isFullNameEditable: isFieldEditable('SHOPPER_NAME'),
-                  isEmailEnabled: isFieldEnabled('SHOPPER_EMAIL'),
-                  isEmailEditable: isFieldEditable('SHOPPER_EMAIL'),
-                  isPhoneEnabled: isFieldEnabled('SHOPPER_PHONE'),
-                  isPhoneEditable: isFieldEditable('SHOPPER_PHONE'),
-                  isPanEnabled: isFieldEnabled('SHOPPER_PAN'),
-                  isPanEditable: isFieldEditable('SHOPPER_PAN'),
-                  isDOBEnabled: isFieldEnabled('SHOPPER_DOB'),
-                  isDOBEditable: isFieldEditable('SHOPPER_DOB'),
-                  isUpiIntentMethodEnabled: methodFlags.isUPIIntentVisible,
-                  isUpiCollectMethodEnabled: methodFlags.isUPICollectVisible,
-                  isCardMethodEnabled: methodFlags.isCardsVisible,
-                  isWalletMethodEnabled: methodFlags.isWalletVisible,
-                  isNetBankingMethodEnabled: methodFlags.isNetbankingVisible,
-                  isEmiMethodEnabled: methodFlags.isEMIVisible,
-                  isBnplMethodEnabled: methodFlags.isBNPLVisible
-                }
-              });
-              setPaymentHandler({
-                onPaymentResult: onPaymentResult
-              });
-              break;
-            }
-          case APIStatus.Failed:
-            {
-              Alert.alert('Error', response.data.status.reason);
-              break;
-            }
-          default:
-            {
-              break;
-            }
-        }
-      } else {
-        Alert.alert('Error', `Token is empty`);
-      }
-    }
-    loadSession();
-    if (shopperToken != null && shopperToken != "") {
-      checkoutDetailsHandler.checkoutDetails.shopperToken = shopperToken;
-      getRecommendedInstruments();
-    }
-  }, [token]);
-  const handleRecommendedSectionClick = instrumentValue => {
-    const updatedList = recommendedInstrumentsArray.map(item => ({
-      ...item,
-      isSelected: item.id === instrumentValue
-    }));
-    setRecommendedInstruments(updatedList);
-    setDefaultSavedUpiList();
-    setDefaultSavedCardsList();
-  };
-  const handleSavedUpiSectionClick = instrumentValue => {
-    const updatedList = savedUpiArray.map(item => ({
-      ...item,
-      isSelected: item.id === instrumentValue
-    }));
-    setSavedUpiArray(updatedList);
-    setDefaultRecommendedList();
-    setDefaultSavedCardsList();
-  };
-  const handleSavedCardSectionClick = instrumentValue => {
-    const updatedList = savedCardArray.map(item => ({
-      ...item,
-      isSelected: item.id === instrumentValue
-    }));
-    setSavedCardArray(updatedList);
-    setDefaultRecommendedList();
-    setDefaultSavedUpiList();
-  };
-  const setDefaultRecommendedList = () => {
-    const updatedList = recommendedInstrumentsArray.map(item => ({
-      ...item,
-      isSelected: false
-    }));
-    setRecommendedInstruments(updatedList);
-  };
-  const setDefaultSavedCardsList = () => {
-    const updatedList = savedCardArray.map(item => ({
-      ...item,
-      isSelected: false
-    }));
-    setSavedCardArray(updatedList);
-  };
-  const setDefaultSavedUpiList = () => {
-    const updatedList = savedUpiArray.map(item => ({
-      ...item,
-      isSelected: false
-    }));
-    setSavedUpiArray(updatedList);
-  };
-  function startCountdown(sessionExpiryTimestamp) {
-    if (sessionExpiryTimestamp === '') {
-      return;
-    }
-    const expiryTime = new Date(sessionExpiryTimestamp);
-    const expiryTimeIST = new Date(expiryTime.getTime() + 5.5 * 60 * 60 * 1000);
-    timerRef.current = setInterval(() => {
-      const currentTimeIST = new Date(new Date().getTime() + 5.5 * 60 * 60 * 1000);
-      const timeDiff = expiryTimeIST.getTime() - currentTimeIST.getTime();
-      if (timeDiff <= 0) {
-        if (timerRef.current) {
-          clearInterval(timerRef.current);
-        }
-        setStatus('EXPIRED');
-        setSessionExppireModalState(true);
-      }
-      // const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
-      // const minutes = Math.floor((timeDiff / (1000 * 60)) % 60);
-      // const seconds = Math.floor((timeDiff / 1000) % 60);
-
-      // console.log(`${hours}hr ${minutes}min ${seconds}sec`)
-    }, 1000);
-  }
-  return /*#__PURE__*/_jsxs(SafeAreaView, {
+  return /*#__PURE__*/_jsx(SafeAreaView, {
     style: styles.screenView,
-    children: [/*#__PURE__*/_jsx(StatusBar, {
-      barStyle: "dark-content"
-    }), isFirstLoading ? /*#__PURE__*/_jsx(ShimmerView, {}) : loadingState ? /*#__PURE__*/_jsxs(View, {
-      style: styles.loadingContainer,
-      children: [/*#__PURE__*/_jsx(LottieView, {
-        source: require('../assets/animations/boxpayLogo.json'),
-        autoPlay: true,
-        loop: true,
-        style: styles.lottieStyle
-      }), /*#__PURE__*/_jsx(Text, {
-        children: "Loading..."
-      })]
-    }) : /*#__PURE__*/_jsx(View, {
-      style: styles.screenView,
-      children: /*#__PURE__*/_jsx(ScrollView, {
-        contentContainerStyle: {
-          flexGrow: 1
-        },
-        keyboardShouldPersistTaps: "handled",
-        children: /*#__PURE__*/_jsxs(View, {
-          style: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsx(Header, {
-            onBackPress: onExitCheckout,
-            showDesc: true,
-            showSecure: true,
-            text: "Payment Details"
-          }), /*#__PURE__*/_jsx(AddressComponent, {
-            address: address,
-            navigateToAddressScreen: () => navigateToAddressScreen()
-          }), recommendedInstrumentsArray.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.container,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.headingText,
-                children: "Recommended"
-              })
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.paymentContainer,
-              children: /*#__PURE__*/_jsx(PaymentSelectorView, {
-                providerList: recommendedInstrumentsArray,
-                onProceedForward: (displayValue, instrumentValue, type) => handleUpiCollectPayment(displayValue, instrumentValue, type),
-                errorImage: require('../assets/images/ic_upi.png'),
-                isLastUsed: true,
-                onClickRadio: selectedInstrumentRef => {
-                  handleRecommendedSectionClick(selectedInstrumentRef);
-                }
-              })
-            })]
-          }), /*#__PURE__*/_jsx(UpiScreen, {
-            handleUpiPayment: selectedIntent => handlePaymentIntent(selectedIntent),
-            handleCollectPayment: (displayValue, instrumentValue, type) => handleUpiCollectPayment(displayValue, instrumentValue, type),
-            savedUpiArray: savedUpiArray,
-            onClickRadio: handleSavedUpiSectionClick
-          }), savedCardArray.length != 0 && /*#__PURE__*/_jsxs(View, {
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.headingText,
-              children: "Credit & Debit Cards"
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.paymentContainer,
-              children: /*#__PURE__*/_jsx(SavedCardComponentView, {
-                savedCards: savedCardArray,
-                onProceedForward: instrumentValue => {
-                  handleUpiCollectPayment('', instrumentValue, 'Card');
-                },
-                errorImage: require('../assets/images/ic_card.png'),
-                onClickAddCard: navigateToCardScreen,
-                onClickRadio: selectedInstrumentRef => handleSavedCardSectionClick(selectedInstrumentRef)
-              })
-            })]
-          }), /*#__PURE__*/_jsx(MorePaymentMethods, {
-            savedCards: savedCardArray
-          }), /*#__PURE__*/_jsxs(View, {
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.headingText,
-              children: "Order Summary"
-            }), /*#__PURE__*/_jsx(OrderDetails, {
-              subTotalAmount: subTotalAmountRef.current,
-              shippingAmount: shippingAmountRef.current,
-              totalAmount: amount,
-              itemsArray: orderItemsArrayRef.current,
-              taxAmount: taxAmountRef.current
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.footerContainer,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.footerText,
-              children: "Secured by"
-            }), /*#__PURE__*/_jsx(Image, {
-              source: require('../assets/images/splash-icon.png'),
-              style: styles.footerImage
-            })]
-          })]
-        })
-      })
-    }), failedModalOpen && /*#__PURE__*/_jsx(PaymentFailed, {
-      onClick: () => setFailedModalState(false),
-      errorMessage: paymentFailedMessage.current
-    }), successModalOpen && /*#__PURE__*/_jsx(PaymentSuccess, {
-      onClick: onExitCheckout,
-      transactionId: transactionId,
-      method: "UPI",
-      localDateTime: successfulTimeStamp
-    }), sessionExpireModalOpen && /*#__PURE__*/_jsx(SessionExpire, {
-      onClick: onExitCheckout
-    }), showWebView && /*#__PURE__*/_jsx(View, {
-      style: styles.webViewScreenStyle,
-      children: /*#__PURE__*/_jsx(WebViewScreen, {
-        url: paymentUrl,
-        html: paymentHtml,
-        onBackPress: () => {
-          callFetchStatusApi();
-          setShowWebView(false);
-        }
-      })
-    })]
+    children: /*#__PURE__*/_jsx(CheckoutContainer, {
+      token: token,
+      configurationOptions: configurationOptions,
+      onPaymentResult: onPaymentResult,
+      shopperToken: shopperToken
+    })
   });
 };
 export default BoxpayCheckout;