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

package/src/index.tsx

@@ -1,752 +1,22 @@
-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 type { BoxpayCheckoutProps} from './interface';
 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';
+import CheckoutContainer from './navigation';
 
 const BoxpayCheckout = ({
   token,
-  configurationOptions = {},
+  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>
-      )}
+      <CheckoutContainer
+      token={token}
+      configurationOptions={configurationOptions}
+      onPaymentResult={onPaymentResult}
+      shopperToken={shopperToken}
+      />
     </SafeAreaView>
   );
 };