boxpay-checkout-reactnative-sdk 1.0.0-beta2

package/src/index.tsx

@@ -0,0 +1,754 @@
+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';
+import upiPostRequest from './postRequest/upiPostRequest';
+import { decode as atob } from 'base-64';
+import { Linking } from 'react-native';
+import LottieView from 'lottie-react-native';
+import PaymentSuccess from './components/paymentSuccess';
+import SessionExpire from './components/sessionExpire';
+import PaymentFailed from './components/paymentFailed';
+import fetchStatus from './postRequest/fetchStatus';
+import UpiScreen from './screens/upiScreen';
+import { router, useFocusEffect } from 'expo-router';
+import { paymentHandler, setPaymentHandler } from "./sharedContext/paymentStatusHandler";
+import { loadCustomFonts, loadInterCustomFonts } from './components/fontFamily';
+import { setUserDataHandler, userDataHandler } from './sharedContext/userdataHandler';
+import { type PaymentResult, type PaymentClass, type InstrumentDetails, type PaymentMethod, type OrderItem, type BoxpayCheckoutProps, APIStatus } from './interface';
+import { checkoutDetailsHandler, setCheckoutDetailsHandler } from './sharedContext/checkoutDetailsHandler';
+import WebViewScreen from './screens/webViewScreen';
+import styles from './styles/indexStyles';
+import getSymbolFromCurrency from 'currency-symbol-map';
+import type { ItemsProp } from './components/orderDetails';
+import OrderDetails from './components/orderDetails';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import PaymentSelectorView from './components/paymentSelector';
+import SavedCardComponentView from './components/savedCardComponent';
+import ShimmerView from './components/shimmerView';
+import AddressComponent from './components/addressCard';
+import { navigateToAddressScreen, navigateToCardScreen, navigateToUpiTimerModal } from './navigation';
+import fetchSessionDetails from './postRequest/fetchSessionDetails';
+import MorePaymentMethods from './components/morePaymentMethods';
+import { fetchSavedInstrumentsHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from './sharedContext/handlePaymentResponseHandler';
+
+const BoxpayCheckout = ({
+  token,
+  configurationOptions = {},
+  onPaymentResult,
+  shopperToken = null,
+}: BoxpayCheckoutProps) => {
+  const [status, setStatus] = useState('NOACTION');
+  const [transactionId, setTransactionId] = useState('');
+  const env = configurationOptions?.ENABLE_SANDBOX_ENV ? 'test' : 'prod';
+  const appStateListenerRef = useRef<any>(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<string>('');
+  const paymentFailedMessage = useRef<string>(
+    '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<NodeJS.Timeout | null>(null);
+  const [showWebView, setShowWebView] = useState(false);
+  const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
+  const [paymentHtml, setPaymentHtml] = useState<string | null>(null);
+  const isUpiOpeningRef = useRef(false);
+  const shippingAmountRef = useRef('');
+  const taxAmountRef = useRef('');
+  const subTotalAmountRef = useRef('');
+  const orderItemsArrayRef = useRef<ItemsProp[]>([]);
+  const [recommendedInstrumentsArray, setRecommendedInstruments] = useState<PaymentClass[]>([]);
+  const [savedCardArray, setSavedCardArray] = useState<PaymentClass[]>([]);
+  const [savedUpiArray, setSavedUpiArray] = useState<PaymentClass[]>([]);
+
+  let isFirstTimeLoadRef = true;
+
+  const handlePaymentIntent = async (selectedIntent: string) => {
+    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: string,
+    instrumentRef: string,
+    type: string
+  ) => {
+    const requestPayload: InstrumentDetails =
+      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: string) => {
+    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: string) => {
+    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: PaymentResult = {
+        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: PaymentMethod) => {
+                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: string | undefined =
+                paymentDetails?.money?.currencyCode;
+              const symbol = currencyCode
+                ? (getSymbolFromCurrency(currencyCode) ?? '₹')
+                : '₹';
+              if (
+                paymentDetails.order != null &&
+                paymentDetails.order.items != null
+              ) {
+                const total = paymentDetails.order.items.reduce(
+                  (sum: number, item: OrderItem) => 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: ItemsProp[] =
+                  paymentDetails.order.items.map((item: OrderItem) => ({
+                    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: string) =>  {
+                return enabledFields.some(
+                  (field: { field: string }) => field.field === fieldName
+                );
+              };
+      
+              const isFieldEditable = (fieldName: string) => {
+                const field = enabledFields.find(
+                  (field: { field: string; editable: boolean }) =>
+                    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: string) => {
+    const updatedList = recommendedInstrumentsArray.map((item) => ({
+      ...item,
+      isSelected: item.id === instrumentValue,
+    }));
+    setRecommendedInstruments(updatedList);
+    setDefaultSavedUpiList();
+    setDefaultSavedCardsList();
+  };
+
+  const handleSavedUpiSectionClick = (instrumentValue: string) => {
+    const updatedList = savedUpiArray.map((item) => ({
+      ...item,
+      isSelected: item.id === instrumentValue,
+    }));
+    setSavedUpiArray(updatedList);
+    setDefaultRecommendedList();
+    setDefaultSavedCardsList();
+  };
+
+  const handleSavedCardSectionClick = (instrumentValue: string) => {
+    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: string) {
+    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 (
+    <SafeAreaView style={styles.screenView}>
+      <StatusBar barStyle="dark-content" />
+      {isFirstLoading ? (
+        <ShimmerView />
+      ) : loadingState ? (
+        <View
+          style={styles.loadingContainer}
+        >
+          <LottieView
+            source={require('../assets/animations/boxpayLogo.json')}
+            autoPlay
+            loop
+            style={styles.lottieStyle}
+          />
+          <Text>Loading...</Text>
+        </View>
+      ) : (
+        <View style={styles.screenView}>
+          <ScrollView 
+            contentContainerStyle={{ flexGrow: 1 }} 
+            keyboardShouldPersistTaps="handled" 
+          >
+            <View style={{ flex: 1 }}>
+              <Header
+                onBackPress={onExitCheckout}
+                showDesc={true}
+                showSecure={true}
+                text="Payment Details"
+              />
+              <AddressComponent address={address} navigateToAddressScreen= {() => navigateToAddressScreen()}/>
+
+              {recommendedInstrumentsArray.length > 0 && (
+                <>
+                  <View
+                    style={styles.container}
+                  >
+                    <Text
+                      style={styles.headingText}
+                    >
+                      Recommended
+                    </Text>
+                  </View>
+                  <View
+                    style={styles.paymentContainer}
+                  >
+                    <PaymentSelectorView
+                      providerList={recommendedInstrumentsArray}
+                      onProceedForward={(displayValue, instrumentValue, type) =>
+                        handleUpiCollectPayment(
+                          displayValue,
+                          instrumentValue,
+                          type
+                        )
+                      }
+                      errorImage={require('../assets/images/ic_upi.png')}
+                      isLastUsed={true}
+                      onClickRadio={(selectedInstrumentRef) => {
+                        handleRecommendedSectionClick(selectedInstrumentRef);
+                      }}
+                    />
+                  </View>
+                </>
+              )}
+
+              <UpiScreen
+                handleUpiPayment={(selectedIntent) =>
+                  handlePaymentIntent(selectedIntent)
+                }
+                handleCollectPayment={(displayValue, instrumentValue, type) =>
+                  handleUpiCollectPayment(displayValue, instrumentValue, type)
+                }
+                savedUpiArray={savedUpiArray}
+                onClickRadio={handleSavedUpiSectionClick}
+              />
+
+              {savedCardArray.length != 0 && (
+                <View>
+                  <Text
+                    style={styles.headingText}
+                  >
+                    Credit & Debit Cards
+                  </Text>
+                  <View
+                    style={styles.paymentContainer}
+                  >
+                    <SavedCardComponentView
+                      savedCards={savedCardArray}
+                      onProceedForward={(instrumentValue) => {
+                        handleUpiCollectPayment('', instrumentValue, 'Card');
+                      }}
+                      errorImage={require('../assets/images/ic_card.png')}
+                      onClickAddCard={navigateToCardScreen}
+                      onClickRadio={(selectedInstrumentRef) =>
+                        handleSavedCardSectionClick(selectedInstrumentRef)
+                      }
+                    />
+                  </View>
+                </View>
+              )}
+              <MorePaymentMethods savedCards={savedCardArray}/>
+              <View>
+                <Text
+                  style={styles.headingText}
+                >
+                  Order Summary
+                </Text>
+
+                <OrderDetails
+                  subTotalAmount={subTotalAmountRef.current}
+                  shippingAmount={shippingAmountRef.current}
+                  totalAmount={amount}
+                  itemsArray={orderItemsArrayRef.current}
+                  taxAmount={taxAmountRef.current}
+                />
+              </View>
+
+              {/* Secured by BoxPay - Fixed at Bottom */}
+              <View
+                style={styles.footerContainer}
+              >
+                <Text
+                  style={styles.footerText}
+                >
+                  Secured by
+                </Text>
+                <Image
+                  source={require('../assets/images/splash-icon.png')}
+                  style={styles.footerImage}
+                />
+              </View>
+            </View>
+          </ScrollView>
+        </View>
+      )}
+
+      {/* Modals for Different Payment Statuses */}
+      {failedModalOpen && (
+        <PaymentFailed
+          onClick={() => setFailedModalState(false)}
+          errorMessage={paymentFailedMessage.current}
+        />
+      )}
+
+      {successModalOpen && (
+        <PaymentSuccess
+          onClick={onExitCheckout}
+          transactionId={transactionId}
+          method="UPI"
+          localDateTime={successfulTimeStamp}
+        />
+      )}
+
+      {sessionExpireModalOpen && <SessionExpire onClick={onExitCheckout} />}
+
+      {showWebView && (
+        <View
+          style={styles.webViewScreenStyle}
+        >
+          <WebViewScreen
+            url={paymentUrl}
+            html={paymentHtml}
+            onBackPress={() => {
+              callFetchStatusApi();
+              setShowWebView(false);
+            }}
+          />
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+export default BoxpayCheckout;