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

package/src/interface.ts

@@ -1,4 +1,4 @@
-export interface PaymentResult {
+export interface PaymentResultObject {
   status: string;
   transactionId: string;
 }
@@ -6,12 +6,13 @@ export interface PaymentResult {
 export enum ConfigurationOptions {
   ShowBoxpaySuccessScreen = 'SHOW_BOXPAY_SUCCESS_SCREEN',
   EnableSandboxEnv = 'ENABLE_SANDBOX_ENV',
+  ShowUPIQROnLoad = 'SHOW_UPI_QR_ON_LOAD',
 }
 
 export interface BoxpayCheckoutProps {
   token: string;
-  configurationOptions?: Partial<Record<ConfigurationOptions, boolean>>;
-  onPaymentResult: (result: PaymentResult) => void;
+  configurationOptions?: Partial<Record<ConfigurationOptions, boolean>> | null;
+  onPaymentResult: (result: PaymentResultObject) => void;
   shopperToken?: string | null;
 }
 
@@ -46,6 +47,10 @@ export interface CheckoutDetails {
   isBnplMethodEnabled : boolean
 }
 
+interface AnalyticsResponse {
+  id : string
+}
+
 export interface CardType {
   cardType: string; // Restricting values
   banks: Bank[];
@@ -283,6 +288,16 @@ export type FetchStatusApiResponse =
   data: ErrorResponse;
 };
 
+export type AnalyticsApiResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: AnalyticsResponse;
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
 export type PaymentMethodFetchResponse = 
 | {
   apiStatus: APIStatus.Success;
@@ -437,4 +452,33 @@ interface OrderDetails {
   taxAmountLocaleFull : string | null,
   originalAmountLocaleFull : string | null,
   items : OrderItem[] | null
+}
+
+export enum AnalyticsEvents {
+  CHECKOUT_LOADED = "CHECKOUT_LOADED",
+  ADDRESS_UPDATED = "ADDRESS_UPDATED",
+  PAYMENT_CATEGORY_SELECTED = "PAYMENT_CATEGORY_SELECTED",
+  PAYMENT_METHOD_SELECTED = "PAYMENT_METHOD_SELECTED",
+  PAYMENT_INITIATED = "PAYMENT_INITIATED",
+  PAYMENT_INSTRUMENT_PROVIDED = "PAYMENT_INSTRUMENT_PROVIDED",
+  UPI_APP_NOT_FOUND = "UPI_APP_NOT_FOUND",
+  FAILED_TO_LAUNCH_UPI_INTENT = "FAILED_TO_LAUNCH_UPI_INTENT",
+  ERROR_GETTING_UPI_URL = "ERROR_GETTING_UPI_URL",
+  SDK_CRASH = "SDK_CRASH",
+  PAYMENT_RESULT_SCREEN_DISPLAYED = "PAYMENT_RESULT_SCREEN_DISPLAYED"
+}
+
+export interface CardScreenParams {
+  duration?: number;
+  bankName?: string;
+  bankUrl?: string;
+  offerCode?: string;
+  amount?: string; 
+  percent?: number; 
+  cardType?: string;
+  issuerBrand?: string;
+}
+
+export interface UPITimerScreenParams {
+  upiId : string
 }

package/src/navigation.tsx

@@ -0,0 +1,73 @@
+// src/navigation/CheckoutNavigator.tsx
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import CardScreen from "./screens/cardScreen";
+import EmiScreen from "./screens/emiScreen";
+import UpiTimerScreen from "./screens/upiTimerScreen";
+import AddressScreen from "./screens/addressScreen";
+import BNPLScreen from "./screens/bnplScreen";
+import NetBankingScreen from "./screens/netBankingScreen";
+import SavedAddressScreen from "./screens/savedAddressScreen";
+import WalletScreen from "./screens/walletScreen";
+import MainScreen from "./screens/mainScreen";
+import type { BoxpayCheckoutProps, CardScreenParams, UPITimerScreenParams } from "./interface";
+import { NavigationIndependentTree } from "@react-navigation/native";
+
+export type CheckoutStackParamList = {
+  MainScreen : BoxpayCheckoutProps,
+  CardScreen: CardScreenParams;
+  EmiScreen: {};
+  UpiTimerScreen: UPITimerScreenParams;
+  AddressScreen : {},
+  BNPLScreen : {},
+  SavedAddressScreen : {},
+  NetBankingScreen : {},
+  WalletScreen : {},
+};
+
+const Stack = createNativeStackNavigator<CheckoutStackParamList>();
+
+const CheckoutNavigator = ({
+  token,
+  configurationOptions = null,
+  onPaymentResult,
+  shopperToken = null
+}: BoxpayCheckoutProps) => {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="MainScreen" component={MainScreen} initialParams={{
+        token,
+        configurationOptions,
+        onPaymentResult,
+        shopperToken
+      }}/>
+      <Stack.Screen name="CardScreen" component={CardScreen} />
+      <Stack.Screen name="EmiScreen" component={EmiScreen} />
+      <Stack.Screen name="UpiTimerScreen" component={UpiTimerScreen} />
+      <Stack.Screen name="AddressScreen" component={AddressScreen}/>
+      <Stack.Screen name="BNPLScreen" component={BNPLScreen}/>
+      <Stack.Screen name="NetBankingScreen" component={NetBankingScreen}/>
+      <Stack.Screen name="WalletScreen" component={WalletScreen}/>
+      <Stack.Screen name="SavedAddressScreen" component={SavedAddressScreen}/>
+    </Stack.Navigator>
+  );
+};
+
+const CheckoutContainer = ({
+  token,
+  configurationOptions = null,
+  onPaymentResult,
+  shopperToken = null
+}: BoxpayCheckoutProps)=> {
+  return (
+    <NavigationIndependentTree>
+      <CheckoutNavigator 
+      token={token}
+      configurationOptions={configurationOptions}
+      onPaymentResult={onPaymentResult}
+      shopperToken={shopperToken}
+      />
+    </NavigationIndependentTree>
+  );
+};
+
+export default CheckoutContainer;

package/src/postRequest/callUIAnalytics.ts

@@ -0,0 +1,54 @@
+import Constants from 'expo-constants';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import type { AnalyticsApiResponse } from '../interface';
+import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import { APIStatus } from '../interface';
+import axios from 'axios';
+import { getBaseURL } from '../utils/stringUtils';
+
+const callUIAnalytics = async (
+    uiEvent: string,
+    screenName: string,
+    message: string
+  ) : Promise<AnalyticsApiResponse> => {
+    const { checkoutDetails } = checkoutDetailsHandler;
+    const deviceDetails = getDeviceDetails()
+
+    const requestBody = {
+        browserData: {
+          screenHeight:
+            Constants.platform?.ios?.screenHeight ||
+            Constants.platform?.android?.screenHeight ||
+            0,
+          screenWidth:
+            Constants.platform?.ios?.screenWidth ||
+            Constants.platform?.android?.screenWidth ||
+            0,
+          acceptHeader: 'application/json',
+          userAgentHeader: 'Expo App',
+          browserLanguage: 'en_US',
+          ipAddress: 'null',
+          colorDepth: 24,
+          javaEnabled: true,
+          timeZoneOffSet: new Date().getTimezoneOffset(),
+          packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
+        },
+        callerToken : checkoutDetails.token,
+        uiEvent : uiEvent,
+        eventAttrs : {
+            errorMessage: message,
+            screenName: screenName
+        },
+        deviceDetails: deviceDetails,
+      };
+
+      try {
+        const API_URL = `${getBaseURL(checkoutDetails.env)}/ui-analytics`
+        const response = await axios.post(API_URL, requestBody);
+        return {apiStatus : APIStatus.Success, data : response.data};
+      } catch (error) {
+        return { apiStatus : APIStatus.Failed , data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };
+      }
+}
+
+export default callUIAnalytics;

package/src/postRequest/cardPostRequest.ts

@@ -1,10 +1,11 @@
 import Constants from 'expo-constants';
-import axios from 'axios';
+import api from '../serviceRequest'
 import { userDataHandler } from '../sharedContext/userdataHandler';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
 import { getDeviceDetails } from '../utils/listAndObjectUtils';
-import { APIStatus } from '../interface';
+import { AnalyticsEvents, APIStatus } from '../interface';
+import callUIAnalytics from './callUIAnalytics';
 
 const cardPostRequest = async (
   cardNumber: string,
@@ -87,11 +88,14 @@ const cardPostRequest = async (
     },
     deviceDetails: deviceDetails,
   };
+  callUIAnalytics(AnalyticsEvents.PAYMENT_CATEGORY_SELECTED,"Card Post Request",``)
+  callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,"Card Post Request",``)
 
   try {
-    const response = await axios.post("/", requestBody);
+    const response = await api.post("/", requestBody);
     return {apiStatus : APIStatus.Success, data : response.data};
   } catch (error) {
+    callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,"Card Post Request",`${error}`)
     return { apiStatus : APIStatus.Failed , data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };
   }
 };

package/src/postRequest/deleteSavedAddress.ts

@@ -1,15 +1,19 @@
-import axios from 'axios';
-import { APIStatus, type DeleteSavedAddressResponse } from '../interface';
+import api from '../serviceRequest'
+import { AnalyticsEvents, APIStatus, type DeleteSavedAddressResponse } from '../interface';
 import { userDataHandler } from '../sharedContext/userdataHandler';
+import callUIAnalytics from './callUIAnalytics';
 
 const deleteSavedAddress = async (addressRef : string) : Promise<DeleteSavedAddressResponse>=> {
     const { userData } = userDataHandler;
     const API_URL = `/shoppers/${userData.uniqueId}/addresses/${addressRef}`;
+    callUIAnalytics(AnalyticsEvents.ADDRESS_UPDATED,`Delete Address`,``)
+
     try {
-    const response = await axios.delete(API_URL);
-    return {apiStatus : APIStatus.Success, data : response.data}
+        const response = await api.delete(API_URL);
+        return {apiStatus : APIStatus.Success, data : response.data}
     } catch (error) {
-    return {apiStatus : APIStatus.Failed, data : { status: { reasonCode: 'API_FAILED', reason: `${error}` } }};
+        callUIAnalytics(AnalyticsEvents.ADDRESS_UPDATED,`Delete Address`,`${error}`)
+        return {apiStatus : APIStatus.Failed, data : { status: { reasonCode: 'API_FAILED', reason: `${error}` } }};
     }
 };
 

package/src/postRequest/emiPostRequest.ts

@@ -1,9 +1,10 @@
 import Constants from 'expo-constants';
-import axios from 'axios';
+import api from '../serviceRequest'
 import { userDataHandler } from '../sharedContext/userdataHandler';
 import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
 import { getDeviceDetails } from '../utils/listAndObjectUtils';
-import { APIStatus } from '../interface';
+import { AnalyticsEvents, APIStatus } from '../interface';
+import callUIAnalytics from './callUIAnalytics';
 
 interface EmiPostPayload {
   cardNumber?: string;
@@ -110,10 +111,15 @@ const emiPostRequest = async (
     },
     deviceDetails: deviceDetails,
   };
+
+  callUIAnalytics(AnalyticsEvents.PAYMENT_CATEGORY_SELECTED,"EMI Post Request",``)
+  callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,"EMI Post Request",``)
+  
   try {
-    const response = await axios.post("/", requestBody);
+    const response = await api.post("/", requestBody);
     return {apiStatus : APIStatus.Success, data : response.data};
   } catch (error) {
+    callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,"EMI Post Request",`${error}`)
     return { apiStatus : APIStatus.Failed, data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };
   }
 };

package/src/postRequest/fetchCardDetails.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import api from '../serviceRequest'
 import { APIStatus, type FetchCardDetailsResponse } from '../interface';
 
 const fetchCardDetails = async (
@@ -6,7 +6,7 @@ const fetchCardDetails = async (
 ) : Promise<FetchCardDetailsResponse>=> {
   const API_URL = `/bank-identification-numbers/${cardNumber}`;
   try {
-    const response = await axios.get(API_URL, {});
+    const response = await api.get(API_URL);
     return {apiStatus : APIStatus.Success, data : response.data}
   } catch (error) {
     return { apiStatus : APIStatus.Failed, data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };

package/src/postRequest/fetchPaymentMethods.ts

@@ -1,9 +1,9 @@
-import axios from 'axios';
+import api from '../serviceRequest'
 import { APIStatus, type PaymentMethodFetchResponse } from '../interface';
 
 const fetchPaymentMethods = async () : Promise<PaymentMethodFetchResponse> => {
   try {
-    const response = await axios.get("/payment-methods");
+    const response = await api.get("/payment-methods");
     return {apiStatus : APIStatus.Success, data : response.data};
   } catch (error) {
     return { apiStatus : APIStatus.Failed,data : {status: { reasonCode: 'API_FAILED', reason: `${error}` } }};

package/src/postRequest/fetchRecommendedInstruments.tsx

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import api from '../serviceRequest'
 import { userDataHandler } from '../sharedContext/userdataHandler';
 import { APIStatus, type SavedInstrumentFetchResponse } from '../interface';
 
@@ -7,7 +7,7 @@ const fetchRecommendedInstruments = async () : Promise<SavedInstrumentFetchRespo
 
   const API_URL = `/shoppers/${userData.uniqueId}/recommended-instruments`;
   try {
-    const response = await axios.get(API_URL);
+    const response = await api.get(API_URL);
     return {apiStatus : APIStatus.Success, data : response.data};
   } catch (error) {
     return { apiStatus : APIStatus.Failed,data : {status: { reasonCode: 'API_FAILED', reason: `${error}` } }};

package/src/postRequest/fetchSavedAddress.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import api from '../serviceRequest';
 import { APIStatus, type FetchSavedAddressResponse } from '../interface';
 import { userDataHandler } from '../sharedContext/userdataHandler';
 
@@ -6,7 +6,7 @@ const fetchSavedAddress = async () : Promise<FetchSavedAddressResponse>=> {
     const { userData } = userDataHandler;
     const API_URL = `/shoppers/${userData.uniqueId}/addresses`;
     try {
-    const response = await axios.get(API_URL);
+    const response = await api.get(API_URL);
     return {apiStatus : APIStatus.Success, data : response.data}
     } catch (error) {
     return {apiStatus : APIStatus.Failed, data : { status: { reasonCode: 'API_FAILED', reason: `${error}` } }}

package/src/postRequest/fetchSessionDetails.tsx

@@ -1,9 +1,9 @@
-import axios from 'axios';
+import api from '../serviceRequest';
 import { APIStatus, type FetchSessionDetailsResponse } from '../interface';
 
 const fetchSessionDetails = async () : Promise<FetchSessionDetailsResponse>=> {
   try {
-    const response = await axios.get("/", {});
+    const response = await api.get("/", {});
     return {apiStatus : APIStatus.Success, data : response.data}
   } catch (error) {
     return {apiStatus : APIStatus.Failed, data: { status: { reasonCode: 'API_FAILED', reason: `${error}` } }}

package/src/postRequest/fetchStatus.tsx

@@ -1,10 +1,10 @@
-import axios from 'axios';
+import api from '../serviceRequest';
 import type { FetchStatusApiResponse } from '../interface';
 import { APIStatus } from '../interface';
 
 const fetchStatus = async () : Promise<FetchStatusApiResponse> => {
   try {
-    const response = await axios.get("/status");
+    const response = await api.get("/status");
     return {apiStatus : APIStatus.Success, data : response.data};
   } catch (error) {
     console.error('API Error:', error);

package/src/postRequest/methodsPostRequest.tsx

@@ -1,10 +1,11 @@
 import Constants from 'expo-constants';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import axios from 'axios';
+import api from '../serviceRequest'
 import { userDataHandler } from '../sharedContext/userdataHandler';
 import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
 import { getDeviceDetails } from '../utils/listAndObjectUtils';
-import { APIStatus } from '../interface';
+import { AnalyticsEvents, APIStatus } from '../interface';
+import callUIAnalytics from './callUIAnalytics';
 
 const methodsPostRequest = async (
   instrumentDetails: string,
@@ -71,10 +72,14 @@ const methodsPostRequest = async (
     deviceDetails: deviceDetails
   };
 
+  callUIAnalytics(AnalyticsEvents.PAYMENT_CATEGORY_SELECTED,`${paymentMethod} Post Request`,``)
+  callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,`${paymentMethod} Post Request`,``)
+
   try {
-    const response = await axios.post("/", requestBody);
+    const response = await api.post("/", requestBody);
     return {apiStatus : APIStatus.Success, data : response.data};
   } catch (error) {
+    callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,`${paymentMethod} Post Request`,`${error}`)
     return { apiStatus : APIStatus.Failed, data: {status: { reasonCode: 'API_FAILED', reason: `${error}` } }};
   }
 };

package/src/postRequest/upiPostRequest.tsx

@@ -1,9 +1,10 @@
 import Constants from 'expo-constants';
-import axios from 'axios';
+import api from '../serviceRequest';
 import { userDataHandler } from '../sharedContext/userdataHandler';
 import type { DeliveryAddress, InstrumentDetails, PaymentExecutedPostResponse } from '../interface';
 import { getDeviceDetails } from '../utils/listAndObjectUtils';
-import { APIStatus } from '../interface';
+import { AnalyticsEvents, APIStatus } from '../interface';
+import callUIAnalytics from './callUIAnalytics';
 
 const upiPostRequest = async (instrumentDetails: InstrumentDetails) : Promise<PaymentExecutedPostResponse> => {
   const { userData } = userDataHandler;
@@ -60,10 +61,16 @@ const upiPostRequest = async (instrumentDetails: InstrumentDetails) : Promise<Pa
     },
     deviceDetails: deviceDetails
   };
+
+  callUIAnalytics(AnalyticsEvents.PAYMENT_CATEGORY_SELECTED,`UPI Post Request`,``)
+  callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,`UPI Post Request`,``)
+
+  
   try {
-    const response = await axios.post("/", requestBody);
+    const response = await api.post("/", requestBody);
     return {apiStatus : APIStatus.Success , data : response.data};
   } catch (error) {
+    callUIAnalytics(AnalyticsEvents.PAYMENT_INITIATED,`UPI Post Request`,`${error}`)
     return { apiStatus : APIStatus.Failed , data : { status: { reasonCode: 'API_FAILED', reason: `${error}` } }};
   }
 };

package/src/screens/addressScreen.tsx

@@ -1,4 +1,3 @@
-import { router } from 'expo-router';
 import { useEffect, useRef, useState } from 'react';
 import {
   BackHandler,
@@ -18,8 +17,17 @@ import {
   userDataHandler,
 } from '../sharedContext/userdataHandler';
 import styles from '../styles/screens/addressScreenStyles.';
+import type { CheckoutStackParamList } from '../navigation';
+import type { NavigationProp } from '@react-navigation/native';
+import { extractNames } from '../utils/stringUtils';
 
-const AddressScreen = () => {
+type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
+
+interface Props {
+  navigation: AddressScreenNavigationProp;
+}
+
+const AddressScreen = ({ navigation }: Props) => {
   const { userData } = userDataHandler;
   const { checkoutDetails } = checkoutDetailsHandler;
   const [selectedCountryCode, /*setSelectedCountryCode*/] = useState('');
@@ -73,7 +81,7 @@ const AddressScreen = () => {
   const [isMainAddressValid, setIsMainAddressValid] = useState(false);
 
   const onProceedBack = () => {
-    router.back();
+    navigation.goBack()
     return true;
   };
 
@@ -101,25 +109,6 @@ const AddressScreen = () => {
     }
   };
 
-  function extractNames(fullName: string): {
-    firstName: string;
-    lastName: string;
-  } {
-    const components = fullName
-      .trim()
-      .split(' ')
-      .filter((part) => part !== '');
-
-    if (components.length === 0) {
-      return { firstName: '', lastName: '' };
-    }
-
-    const firstName = components[0] || '';
-    const lastName = components.slice(1).join(' ') || '';
-
-    return { firstName, lastName };
-  }
-
   const onChangeEmailId = (updatedText: string) => {
     setEmailTextField(updatedText);
     const trimmedText = updatedText.trim();

package/src/screens/bnplScreen.tsx

@@ -8,11 +8,10 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { router } from 'expo-router';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
-import type { PaymentClass, PaymentResult } from '../interface';
+import type { PaymentClass, PaymentResultObject } from '../interface';
 import ShimmerView from '../components/shimmerView';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
@@ -24,8 +23,16 @@ import WebViewScreen from './webViewScreen';
 import PaymentSelectorView from '../components/paymentSelector';
 import styles from '../styles/screens/bnplScreenStyles';
 import { fetchPaymentMethodHandler, handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
+import type { CheckoutStackParamList } from '../navigation';
+import type { NavigationProp } from '@react-navigation/native';
 
-const BNPLScreen = () => {
+type BNPLScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'BNPLScreen'>;
+
+interface Props {
+  navigation: BNPLScreenNavigationProp;
+}
+
+const BNPLScreen = ({ navigation }: Props) => {
   const [bnplList, setBnplList] = useState<PaymentClass[]>([]);
   const { checkoutDetails } = checkoutDetailsHandler;
   const [loading, setLoading] = useState(false);
@@ -51,7 +58,7 @@ const BNPLScreen = () => {
 
   const onProceedBack = () => {
     if (!loading) {
-      router.back();
+      navigation.goBack();
       return true;
     }
     return false;
@@ -164,12 +171,11 @@ const BNPLScreen = () => {
   };
 
   const onExitCheckout = () => {
-    const mockPaymentResult: PaymentResult = {
+    const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
     paymentHandler.onPaymentResult(mockPaymentResult);
-    router.dismissAll();
   };
 
   useEffect(() => {

package/src/screens/cardScreen.tsx

@@ -7,8 +7,8 @@ import {
   StatusBar,
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { router, useLocalSearchParams } from 'expo-router';
 import Header from '../components/header';
+import type { RouteProp, NavigationProp } from '@react-navigation/native';
 import { Checkbox, TextInput } from 'react-native-paper';
 import LottieView from 'lottie-react-native';
 import fetchCardDetails from '../postRequest/fetchCardDetails';
@@ -17,7 +17,7 @@ import cardPostRequest from '../postRequest/cardPostRequest';
 import PaymentFailed from '../components/paymentFailed';
 import PaymentSuccess from '../components/paymentSuccess';
 import SessionExpire from '../components/sessionExpire';
-import { APIStatus, type PaymentResult } from '../interface';
+import { APIStatus, type PaymentResultObject , type CardScreenParams} from '../interface';
 import { paymentHandler } from '../sharedContext/paymentStatusHandler';
 import CvvInfoBottomSheet from '../components/cvvInfoBottomSheet';
 import WebViewScreen from './webViewScreen';
@@ -30,8 +30,19 @@ import KnowMoreBottomSheet from '../components/knowMoreBottomSheet';
 import styles from '../styles/screens/cardScreenStyles';
 import Toast from 'react-native-toast-message'
 import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
+import type { CheckoutStackParamList } from '../navigation';
 
-const CardScreen = () => {
+type CardScreenRouteProp = RouteProp<CheckoutStackParamList, 'CardScreen'>;
+
+// Define the screen's navigation properties
+type CardScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'CardScreen'>;
+
+interface Props {
+  route: CardScreenRouteProp;
+  navigation: CardScreenNavigationProp;
+}
+
+const CardScreen = ({ route, navigation }: Props) => {
   const {
     duration,
     bankName,
@@ -41,7 +52,7 @@ const CardScreen = () => {
     percent,
     cardType,
     issuerBrand,
-  } = useLocalSearchParams();
+  } = route.params as CardScreenParams || {}; 
   const durationNumber = Array.isArray(duration) ? duration[0] : duration;
   const bankNameStr = Array.isArray(bankName) ? bankName[0] : bankName;
   const bankUrlStr = Array.isArray(bankUrl) ? bankUrl[0] : bankUrl;
@@ -440,7 +451,7 @@ const CardScreen = () => {
   };
 
   const onProceedBack = () => {
-    router.back();
+    navigation.goBack()
     return true;
   };
 
@@ -536,14 +547,11 @@ const CardScreen = () => {
   }, [cardNumberText, cardExpiryText, cardCvvText, cardHolderNameText]);
 
   const onExitCheckout = () => {
-    const mockPaymentResult: PaymentResult = {
+    const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
     paymentHandler.onPaymentResult(mockPaymentResult);
-    while (router.canGoBack()) {
-      router.back();
-    }
   };
 
   useEffect(() => {