boxpay-checkout-reactnative-sdk 1.0.4 → 1.0.6-beta1

package/src/screens/upiScreen.tsx

@@ -65,6 +65,10 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
     isUpiCollectMethodEnabled: isUpiCollectVisible,
     isUpiIntentMethodEnabled: isUpiIntentVisible,
     isUpiQRMethodEnabled: isUpiQRVisible,
+    isUPIOtmIntentMethodEnabled : isUPIOtmIntentVisible,
+    isUPIOtmCollectMethodEnabled : isUPIOtmCollectVisible,
+    isUPIOtmQRMethodEnabled : isUPIOtmQRVisible,
+    fontFamily
   } = checkoutDetails;
   const isTablet = Math.min(width, height) >= 600
   const [qrImage, setQrImage] = useState("")
@@ -87,10 +91,10 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 
   const handleUpiQRPayment = async() => {
     const requestPayload: InstrumentDetails ={
-      type: 'upi/qr',
+      type: isUPIOtmQRVisible ? "upiotm/qr" : 'upi/qr',
     }
     setLoading(true);
-    const response = await upiPostRequest(requestPayload);
+    const response = await upiPostRequest(requestPayload, false);
     handlePaymentResponse({
       response: response,
       checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
@@ -154,20 +158,22 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 
   return (
     <View>
-      {(isUpiIntentVisible || isUpiCollectVisible || (isUpiQRVisible && isTablet)) && (
+      {((isUpiIntentVisible || isUpiCollectVisible || (isUpiQRVisible && isTablet)) || ((isUPIOtmIntentVisible || isUPIOtmCollectVisible || (isUPIOtmQRVisible && isTablet)))) && (
+       <>
         <View style={styles.headingContainer}>
-          <Text style={styles.headingText}>Pay by any UPI</Text>
+          <Text style={[styles.headingText, { fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Pay by any UPI</Text>
         </View>
-      )}
-      <View style={styles.intentBackground}>
-        <PaymentSelectorView
+        <View style={styles.intentBackground}>
+        {savedUpiArray.length != 0 && (
+          <>
+          <PaymentSelectorView
           providerList={savedUpiArray}
-          onProceedForward={(displayValue, instrumentValue, type) =>
+          onProceedForward={(displayValue : string, instrumentValue : string, type : string) =>
             handleCollectPayment(displayValue, instrumentValue, type)
           }
           errorImage={require('../../assets/images/ic_upi.png')}
           isLastUsed={false}
-          onClickRadio={(selectedValue) => {
+          onClickRadio={(selectedValue : string) => {
             setUpiQRVisible(false);
             stopTimer()
             setSelectedIntent(null);
@@ -178,7 +184,9 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
         <View
           style={styles.divider}
         />
-        {isUpiIntentVisible && (
+        </>
+        )}
+        {(isUpiIntentVisible || isUPIOtmIntentVisible) && (
           <View>
             <View style={styles.upiIntentRow}>
               {isGpayInstalled && (
@@ -187,7 +195,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={[
                       styles.intentIconBorder,
                       selectedIntent === 'GPay' && {
-                        borderColor: checkoutDetails.brandColor,
+                        borderColor: checkoutDetails.buttonColor,
                         borderWidth: 2,
                       },
                     ]}
@@ -208,9 +216,9 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={[
                       styles.intentTitle,
                       selectedIntent === 'GPay' && {
-                        color: checkoutDetails.brandColor,
-                        fontFamily: 'Poppins-SemiBold',
-                      },
+                        color: checkoutDetails.buttonColor,
+                        fontFamily: fontFamily.semiBold,
+                      }
                     ]}
                   >
                     GPay
@@ -223,7 +231,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={[
                       styles.intentIconBorder,
                       selectedIntent === 'PhonePe' && {
-                        borderColor: checkoutDetails.brandColor,
+                        borderColor: checkoutDetails.buttonColor,
                         borderWidth: 2,
                       },
                     ]}
@@ -245,8 +253,8 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={[
                       styles.intentTitle,
                       selectedIntent === 'PhonePe' && {
-                        color: checkoutDetails.brandColor,
-                        fontFamily: 'Poppins-SemiBold',
+                        color: checkoutDetails.buttonColor,
+                        fontFamily: fontFamily.semiBold,
                       },
                     ]}
                   >
@@ -260,7 +268,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={[
                       styles.intentIconBorder,
                       selectedIntent === 'PayTm' && {
-                        borderColor: checkoutDetails.brandColor,
+                        borderColor: checkoutDetails.buttonColor,
                         borderWidth: 2,
                       },
                     ]}
@@ -281,8 +289,8 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={[
                       styles.intentTitle,
                       selectedIntent === 'PayTm' && {
-                        color: checkoutDetails.brandColor,
-                        fontFamily: 'Poppins-SemiBold',
+                        color: checkoutDetails.buttonColor,
+                        fontFamily: fontFamily.semiBold,
                       },
                     ]}
                   >
@@ -307,7 +315,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     style={styles.intentIcon}
                   />
                 </Pressable>
-                <Text style={styles.intentTitle}>Others</Text>
+                <Text style={[styles.intentTitle, {fontFamily: fontFamily.semiBold,}]}>Others</Text>
               </View>
             </View>
 
@@ -315,11 +323,11 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               <Pressable
                 style={[
                   styles.buttonContainer,
-                  { backgroundColor: checkoutDetails.brandColor },
+                  { backgroundColor: checkoutDetails.buttonColor },
                 ]}
                 onPress={() => handleUpiPayment(selectedIntent)}
               >
-                <Text style={styles.buttonText}>
+                <Text style={[styles.buttonText, {color : checkoutDetails.buttonTextColor, fontFamily: fontFamily.semiBold,}]}>
                   Pay{' '}
                   <Text style={styles.currencySymbol}>
                     {checkoutDetails.currencySymbol}
@@ -331,7 +339,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
           </View>
         )}
 
-        {isUpiCollectVisible && (
+        {(isUpiCollectVisible || isUPIOtmCollectVisible) && (
           <View>
             {upiCollectVisible ? (
               <ImageBackground
@@ -339,7 +347,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                 resizeMode="cover"
                 style={{
                   paddingBottom: 34,
-                  marginTop: isUpiIntentVisible ? 24 : 0,
+                  marginTop: (isUpiIntentVisible || isUPIOtmIntentVisible) ? 24 : 0,
                 }}
               >
                 <Pressable
@@ -351,12 +359,13 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                     <Image
                       source={require('../../assets/images/add_icon.png')}
                       style={[styles.imageStyle,{
-                        tintColor: checkoutDetails.brandColor,
+                        tintColor: checkoutDetails.buttonColor,
                       }]}
                     />
                     <Text
                       style={[styles.subHeaderText,{
-                        color: checkoutDetails.brandColor,
+                        color: checkoutDetails.buttonColor, paddingTop : 4,
+                        fontFamily: fontFamily.semiBold,
                       }]}
                     >
                       Add new UPI Id
@@ -376,8 +385,8 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                 </Pressable>
               </ImageBackground>
             ) : (
-              <View style={{ paddingBottom: isUpiCollectVisible && (!isUpiQRVisible && !isTablet) ? 16 : 0 }}>
-                {isUpiIntentVisible && (
+              <View style={{ paddingBottom: (isUpiCollectVisible || isUPIOtmCollectVisible) && ((!isUpiQRVisible || !isUPIOtmQRVisible) && !isTablet) ? 16 : 0 }}>
+                {(isUpiIntentVisible || isUPIOtmIntentVisible) && (
                   <View
                     style={styles.subContainerDivider}
                   />
@@ -387,16 +396,17 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                   onPress={() => handleUpiCollectChevronClick()}
                 >
                   {/* Icon and Text Wrapper */}
-                  <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom : 16 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom : 10 }}>
                     <Image
                       source={require('../../assets/images/add_icon.png')}
                       style={[styles.imageStyle,{
-                        tintColor: checkoutDetails.brandColor,
+                        tintColor: checkoutDetails.buttonColor,
                       }]}
                     />
                     <Text
                       style={[styles.subHeaderText,{
-                        color: checkoutDetails.brandColor
+                        color: checkoutDetails.buttonColor, paddingTop : 4,
+                        fontFamily: fontFamily.semiBold,
                       }]}
                     >
                       Add new UPI Id
@@ -427,6 +437,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                 <Text
                   style={[styles.labelText,{
                     color: upiIdFocused ? '#2D2B32' : '#ADACB0',
+                    fontFamily: fontFamily.regular,
                   }]}
                 >
                   Enter UPI Id
@@ -442,7 +453,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                   outline: '#E6E6E6',
                 },
               }}
-              style={styles.textInput}
+              style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
               error={upiCollectError}
               right={
                 upiCollectError ? (
@@ -465,7 +476,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
             />
             {upiCollectError && (
               <Text
-                style={styles.errorText}
+                style={[styles.errorText, {fontFamily: fontFamily.regular,}]}
               >
                 Please enter a valid UPI Id
               </Text>
@@ -474,7 +485,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               <Pressable
                 style={[
                   styles.buttonContainer,
-                  { backgroundColor: checkoutDetails.brandColor },
+                  { backgroundColor: checkoutDetails.buttonColor },
                 ]}
                 onPress={() => {
                   if (upiCollectValid) {
@@ -484,7 +495,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                   }
                 }}
               >
-                <Text style={styles.buttonText}>
+                <Text style={[styles.buttonText, {color : checkoutDetails.buttonTextColor, fontFamily: fontFamily.semiBold,}]}>
                   Verify & Pay{' '}
                   <Text style={styles.currencySymbol}>
                     {checkoutDetails.currencySymbol}
@@ -496,7 +507,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               <Pressable
                 style={[styles.buttonContainer, { backgroundColor: '#E6E6E6' }]}
               >
-                <Text style={[styles.buttonText, { color: '#ADACB0' }]}>
+                <Text style={[styles.buttonText, { color: '#ADACB0', fontFamily: fontFamily.semiBold, }]}>
                   Verify & Pay{' '}
                   <Text style={[styles.currencySymbol, { color: '#ADACB0' }]}>
                     {checkoutDetails.currencySymbol}
@@ -508,7 +519,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
           </View>
         )}
 
-        {(isUpiQRVisible && isTablet) && (
+        {((isUpiQRVisible || isUPIOtmQRVisible) && isTablet) && (
           <View>
           {upiQRVisible ? (
             <ImageBackground
@@ -516,7 +527,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               resizeMode="cover"
               style={{
                 paddingBottom: 34,
-                marginTop: isUpiIntentVisible || isUpiCollectVisible ? 24 : 0,
+                marginTop: (isUpiIntentVisible || isUPIOtmIntentVisible) || (isUpiCollectVisible || isUPIOtmCollectVisible) ? 24 : 0,
               }}
             >
               <Pressable
@@ -528,12 +539,13 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                   <Image
                     source={require('../../assets/images/ic_qr.png')}
                     style={[styles.imageStyle,{
-                      tintColor: checkoutDetails.brandColor,
+                      tintColor: checkoutDetails.buttonColor,
                     }]}
                   />
                   <Text
                     style={[styles.subHeaderText,{
-                      color: checkoutDetails.brandColor
+                      color: checkoutDetails.buttonColor,
+                      fontFamily: fontFamily.semiBold,
                     }]}
                   >
                     Pay Using QR
@@ -553,8 +565,8 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               </Pressable>
             </ImageBackground>
           ) : (
-            <View style={{ paddingBottom: isUpiCollectVisible || isUpiIntentVisible ? 16 : 0 }}>
-              {(isUpiIntentVisible || isUpiCollectVisible) && (
+            <View style={{ paddingBottom: (isUpiCollectVisible || isUPIOtmCollectVisible) || (isUpiIntentVisible || isUPIOtmIntentVisible) ? 16 : 0 }}>
+              {((isUpiIntentVisible || isUPIOtmIntentVisible) || (isUpiCollectVisible || isUPIOtmCollectVisible)) && (
                 <View
                   style={styles.subContainerDivider}
                 />
@@ -568,12 +580,13 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
                   <Image
                     source={require('../../assets/images/ic_qr.png')}
                     style={[styles.imageStyle,{
-                      tintColor: checkoutDetails.brandColor,
+                      tintColor: checkoutDetails.buttonColor,
                     }]}
                   />
                   <Text
                     style={[styles.subHeaderText,{
-                      color: checkoutDetails.brandColor
+                      color: checkoutDetails.buttonColor,
+                      fontFamily: fontFamily.semiBold,
                     }]}
                   >
                    Pay Using QR
@@ -599,7 +612,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 {upiQRVisible && (
   <View
     style={{
-      paddingBottom: isUpiCollectVisible || isUpiIntentVisible ? 16 : 0,
+      paddingBottom: (isUpiCollectVisible || isUPIOtmCollectVisible) || (isUpiIntentVisible || isUPIOtmIntentVisible) ? 16 : 0,
       flexDirection: "row", // ✅ Arrange QR + text in a row
       alignItems: "center", // ✅ Align vertically in the center
     }}
@@ -616,7 +629,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 
         {qrIsExpired && (
           <TouchableOpacity style={styles.retryButton} onPress={handleUpiQRPayment}>
-            <Text style={[styles.retryText, { color: checkoutDetails.brandColor }]}>
+            <Text style={[styles.retryText, { color: checkoutDetails.buttonColor }]}>
               ↻ Retry
             </Text>
           </TouchableOpacity>
@@ -628,7 +641,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
     <View style={styles.textContainer}>
       <Text style={styles.label}>Scan & Pay with UPI Application</Text>
       <Text style={styles.label}>QR code will expire in</Text>
-      <Text style={[styles.timer, { color: checkoutDetails.brandColor }]}>
+      <Text style={[styles.timer, { color: checkoutDetails.buttonColor }]}>
         {formatTime(timeRemaining)}
       </Text>
     </View>
@@ -636,6 +649,8 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 )}
 
       </View>
+       </>
+      )}
     </View>
   );
 };

package/src/screens/upiTimerScreen.tsx

@@ -16,11 +16,12 @@ import { paymentHandler } from '../sharedContext/paymentStatusHandler';
 import CircularProgressBar from '../components/circularProgress';
 import type { PaymentResultObject, UPITimerScreenParams } from '../interface';
 import styles from '../styles/screens/upiTimerScreenStyle';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import { handleFetchStatusResponseHandler } from '../sharedContext/handlePaymentResponseHandler';
 import type { CheckoutStackParamList } from '../navigation';
 import type {RouteProp, NavigationProp} from '@react-navigation/native'
 import { useCountdown , formatTime} from '../utility';
+import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
 type UpiTimerScreenRouteProp = RouteProp<CheckoutStackParamList, 'UpiTimerScreen'>;
 
@@ -72,10 +73,14 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
   }, [failedModalOpen, successModalOpen, sessionExpireModalOpen]);
 
   const onExitCheckout = () => {
+    setSuccessModalState(false)
+    setSessionExppireModalState(false)
     const mockPaymentResult: PaymentResultObject = {
       status: status,
       transactionId: transactionId,
     };
+    setUserDataHandlerToDefault()
+    setCheckOutDetailsHandlerToDefault()
     paymentHandler.onPaymentResult(mockPaymentResult);
   };
 
@@ -94,13 +99,19 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
     stopCollectTimer()
     navigation.goBack()
   };
-
+  
   useEffect(() => {
-    BackHandler.addEventListener(
+
+    const backAction = () => {
+      return onProceedBack();
+    }
+    const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      onProceedBack
+      backAction,
     );
-  }, []);
+
+    return () => backHandler.remove();
+  }, [navigation]);
 
   const callFetchStatusApi = async () => {
     const response = await fetchStatus();
@@ -140,12 +151,12 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
         style={styles.mainContainer}
       >
         <Text
-          style={styles.headingText}
+          style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
         >
           Complete your payment
         </Text>
         <Text
-          style={styles.descText}
+          style={[styles.descText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
         >
           Open your UPI application and confirm the payment before the time
           expires
@@ -158,13 +169,13 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
             style={styles.imageStyle}
           />
           <Text
-            style={styles.text}
+            style={[styles.text, {fontFamily: checkoutDetails.fontFamily.regular,}]}
           >
             UPI Id : {upiIdStr}
           </Text>
         </View>
         <Text
-          style={styles.expireInTextStyle}
+          style={[styles.expireInTextStyle, {fontFamily: checkoutDetails.fontFamily.medium,}]}
         >
           Expires in
         </Text>
@@ -173,12 +184,12 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
             size={150}
             strokeWidth={10}
             progressColor={
-              upiCollectTimerValue <= 30 ? '#FAA4A4' : checkoutDetails.brandColor
+              upiCollectTimerValue <= 30 ? '#FAA4A4' : checkoutDetails.buttonColor
             }
             progress={upiCollectTimerValue}
             formatTime={formatTime(upiCollectTimerValue)}
             textColor={
-              upiCollectTimerValue <= 30 ? '#F53535' : checkoutDetails.brandColor
+              upiCollectTimerValue <= 30 ? '#F53535' : checkoutDetails.buttonColor
             }
           />
         </View>
@@ -187,10 +198,10 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
         >
           <Image
             source={require('../../assets/images/ic_info.png')}
-            style={styles.infoImageStyle}
+            style={[styles.infoImageStyle, {tintColor : checkoutDetails.buttonColor}]}
           />
           <Text
-            style={styles.infoText}
+            style={[styles.infoText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
           >
             Kindly avoid using the back button until the transaction process is
             complete
@@ -204,7 +215,8 @@ const UpiTimerScreen = ({ route, navigation }: Props) => {
       <View style={styles.cancelPaymentContainer}>
         <Text
           style={[styles.cancelTextStyle,{
-            color: checkoutDetails.brandColor
+            color: checkoutDetails.buttonColor,
+            fontFamily: checkoutDetails.fontFamily.semiBold,
           }]}
           onPress={() => {
             setCancelClicked(true);

package/src/screens/walletScreen.tsx

@@ -4,12 +4,10 @@ import {
   BackHandler,
   Image,
   ScrollView,
-  Dimensions,
-  StatusBar,
-  SafeAreaView,
+  Dimensions
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from '../sharedContext/checkoutDetailsHandler';
 import LottieView from 'lottie-react-native';
 import Header from '../components/header';
 import { TextInput } from 'react-native-paper';
@@ -27,6 +25,7 @@ import ShimmerView from '../components/shimmerView';
 import styles from '../styles/screens/walletScreenStyles';
 import type { CheckoutStackParamList } from '../navigation';
 import type { NavigationProp } from '@react-navigation/native';
+import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
 
 type WalletScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'WalletScreen'>;
 
@@ -81,29 +80,28 @@ const WalletScreen = ({ navigation }: Props) => {
   };
 
   useEffect(() => {
+
+    const backAction = () => {
+      if (showWebView) {
+        setShowWebView(false);
+        paymentFailedMessage.current = checkoutDetails.errorMessage;
+        setStatus('Failed');
+        setFailedModalState(true);
+        setLoading(false);
+        return true;
+      } else if (loading) {
+        return true; // Prevent default back action
+      }
+      return onProceedBack();
+    }
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      () => {
-        if (showWebView) {
-          setShowWebView(false);
-          paymentFailedMessage.current = checkoutDetails.errorMessage;
-          setStatus('Failed');
-          setFailedModalState(true);
-          setLoading(false);
-          return true;
-        } else if (loading) {
-          return true; // Prevent default back action
-        }
-        return onProceedBack(); // Allow back navigation if not loading
-      }
+      backAction,
     );
 
-    return () => {
-      if (backHandler) {
-        backHandler.remove();
-      }
-    };
-  });
+    return () => backHandler.remove();
+  }, [navigation]);
+
 
   useEffect(() => {
     const fetchData = async () => {
@@ -193,10 +191,14 @@ const WalletScreen = ({ navigation }: Props) => {
   };
 
   const onExitCheckout = () => {
+    setSuccessModalState(false)
+    setSessionExppireModalState(false)
     const mockPaymentResult: PaymentResultObject = {
       status: status || '',
       transactionId: transactionId || '',
     };
+    setUserDataHandlerToDefault()
+    setCheckOutDetailsHandlerToDefault()
     paymentHandler.onPaymentResult(mockPaymentResult);
   };
 
@@ -220,8 +222,7 @@ const WalletScreen = ({ navigation }: Props) => {
   }, [searchText]);
 
   return (
-    <SafeAreaView style={styles.screenView}>
-      <StatusBar barStyle="dark-content" />
+    <View style={styles.screenView}>
       {loading ? (
         <View
           style={styles.loaderView}
@@ -259,6 +260,7 @@ const WalletScreen = ({ navigation }: Props) => {
                         : searchText != '' && searchText != null
                           ? '#2D2B32'
                           : '#ADACB0',
+                          fontFamily: checkoutDetails.fontFamily.regular
                     }]}
                   >
                     Search for wallet
@@ -274,7 +276,7 @@ const WalletScreen = ({ navigation }: Props) => {
                     outline: '#E6E6E6',
                   },
                 }}
-                style={styles.textFieldStyle}
+                style={[styles.textFieldStyle, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 left={
                   <TextInput.Icon
                     icon={() => (
@@ -295,7 +297,7 @@ const WalletScreen = ({ navigation }: Props) => {
             </View>
           )}
           <Text
-            style={styles.mainHeadingText}
+            style={[styles.mainHeadingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
           >
             All Wallets
           </Text>
@@ -333,12 +335,12 @@ const WalletScreen = ({ navigation }: Props) => {
                   style={styles.imageStyle}
                 />
                 <Text
-                  style={styles.headingText}
+                  style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
                 >
                   Oops!! No result found
                 </Text>
                 <Text
-                  style={styles.subHeadingText}
+                  style={[styles.subHeadingText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                 >
                   Please try another search
                 </Text>
@@ -349,7 +351,7 @@ const WalletScreen = ({ navigation }: Props) => {
             style={styles.bottomContainer}
           >
             <Text
-              style={styles.bottomText}
+              style={[styles.bottomText, { fontFamily: checkoutDetails.fontFamily.medium,  }]}
             >
               Secured by
             </Text>
@@ -392,7 +394,7 @@ const WalletScreen = ({ navigation }: Props) => {
           />
         </View>
       )}
-    </SafeAreaView>
+    </View>
   );
 };