boxpay-checkout-reactnative-sdk 1.0.11-beta2 → 1.0.11-beta4

package/lib/module/screens/cardScreen.js

@@ -1,30 +1,32 @@
 "use strict";
 
-import { View, Text, Image, BackHandler, Pressable, TouchableOpacity, ScrollView } from 'react-native';
+import LottieView from 'lottie-react-native';
 import { useEffect, useRef, useState } from 'react';
-import Header from "../components/header.js";
+import { BackHandler, Image, InputAccessoryView, Keyboard, Platform, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { TextInput } from 'react-native-paper';
-import LottieView from 'lottie-react-native';
-import fetchCardDetails from "../postRequest/fetchCardDetails.js";
-import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from "../sharedContext/checkoutDetailsHandler.js";
-import cardPostRequest from "../postRequest/cardPostRequest.js";
+import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import { SvgUri } from 'react-native-svg';
+import Toast from 'react-native-toast-message';
+import CheckBoxContainer from "../components/checkboxContainer.js";
+import CvvInfoBottomSheet from "../components/cvvInfoBottomSheet.js";
+import Header from "../components/header.js";
+import KnowMoreBottomSheet from "../components/knowMoreBottomSheet.js";
 import PaymentFailed from "../components/paymentFailed.js";
 import PaymentSuccess from "../components/paymentSuccess.js";
 import SessionExpire from "../components/sessionExpire.js";
-import { APIStatus } from "../interface.js";
-import { paymentHandler } from "../sharedContext/paymentStatusHandler.js";
-import CvvInfoBottomSheet from "../components/cvvInfoBottomSheet.js";
-import WebViewScreen from "./webViewScreen.js";
-import fetchStatus from "../postRequest/fetchStatus.js";
-import { SvgUri } from 'react-native-svg';
-import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import { APIStatus, TransactionStatus } from "../interface.js";
+import cardPostRequest from "../postRequest/cardPostRequest.js";
 import emiPostRequest from "../postRequest/emiPostRequest.js";
-import KnowMoreBottomSheet from "../components/knowMoreBottomSheet.js";
-import styles from "../styles/screens/cardScreenStyles.js";
-import Toast from 'react-native-toast-message';
+import fetchCardDetails from "../postRequest/fetchCardDetails.js";
+import fetchStatus from "../postRequest/fetchStatus.js";
+import { checkoutDetailsHandler, setCheckOutDetailsHandlerToDefault } from "../sharedContext/checkoutDetailsHandler.js";
 import { handleFetchStatusResponseHandler, handlePaymentResponse } from "../sharedContext/handlePaymentResponseHandler.js";
+import { paymentHandler } from "../sharedContext/paymentStatusHandler.js";
 import { setUserDataHandlerToDefault } from "../sharedContext/userdataHandler.js";
-import CheckBoxContainer from "../components/checkboxContainer.js";
+import styles from "../styles/screens/cardScreenStyles.js";
+import WebViewScreen from "./webViewScreen.js";
+import SubscriptionRow from "../components/subscriptionRow.js";
+import { getTextInputTheme } from "../sharedContext/getTextInputTheme.js";
 
 // Define the screen's navigation properties
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -58,7 +60,7 @@ const CardScreen = ({
   const [cardCvvText, setCardCvvText] = useState(null);
   const [cardHolderNameText, setCardHolderNameText] = useState(null);
   const [cardNickNameText, setCardNickNameText] = useState(null);
-  const [cardSelectedIcon, setCardSelectedIcon] = useState(require('../../assets/images/ic_default_card.png'));
+  const [cardSelectedIcon, setCardSelectedIcon] = useState(require('../../assets/images/ic_card.png'));
   const [maxCvvLength, setMaxCvvLength] = useState(4);
   const [maxCardNumberLength, setMaxCardNumberLength] = useState(19);
   const [loading, setLoading] = useState(false);
@@ -91,7 +93,7 @@ const CardScreen = ({
   const paymentFailedMessage = useRef('You may have cancelled the payment or there was a delay in response. Please retry.');
   const [sessionExpireModalOpen, setSessionExppireModalState] = useState(false);
   const [successfulTimeStamp, setSuccessfulTimeStamp] = useState('');
-  const [status, setStatus] = useState("NOACTION");
+  const [status, setStatus] = useState(TransactionStatus.NoAction);
   const [transactionId, setTransactionId] = useState(null);
   const backgroundApiInterval = useRef(null);
   const [imageLoad, setImageLoad] = useState(true);
@@ -99,6 +101,11 @@ const CardScreen = ({
   const [emiIssuerExist, setEmiIssuerExist] = useState(true);
   const [emiIssuer, setEmiIssuer] = useState('');
   const [shopperToken, setShopperToken] = useState(null);
+  const cardNumberAccessoryID = "cardNumberAccessoryID";
+  const cardExpiryAccessoryID = "cardExpiryAccessoryID";
+  const cardCvvAccessoryID = "cardCvvAccessoryID";
+  const cardHolderNameAccessoryID = "cardHolderNameAccessoryID";
+  const cardNickNameAccessoryID = "cardNickNameAccessoryID";
   const handleCardNumberTextChange = async text => {
     if (text == '') {
       setCardNumberText(text);
@@ -149,7 +156,7 @@ const CardScreen = ({
                       setMaxCvvLength(3);
                       setMaxCardNumberLength(19);
                     } else {
-                      setCardSelectedIcon(require('../../assets/images/ic_default_card.png'));
+                      setCardSelectedIcon(require('../../assets/images/ic_card.png'));
                       setMaxCvvLength(3);
                       setMaxCardNumberLength(19);
                     }
@@ -173,12 +180,13 @@ const CardScreen = ({
           });
         }
       } else {
-        setCardSelectedIcon(require('../../assets/images/ic_default_card.png'));
+        setCardSelectedIcon(require('../../assets/images/ic_card.png'));
         setMaxCvvLength(3);
         setMaxCardNumberLength(19);
       }
     }
   };
+  const isSubscriptionDetailsVisible = checkoutDetails.isSubscriptionCheckout && (isSICheckBoxClicked || !checkoutDetails.isSICheckboxVisible);
   const isValidCardNumberByLuhn = stringInputCardNumber => {
     const minCardLength = 13;
     if (stringInputCardNumber.length < minCardLength) {
@@ -201,7 +209,7 @@ const CardScreen = ({
   const handleCardNumberBlur = () => {
     const cleaned = cardNumberText?.replace(/ /g, '') || '';
     const cleanedLength = maxCardNumberLength == 19 ? 16 : 15;
-    setCardNumberErrorText(cleaned.length < 1 ? 'Required' : checkoutDetails.env === 'test' ? '' : cleaned.length < cleanedLength ? 'This card number is invalid' : !methodEnabled ? 'This card is not supported for the payment' : !cardNumberValid ? 'This card number is invalid' : !emiIssuerExist ? "We couldn't find any EMI plans for this card. Please try using a different card number" : emiIssuer != issuerBrand ? `The card is ${emiIssuer} ${cardType}. Please enter a card number that belongs to ${issuerBrand} ${cardType}` : '');
+    setCardNumberErrorText(cleaned.length < 1 ? 'Card Number is required' : checkoutDetails.env === 'test' ? '' : cleaned.length < cleanedLength ? 'This card number is invalid' : !methodEnabled ? 'This card is not supported for the payment' : !cardNumberValid ? 'This card number is invalid' : !emiIssuerExist ? "We couldn't find any EMI plans for this card. Please try using a different card number" : emiIssuer != issuerBrand ? `The card is ${emiIssuer} ${cardType}. Please enter a card number that belongs to ${issuerBrand} ${cardType}` : '');
     setCardNumberError(cleaned.length < 1 || checkoutDetails.env !== 'test' && (!methodEnabled || !cardNumberValid || !emiIssuerExist || emiIssuer != issuerBrand && durationNumber != undefined && durationNumber != ''));
     setCardNumberFocused(false);
   };
@@ -287,26 +295,26 @@ const CardScreen = ({
   };
   const handleCardExpiryBlur = () => {
     const cleaned = cardExpiryText?.replace(/ /g, '') || '';
-    setCardExpiryErrorText(cleaned.length < 1 ? 'Required' : cleaned.length < 5 || !cardExpiryValid ? 'Expiry is invalid' : '');
+    setCardExpiryErrorText(cleaned.length < 1 ? 'Expiry is required' : cleaned.length < 5 || !cardExpiryValid ? 'Expiry is invalid' : '');
     setCardExpiryError(cleaned.length < 5 || !cardExpiryValid);
     setCardExpiryFocused(false);
   };
   const handleCardCvvBlur = () => {
     const cleaned = cardCvvText?.replace(/ /g, '') || '';
-    setCardCvvErrorText(cleaned.length < 1 ? 'Required' : cleaned.length < maxCvvLength ? 'CVV is invalid' : '');
+    setCardCvvErrorText(cleaned.length < 1 ? 'CVV is required' : cleaned.length < maxCvvLength ? 'CVV is invalid' : '');
     setCardCvvError(cleaned.length < maxCvvLength);
     setCardCvvFocused(false);
   };
   const handleCardHolderNameBlur = () => {
     const cleaned = cardHolderNameText?.replace(/ /g, '') || '';
-    setCardHolderNameErrorText(cleaned.length < 1 ? 'Required' : '');
+    setCardHolderNameErrorText(cleaned.length < 1 ? 'Name is required' : '');
     setCardHolderNameFocused(false);
     setCardHolderNameError(cleaned.length < 1);
   };
   const handleCardCvvTextChange = text => {
     setCardCvvText(text);
     if (text == '') {
-      setCardCvvErrorText('Required');
+      setCardCvvErrorText('CVV is required');
       setCardCvvError(true);
     } else {
       setCardCvvError(false);
@@ -405,7 +413,7 @@ const CardScreen = ({
       if (showWebView) {
         setShowWebView(false);
         paymentFailedMessage.current = checkoutDetails.errorMessage;
-        setStatus('Failed');
+        setStatus(TransactionStatus.Failed);
         setFailedModalState(true);
         setLoading(false);
         return true;
@@ -436,477 +444,510 @@ const CardScreen = ({
       setShowWebView(true);
     }
   }, [paymentHtml]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.screenView,
-    children: [loading ? /*#__PURE__*/_jsxs(View, {
-      style: styles.loadingContainer,
-      children: [/*#__PURE__*/_jsx(LottieView, {
-        source: require('../../assets/animations/boxpayLogo.json'),
-        autoPlay: true,
-        loop: true,
-        style: styles.lottieStyle
-      }), /*#__PURE__*/_jsx(Text, {
-        children: "Loading..."
-      })]
-    }) : /*#__PURE__*/_jsxs(View, {
-      style: {
-        flex: 1
-      },
-      children: [/*#__PURE__*/_jsxs(ScrollView, {
-        contentContainerStyle: styles.screenView,
-        keyboardShouldPersistTaps: "handled",
-        children: [/*#__PURE__*/_jsx(Header, {
-          onBackPress: onProceedBack,
-          showDesc: true,
-          showSecure: true,
-          text: "Pay via Card"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.divider
-        }), bankNameStr != '' && bankName != undefined && /*#__PURE__*/_jsxs(View, {
-          style: styles.container,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: {
-              flexDirection: 'row',
-              alignItems: 'center'
-            },
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.screenView,
+      children: [loading ? /*#__PURE__*/_jsxs(View, {
+        style: styles.loadingContainer,
+        children: [/*#__PURE__*/_jsx(LottieView, {
+          source: require('../../assets/animations/boxpayLogo.json'),
+          autoPlay: true,
+          loop: true,
+          style: styles.lottieStyle
+        }), /*#__PURE__*/_jsx(Text, {
+          children: "Loading..."
+        })]
+      }) : /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsxs(ScrollView, {
+          contentContainerStyle: styles.screenView,
+          keyboardShouldPersistTaps: "handled",
+          children: [/*#__PURE__*/_jsx(Header, {
+            onBackPress: onProceedBack,
+            showDesc: true,
+            showSecure: true,
+            text: "Pay via Card"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.divider
+          }), bankNameStr != '' && bankName != undefined && /*#__PURE__*/_jsxs(View, {
+            style: styles.container,
             children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.imageContainer,
-              children: [imageLoad && !imageError && /*#__PURE__*/_jsx(ShimmerPlaceHolder, {
-                visible: false // Keep shimmer until loading is done
-                ,
-                style: {
-                  width: 32,
-                  height: 32,
-                  borderRadius: 8
-                }
-              }), !imageError ? /*#__PURE__*/_jsx(SvgUri, {
-                uri: bankUrlStr || '',
-                width: 100 // Keep original size
-                ,
-                height: 100,
-                style: {
-                  transform: [{
-                    scale: 0.4
-                  }]
-                },
-                onLoad: () => setImageLoad(false),
-                onError: () => {
-                  setImageError(true);
-                  setImageLoad(false);
-                }
-              }) : /*#__PURE__*/_jsx(Image, {
-                source: require('../../assets/images/ic_netbanking_semi_bold.png'),
-                style: {
-                  transform: [{
-                    scale: 0.4
-                  }]
-                }
-              })]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.nameText, {
-                fontFamily: checkoutDetails.fontFamily.semiBold
-              }],
-              children: bankNameStr
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.thickBorder,
-            children: [/*#__PURE__*/_jsxs(Text, {
-              style: [styles.durationText, {
-                fontFamily: checkoutDetails.fontFamily.semiBold
-              }],
-              children: [duration, " months x", /*#__PURE__*/_jsxs(Text, {
-                style: styles.currencyText,
-                children: [' ', checkoutDetails.currencySymbol]
-              }), amountStr]
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: [styles.percentText, {
-                fontFamily: checkoutDetails.fontFamily.regular
-              }],
-              children: ["@", percentNumber, "% p.a."]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(TextInput, {
-          mode: "outlined",
-          label: /*#__PURE__*/_jsx(Text, {
-            style: [styles.textFieldLabel, {
-              color: cardNumberFocused ? '#2D2B32' : cardNumberText != '' && cardNumberText != null ? '#2D2B32' : '#ADACB0',
-              fontFamily: checkoutDetails.fontFamily.regular
-            }],
-            children: "Card Number"
-          }),
-          value: cardNumberText || '',
-          onChangeText: it => {
-            handleCardNumberTextChange(it);
-          },
-          theme: {
-            colors: {
-              primary: '#2D2B32',
-              outline: '#E6E6E6'
-            }
-          },
-          style: [styles.textInput, {
-            marginTop: 28,
-            marginHorizontal: 16,
-            fontFamily: checkoutDetails.fontFamily.regular
-          }],
-          error: cardNumberError,
-          right: cardNumberError ? /*#__PURE__*/_jsx(TextInput.Icon, {
-            icon: () => /*#__PURE__*/_jsx(Image, {
-              source: require('../../assets/images/ic_upi_error.png'),
-              style: {
-                width: 24,
-                height: 24
-              }
-            })
-          }) : /*#__PURE__*/_jsx(TextInput.Icon, {
-            icon: () => /*#__PURE__*/_jsx(Image, {
-              source: cardSelectedIcon,
               style: {
-                width: 35,
-                height: 20
-              }
-            })
-          }),
-          outlineStyle: {
-            borderRadius: 8,
-            // Add this
-            borderWidth: 1.5
-          },
-          keyboardType: "number-pad",
-          maxLength: maxCardNumberLength,
-          onFocus: () => {
-            setCardNumberFocused(true);
-            setCardNumberError(false);
-          },
-          onBlur: handleCardNumberBlur
-        }), cardNumberError && /*#__PURE__*/_jsx(Text, {
-          style: [styles.errorText, {
-            fontFamily: checkoutDetails.fontFamily.regular
-          }],
-          children: cardNumberErrorText
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.expiryCvvContainer,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: {
-              flex: 1,
-              flexDirection: 'column'
-            },
-            children: [/*#__PURE__*/_jsx(TextInput, {
-              mode: "outlined",
-              label: /*#__PURE__*/_jsx(Text, {
-                style: [styles.textFieldLabel, {
-                  color: cardExpiryFocused ? '#2D2B32' : cardExpiryText != '' && cardExpiryText != null ? '#2D2B32' : '#ADACB0',
-                  fontFamily: checkoutDetails.fontFamily.regular
-                }],
-                children: "Expiry (MM/YY)"
-              }),
-              value: cardExpiryText || '',
-              onChangeText: it => {
-                handleCardExpiryTextChange(it);
+                flexDirection: 'row',
+                alignItems: 'center'
               },
-              theme: {
-                colors: {
-                  primary: '#2D2B32',
-                  outline: '#E6E6E6'
-                }
-              },
-              style: [styles.textInput, {
-                fontFamily: checkoutDetails.fontFamily.regular
-              }],
-              error: cardExpiryError,
-              right: cardExpiryError ? /*#__PURE__*/_jsx(TextInput.Icon, {
-                icon: () => /*#__PURE__*/_jsx(Image, {
-                  source: require('../../assets/images/ic_upi_error.png'),
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.imageContainer,
+                children: [imageLoad && !imageError && /*#__PURE__*/_jsx(ShimmerPlaceHolder, {
+                  visible: false // Keep shimmer until loading is done
+                  ,
                   style: {
-                    width: 24,
-                    height: 24
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8
                   }
-                })
-              }) : null,
-              outlineStyle: {
-                borderRadius: 8,
-                // Add this
-                borderWidth: 1.5
-              },
-              keyboardType: "number-pad",
-              maxLength: 5,
-              onFocus: () => {
-                setCardExpiryFocused(true);
-                setCardExpiryError(false);
-              },
-              onBlur: handleCardExpiryBlur
-            }), cardExpiryError && /*#__PURE__*/_jsx(Text, {
-              style: [styles.errorText, {
-                fontFamily: checkoutDetails.fontFamily.regular
-              }],
-              children: cardExpiryErrorText
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: {
-              flex: 1,
-              flexDirection: 'column',
-              marginStart: 16
-            },
-            children: [/*#__PURE__*/_jsx(TextInput, {
-              mode: "outlined",
-              label: /*#__PURE__*/_jsx(Text, {
-                style: [styles.textFieldLabel, {
-                  color: cardCvvFocused ? '#2D2B32' : cardCvvText != '' && cardCvvText != null ? '#2D2B32' : '#ADACB0',
-                  fontFamily: checkoutDetails.fontFamily.regular
-                }],
-                children: "CVV"
-              }),
-              value: cardCvvText || '',
-              onChangeText: it => {
-                handleCardCvvTextChange(it);
-              },
-              theme: {
-                colors: {
-                  primary: '#2D2B32',
-                  outline: '#E6E6E6'
-                }
-              },
-              style: [styles.textInput, {
-                fontFamily: checkoutDetails.fontFamily.regular
-              }],
-              error: cardCvvError,
-              right: cardCvvError ? /*#__PURE__*/_jsx(TextInput.Icon, {
-                icon: () => /*#__PURE__*/_jsx(Image, {
-                  source: require('../../assets/images/ic_upi_error.png'),
+                }), !imageError ? /*#__PURE__*/_jsx(SvgUri, {
+                  uri: bankUrlStr || '',
+                  width: 100 // Keep original size
+                  ,
+                  height: 100,
                   style: {
-                    width: 24,
-                    height: 24
+                    transform: [{
+                      scale: 0.4
+                    }]
+                  },
+                  onLoad: () => setImageLoad(false),
+                  onError: () => {
+                    setImageError(true);
+                    setImageLoad(false);
                   }
-                })
-              }) : /*#__PURE__*/_jsx(TextInput.Icon, {
-                icon: () => /*#__PURE__*/_jsx(Image, {
-                  source: require('../../assets/images/ic_cvv_info.png'),
+                }) : /*#__PURE__*/_jsx(Image, {
+                  source: require('../../assets/images/ic_netbanking_semi_bold.png'),
                   style: {
-                    width: 24,
-                    height: 24
+                    transform: [{
+                      scale: 0.4
+                    }]
                   }
-                }),
-                onPress: () => {
-                  setShowCvvInfo(true);
-                }
-              }),
-              outlineStyle: {
-                borderRadius: 8,
-                // Add this
-                borderWidth: 1.5
-              },
-              keyboardType: "number-pad",
-              maxLength: maxCvvLength,
-              secureTextEntry: true,
-              onBlur: handleCardCvvBlur,
-              onFocus: () => {
-                setCardCvvFocused(true);
-                setCardCvvError(false);
-              }
-            }), cardCvvError && /*#__PURE__*/_jsx(Text, {
-              style: [styles.errorText, {
+                })]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.nameText, {
+                  fontFamily: checkoutDetails.fontFamily.semiBold
+                }],
+                children: bankNameStr
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.thickBorder,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: [styles.durationText, {
+                  fontFamily: checkoutDetails.fontFamily.semiBold
+                }],
+                children: [duration, " months x", /*#__PURE__*/_jsxs(Text, {
+                  style: styles.currencyText,
+                  children: [' ', checkoutDetails.currencySymbol]
+                }), amountStr]
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: [styles.percentText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                children: ["@", percentNumber, "% p.a."]
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(TextInput, {
+            mode: "outlined",
+            label: /*#__PURE__*/_jsx(Text, {
+              style: [styles.textFieldLabel, {
+                color: cardNumberFocused ? '#2D2B32' : cardNumberText != '' && cardNumberText != null ? '#2D2B32' : '#ADACB0',
                 fontFamily: checkoutDetails.fontFamily.regular
               }],
-              children: cardCvvErrorText
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(TextInput, {
-          mode: "outlined",
-          label: /*#__PURE__*/_jsx(Text, {
-            style: [styles.textFieldLabel, {
-              color: cardHolderNameFocused ? '#2D2B32' : cardHolderNameText != '' && cardHolderNameText != null ? '#2D2B32' : '#ADACB0',
+              children: "Card Number*"
+            }),
+            value: cardNumberText || '',
+            onChangeText: it => {
+              handleCardNumberTextChange(it);
+            },
+            theme: getTextInputTheme(),
+            inputAccessoryViewID: Platform.OS === 'ios' ? cardNumberAccessoryID : undefined,
+            style: [styles.textInput, {
+              marginTop: 28,
+              marginHorizontal: 16,
               fontFamily: checkoutDetails.fontFamily.regular
             }],
-            children: "Name on the Card"
-          }),
-          value: cardHolderNameText || '',
-          onChangeText: it => {
-            handleCardHolderNameTextChange(it);
-          },
-          theme: {
-            colors: {
-              primary: '#2D2B32',
-              outline: '#E6E6E6'
-            }
-          },
-          style: [styles.textInput, {
-            marginHorizontal: 16,
-            marginTop: 16,
-            fontFamily: checkoutDetails.fontFamily.regular
-          }],
-          error: cardHolderNameError,
-          right: cardHolderNameError ? /*#__PURE__*/_jsx(TextInput.Icon, {
-            icon: () => /*#__PURE__*/_jsx(Image, {
-              source: require('../../assets/images/ic_upi_error.png'),
-              style: {
-                width: 24,
-                height: 24
-              }
-            })
-          }) : null,
-          outlineStyle: {
-            borderRadius: 8,
-            // Add this
-            borderWidth: 1.5
-          },
-          onBlur: handleCardHolderNameBlur,
-          onFocus: () => {
-            setCardHolderNameFocused(true);
-            setCardHolderNameError(false);
-          }
-        }), cardHolderNameError && /*#__PURE__*/_jsx(Text, {
-          style: [styles.errorText, {
-            fontFamily: checkoutDetails.fontFamily.regular
-          }],
-          children: cardHolderNameErrorText
-        }), shopperToken != null && shopperToken != '' && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(TextInput, {
+            error: cardNumberError,
+            returnKeyType: "done",
+            right: cardNumberError ? /*#__PURE__*/_jsx(TextInput.Icon, {
+              icon: () => /*#__PURE__*/_jsx(Image, {
+                source: require('../../assets/images/ic_upi_error.png'),
+                style: {
+                  width: 24,
+                  height: 24
+                }
+              })
+            }) : /*#__PURE__*/_jsx(TextInput.Icon, {
+              icon: () => /*#__PURE__*/_jsx(Image, {
+                source: cardSelectedIcon,
+                style: {
+                  width: 32,
+                  height: 20,
+                  tintColor: cardSelectedIcon === require('../../assets/images/ic_card.png') ? '#6B7280' // Cool Grey 500
+                  : undefined
+                }
+              })
+            }),
+            outlineStyle: {
+              borderRadius: 8,
+              // Add this
+              borderWidth: 1.5
+            },
+            keyboardType: "number-pad",
+            maxLength: maxCardNumberLength,
+            onFocus: () => {
+              setCardNumberFocused(true);
+              setCardNumberError(false);
+            },
+            onBlur: handleCardNumberBlur
+          }), cardNumberError && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular,
+              marginHorizontal: 16
+            }],
+            children: cardNumberErrorText
+          }), /*#__PURE__*/_jsx(TextInput, {
             mode: "outlined",
             label: /*#__PURE__*/_jsx(Text, {
               style: [styles.textFieldLabel, {
-                color: cardNickNameFocused ? '#2D2B32' : cardNickNameText != '' && cardNickNameText != null ? '#2D2B32' : '#ADACB0',
+                color: cardHolderNameFocused ? '#2D2B32' : cardHolderNameText != '' && cardHolderNameText != null ? '#2D2B32' : '#ADACB0',
                 fontFamily: checkoutDetails.fontFamily.regular
               }],
-              children: "Card NickName (for easy identification)"
+              children: "Cardholder Name*"
             }),
-            value: cardNickNameText || '',
+            value: cardHolderNameText || '',
             onChangeText: it => {
-              setCardNickNameText(it);
-            },
-            theme: {
-              colors: {
-                primary: '#2D2B32',
-                outline: '#E6E6E6'
-              }
+              handleCardHolderNameTextChange(it);
             },
+            theme: getTextInputTheme(),
             style: [styles.textInput, {
               marginHorizontal: 16,
               marginTop: 16,
               fontFamily: checkoutDetails.fontFamily.regular
             }],
+            error: cardHolderNameError,
+            inputAccessoryViewID: Platform.OS === 'ios' ? cardHolderNameAccessoryID : undefined,
+            returnKeyType: "done",
+            right: cardHolderNameError ? /*#__PURE__*/_jsx(TextInput.Icon, {
+              icon: () => /*#__PURE__*/_jsx(Image, {
+                source: require('../../assets/images/ic_upi_error.png'),
+                style: {
+                  width: 24,
+                  height: 24
+                }
+              })
+            }) : null,
             outlineStyle: {
               borderRadius: 8,
               // Add this
               borderWidth: 1.5
             },
-            onBlur: () => {
-              setCardNickNameFocused(false);
-            },
+            onBlur: handleCardHolderNameBlur,
             onFocus: () => {
-              setCardNickNameFocused(true);
+              setCardHolderNameFocused(true);
+              setCardHolderNameError(false);
             }
+          }), cardHolderNameError && /*#__PURE__*/_jsx(Text, {
+            style: [styles.errorText, {
+              fontFamily: checkoutDetails.fontFamily.regular,
+              marginHorizontal: 16
+            }],
+            children: cardHolderNameErrorText
           }), /*#__PURE__*/_jsxs(View, {
-            style: styles.infoContainer,
-            children: [/*#__PURE__*/_jsx(Image, {
-              source: require('../../assets/images/ic_info.png'),
-              style: styles.infoIcon
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.infoText, {
-                fontFamily: checkoutDetails.fontFamily.regular
-              }],
-              children: "CVV will not be stored"
+            style: styles.expiryCvvContainer,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1,
+                flexDirection: 'column'
+              },
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                mode: "outlined",
+                label: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.textFieldLabel, {
+                    color: cardExpiryFocused ? '#2D2B32' : cardExpiryText != '' && cardExpiryText != null ? '#2D2B32' : '#ADACB0',
+                    fontFamily: checkoutDetails.fontFamily.regular
+                  }],
+                  children: "Expiry (MM/YY)*"
+                }),
+                value: cardExpiryText || '',
+                onChangeText: it => {
+                  handleCardExpiryTextChange(it);
+                },
+                theme: getTextInputTheme(),
+                inputAccessoryViewID: Platform.OS === 'ios' ? cardExpiryAccessoryID : undefined,
+                style: [styles.textInput, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                error: cardExpiryError,
+                returnKeyType: "done",
+                right: cardExpiryError ? /*#__PURE__*/_jsx(TextInput.Icon, {
+                  icon: () => /*#__PURE__*/_jsx(Image, {
+                    source: require('../../assets/images/ic_upi_error.png'),
+                    style: {
+                      width: 24,
+                      height: 24
+                    }
+                  })
+                }) : null,
+                outlineStyle: {
+                  borderRadius: 8,
+                  // Add this
+                  borderWidth: 1.5
+                },
+                keyboardType: "number-pad",
+                maxLength: 5,
+                onFocus: () => {
+                  setCardExpiryFocused(true);
+                  setCardExpiryError(false);
+                },
+                onBlur: handleCardExpiryBlur
+              }), cardExpiryError && /*#__PURE__*/_jsx(Text, {
+                style: [styles.errorText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                children: cardExpiryErrorText
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1,
+                flexDirection: 'column',
+                marginStart: 16
+              },
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                mode: "outlined",
+                label: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.textFieldLabel, {
+                    color: cardCvvFocused ? '#2D2B32' : cardCvvText != '' && cardCvvText != null ? '#2D2B32' : '#ADACB0',
+                    fontFamily: checkoutDetails.fontFamily.regular
+                  }],
+                  children: "CVV*"
+                }),
+                value: cardCvvText || '',
+                onChangeText: it => {
+                  handleCardCvvTextChange(it);
+                },
+                theme: getTextInputTheme(),
+                inputAccessoryViewID: Platform.OS === 'ios' ? cardCvvAccessoryID : undefined,
+                style: [styles.textInput, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                error: cardCvvError,
+                returnKeyType: "done",
+                right: cardCvvError ? /*#__PURE__*/_jsx(TextInput.Icon, {
+                  icon: () => /*#__PURE__*/_jsx(Image, {
+                    source: require('../../assets/images/ic_upi_error.png'),
+                    style: {
+                      width: 24,
+                      height: 24
+                    }
+                  })
+                }) : /*#__PURE__*/_jsx(TextInput.Icon, {
+                  icon: () => /*#__PURE__*/_jsx(Image, {
+                    source: require('../../assets/images/ic_info.png'),
+                    style: {
+                      width: 24,
+                      height: 24,
+                      tintColor: checkoutDetails.buttonColor
+                    }
+                  }),
+                  onPress: () => {
+                    setShowCvvInfo(true);
+                  }
+                }),
+                outlineStyle: {
+                  borderRadius: 8,
+                  // Add this
+                  borderWidth: 1.5
+                },
+                keyboardType: "number-pad",
+                maxLength: maxCvvLength,
+                secureTextEntry: true,
+                onBlur: handleCardCvvBlur,
+                onFocus: () => {
+                  setCardCvvFocused(true);
+                  setCardCvvError(false);
+                }
+              }), cardCvvError && /*#__PURE__*/_jsx(Text, {
+                style: [styles.errorText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                children: cardCvvErrorText
+              })]
             })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.checkBoxContainer,
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: () => setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked),
-              children: /*#__PURE__*/_jsx(View, {
-                style: [styles.checkboxBox, {
-                  borderColor: checkoutDetails.buttonColor
-                }, isSavedCardCheckBoxClicked && {
-                  backgroundColor: checkoutDetails.buttonColor
+          }), shopperToken != null && shopperToken != '' && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TextInput, {
+              mode: "outlined",
+              label: /*#__PURE__*/_jsx(Text, {
+                style: [styles.textFieldLabel, {
+                  color: cardNickNameFocused ? '#2D2B32' : cardNickNameText != '' && cardNickNameText != null ? '#2D2B32' : '#ADACB0',
+                  fontFamily: checkoutDetails.fontFamily.regular
                 }],
-                children: isSavedCardCheckBoxClicked && /*#__PURE__*/_jsx(Text, {
-                  style: styles.checkmark,
-                  children: "\u2713"
-                })
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.checkBoxText, {
+                children: "Card NickName (for easy identification)"
+              }),
+              value: cardNickNameText || '',
+              onChangeText: it => {
+                setCardNickNameText(it);
+              },
+              inputAccessoryViewID: Platform.OS === 'ios' ? cardNickNameAccessoryID : undefined,
+              theme: getTextInputTheme(),
+              style: [styles.textInput, {
+                marginHorizontal: 16,
+                marginTop: 16,
                 fontFamily: checkoutDetails.fontFamily.regular
               }],
-              children: "Save this card as per RBI guidelines."
-            }), /*#__PURE__*/_jsx(Pressable, {
-              onPress: () => {
-                setKnowMoreDialog(true);
+              returnKeyType: "done",
+              outlineStyle: {
+                borderRadius: 8,
+                // Add this
+                borderWidth: 1.5
               },
-              style: {
-                marginLeft: 4
+              onBlur: () => {
+                setCardNickNameFocused(false);
               },
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.clickableText, {
-                  color: checkoutDetails.buttonColor,
-                  fontFamily: checkoutDetails.fontFamily.semiBold
+              onFocus: () => {
+                setCardNickNameFocused(true);
+              }
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.infoContainer,
+              children: [/*#__PURE__*/_jsx(Image, {
+                source: require('../../assets/images/ic_info.png'),
+                style: styles.infoIcon
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.infoText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
                 }],
-                children: "Know more"
-              })
+                children: "CVV will not be stored"
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.checkBoxContainer,
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: () => setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked),
+                children: /*#__PURE__*/_jsx(View, {
+                  style: [styles.checkboxBox, {
+                    borderColor: checkoutDetails.buttonColor
+                  }, isSavedCardCheckBoxClicked && {
+                    backgroundColor: checkoutDetails.buttonColor
+                  }],
+                  children: isSavedCardCheckBoxClicked && /*#__PURE__*/_jsx(Text, {
+                    style: styles.checkmark,
+                    children: "\u2713"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.checkBoxText, {
+                  fontFamily: checkoutDetails.fontFamily.regular
+                }],
+                children: "Save this card as per RBI guidelines."
+              }), /*#__PURE__*/_jsx(Pressable, {
+                onPress: () => {
+                  setKnowMoreDialog(true);
+                },
+                style: {
+                  marginLeft: 4
+                },
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.clickableText, {
+                    color: checkoutDetails.buttonColor,
+                    fontFamily: checkoutDetails.fontFamily.semiBold
+                  }],
+                  children: "Know more"
+                })
+              })]
             })]
+          }), checkoutDetails.isSICheckboxVisible && checkoutDetails.isSubscriptionCheckout && /*#__PURE__*/_jsx(CheckBoxContainer, {
+            text: "Set up Standing Instructions (SI) for this payment.",
+            isCheckBoxSelected: isSICheckBoxClicked,
+            onCheckBoxClicked: () => {
+              setIsSICheckBoxClicked(!isSICheckBoxClicked);
+            }
+          }), isSubscriptionDetailsVisible && /*#__PURE__*/_jsx(View, {
+            style: styles.subscriptionContainer,
+            children: checkoutDetails.subscriptionDetails && checkoutDetails.subscriptionDetails.map(item => item.value && /*#__PURE__*/_jsx(SubscriptionRow, {
+              checkoutDetails: checkoutDetails,
+              heading: item.label,
+              value: item.value
+            }, item.label))
           })]
-        }), checkoutDetails.isSICheckboxVisible && checkoutDetails.isSubscriptionCheckout && /*#__PURE__*/_jsx(CheckBoxContainer, {
-          text: "Set up Standing Instructions (SI) for this payment.",
-          isCheckBoxSelected: isSICheckBoxClicked,
-          onCheckBoxClicked: () => {
-            setIsSICheckBoxClicked(!isSICheckBoxClicked);
-          }
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        children: cardValid ? /*#__PURE__*/_jsx(Pressable, {
-          style: [styles.buttonContainer, {
-            backgroundColor: checkoutDetails.buttonColor,
-            borderRadius: checkoutDetails.ctaBorderRadius
-          }],
-          onPress: () => {
-            onProceedForward();
-          },
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.buttonText, {
-              fontFamily: checkoutDetails.fontFamily.semiBold
+        }), /*#__PURE__*/_jsx(View, {
+          children: cardValid ? /*#__PURE__*/_jsx(Pressable, {
+            style: [styles.buttonContainer, {
+              backgroundColor: checkoutDetails.buttonColor,
+              borderRadius: checkoutDetails.ctaBorderRadius
             }],
-            children: "Make Payment"
-          })
-        }) : /*#__PURE__*/_jsx(Pressable, {
-          style: [styles.buttonContainer, {
-            backgroundColor: '#E6E6E6',
-            borderRadius: checkoutDetails.ctaBorderRadius
-          }],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.buttonText, {
-              color: checkoutDetails.buttonTextColor,
-              fontFamily: checkoutDetails.fontFamily.semiBold
+            onPress: () => {
+              onProceedForward();
+            },
+            children: /*#__PURE__*/_jsxs(Text, {
+              style: [styles.buttonText, {
+                fontFamily: checkoutDetails.fontFamily.semiBold
+              }],
+              children: ["Pay", ' ', /*#__PURE__*/_jsxs(Text, {
+                style: {
+                  fontFamily: 'Inter-SemiBold',
+                  fontSize: 16,
+                  color: 'white'
+                },
+                children: [' ', checkoutDetails.currencySymbol]
+              }), checkoutDetails.amount]
+            })
+          }) : /*#__PURE__*/_jsx(Pressable, {
+            style: [styles.buttonContainer, {
+              backgroundColor: '#E6E6E6',
+              borderRadius: checkoutDetails.ctaBorderRadius
             }],
-            children: "Make Payment"
+            children: /*#__PURE__*/_jsxs(Text, {
+              style: [styles.buttonText, {
+                fontFamily: checkoutDetails.fontFamily.semiBold
+              }],
+              children: ["Pay", ' ', /*#__PURE__*/_jsxs(Text, {
+                style: {
+                  fontFamily: 'Inter-SemiBold',
+                  fontSize: 16,
+                  color: 'white'
+                },
+                children: [' ', checkoutDetails.currencySymbol]
+              }), checkoutDetails.amount]
+            })
           })
+        })]
+      }), failedModalOpen && /*#__PURE__*/_jsx(PaymentFailed, {
+        onClick: () => setFailedModalState(false),
+        errorMessage: paymentFailedMessage.current
+      }), successModalOpen && /*#__PURE__*/_jsx(PaymentSuccess, {
+        onClick: onExitCheckout,
+        transactionId: transactionId || '',
+        method: "Card",
+        localDateTime: successfulTimeStamp
+      }), sessionExpireModalOpen && /*#__PURE__*/_jsx(SessionExpire, {
+        onClick: onExitCheckout
+      }), showCvvInfo && /*#__PURE__*/_jsx(CvvInfoBottomSheet, {
+        onClick: () => {
+          setShowCvvInfo(false);
+        }
+      }), showKnowMoreDialog && /*#__PURE__*/_jsx(KnowMoreBottomSheet, {
+        onClick: () => {
+          setKnowMoreDialog(false);
+        }
+      }), showWebView && /*#__PURE__*/_jsx(View, {
+        style: styles.webViewContainer,
+        children: /*#__PURE__*/_jsx(WebViewScreen, {
+          url: paymentUrl,
+          html: paymentHtml,
+          onBackPress: () => {
+            startBackgroundApiTask();
+            setLoading(true);
+            setShowWebView(false);
+          }
         })
       })]
-    }), failedModalOpen && /*#__PURE__*/_jsx(PaymentFailed, {
-      onClick: () => setFailedModalState(false),
-      errorMessage: paymentFailedMessage.current
-    }), successModalOpen && /*#__PURE__*/_jsx(PaymentSuccess, {
-      onClick: onExitCheckout,
-      transactionId: transactionId || '',
-      method: "Card",
-      localDateTime: successfulTimeStamp
-    }), sessionExpireModalOpen && /*#__PURE__*/_jsx(SessionExpire, {
-      onClick: onExitCheckout
-    }), showCvvInfo && /*#__PURE__*/_jsx(CvvInfoBottomSheet, {
-      onClick: () => {
-        setShowCvvInfo(false);
-      }
-    }), showKnowMoreDialog && /*#__PURE__*/_jsx(KnowMoreBottomSheet, {
-      onClick: () => {
-        setKnowMoreDialog(false);
-      }
-    }), showWebView && /*#__PURE__*/_jsx(View, {
-      style: styles.webViewContainer,
-      children: /*#__PURE__*/_jsx(WebViewScreen, {
-        url: paymentUrl,
-        html: paymentHtml,
-        onBackPress: () => {
-          startBackgroundApiTask();
-          setLoading(true);
-          setShowWebView(false);
-        }
-      })
+    }), Platform.OS === 'ios' && /*#__PURE__*/_jsx(_Fragment, {
+      children: [cardNumberAccessoryID, cardExpiryAccessoryID, cardCvvAccessoryID, cardHolderNameAccessoryID, cardNickNameAccessoryID].map(id => /*#__PURE__*/_jsx(InputAccessoryView, {
+        nativeID: id,
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            backgroundColor: '#f1f1f1',
+            padding: 10,
+            alignItems: 'flex-end'
+          },
+          children: /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => Keyboard.dismiss(),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: {
+                fontSize: 16,
+                fontFamily: checkoutDetails.fontFamily.semiBold
+              },
+              children: "Done"
+            })
+          })
+        })
+      }, id))
     })]
   });
 };