boxpay-checkout-reactnative-sdk 1.0.10-beta1 → 1.0.11-beta2

package/lib/module/screens/cardScreen.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { View, Text, Image, BackHandler, Pressable, TouchableOpacity } from 'react-native';
+import { View, Text, Image, BackHandler, Pressable, TouchableOpacity, ScrollView } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
 import Header from "../components/header.js";
 import { TextInput } from 'react-native-paper';
@@ -40,7 +40,8 @@ const CardScreen = ({
     amount,
     percent,
     cardType,
-    issuerBrand
+    issuerBrand,
+    isAutoNavigationEnabled
   } = route.params || {};
   const durationNumber = Array.isArray(duration) ? duration[0] : duration;
   const bankNameStr = Array.isArray(bankName) ? bankName[0] : bankName;
@@ -90,7 +91,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(null);
+  const [status, setStatus] = useState("NOACTION");
   const [transactionId, setTransactionId] = useState(null);
   const backgroundApiInterval = useRef(null);
   const [imageLoad, setImageLoad] = useState(true);
@@ -333,8 +334,13 @@ const CardScreen = ({
     }
   };
   const onProceedBack = () => {
-    navigation.goBack();
-    return true;
+    if (isAutoNavigationEnabled) {
+      onExitCheckout();
+      return true;
+    } else {
+      navigation.goBack();
+      return true;
+    }
   };
   const callFetchStatusApi = async () => {
     const response = await fetchStatus();
@@ -443,324 +449,279 @@ const CardScreen = ({
         children: "Loading..."
       })]
     }) : /*#__PURE__*/_jsxs(View, {
-      style: styles.screenView,
-      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'
-          },
+      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
-                }]
-              }
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center'
+            },
+            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(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, {
+        }), /*#__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: ["@", 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
+            children: "Card Number"
+          }),
+          value: cardNumberText || '',
+          onChangeText: it => {
+            handleCardNumberTextChange(it);
+          },
+          theme: {
+            colors: {
+              primary: '#2D2B32',
+              outline: '#E6E6E6'
             }
-          })
-        }),
-        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);
-            },
-            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'
             },
-            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'),
-                style: {
-                  width: 24,
-                  height: 24
+            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: {
+                colors: {
+                  primary: '#2D2B32',
+                  outline: '#E6E6E6'
                 }
-              })
-            }) : 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',
+              },
+              style: [styles.textInput, {
                 fontFamily: checkoutDetails.fontFamily.regular
               }],
-              children: "CVV"
-            }),
-            value: cardCvvText || '',
-            onChangeText: it => {
-              handleCardCvvTextChange(it);
-            },
-            theme: {
-              colors: {
-                primary: '#2D2B32',
-                outline: '#E6E6E6'
-              }
+              error: cardExpiryError,
+              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
             },
-            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'),
-                style: {
-                  width: 24,
-                  height: 24
+            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'
                 }
-              })
-            }) : /*#__PURE__*/_jsx(TextInput.Icon, {
-              icon: () => /*#__PURE__*/_jsx(Image, {
-                source: require('../../assets/images/ic_cvv_info.png'),
-                style: {
-                  width: 24,
-                  height: 24
+              },
+              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'),
+                  style: {
+                    width: 24,
+                    height: 24
+                  }
+                })
+              }) : /*#__PURE__*/_jsx(TextInput.Icon, {
+                icon: () => /*#__PURE__*/_jsx(Image, {
+                  source: require('../../assets/images/ic_cvv_info.png'),
+                  style: {
+                    width: 24,
+                    height: 24
+                  }
+                }),
+                onPress: () => {
+                  setShowCvvInfo(true);
                 }
               }),
-              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);
               }
-            }),
-            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
+            }), cardCvvError && /*#__PURE__*/_jsx(Text, {
+              style: [styles.errorText, {
+                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',
-            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, {
+        }), /*#__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: "Name on the Card"
           }),
-          value: cardNickNameText || '',
+          value: cardHolderNameText || '',
           onChangeText: it => {
-            setCardNickNameText(it);
+            handleCardHolderNameTextChange(it);
           },
           theme: {
             colors: {
@@ -773,72 +734,122 @@ const CardScreen = ({
             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: () => {
-            setCardNickNameFocused(false);
-          },
+          onBlur: handleCardHolderNameBlur,
           onFocus: () => {
-            setCardNickNameFocused(true);
+            setCardHolderNameFocused(true);
+            setCardHolderNameError(false);
           }
-        }), /*#__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"
-          })]
-        }), /*#__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
+        }), cardHolderNameError && /*#__PURE__*/_jsx(Text, {
+          style: [styles.errorText, {
+            fontFamily: checkoutDetails.fontFamily.regular
+          }],
+          children: cardHolderNameErrorText
+        }), 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);
+            },
+            theme: {
+              colors: {
+                primary: '#2D2B32',
+                outline: '#E6E6E6'
+              }
+            },
+            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);
+            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);
+          }
         })]
-      }), checkoutDetails.isSICheckboxVisible && checkoutDetails.isSubscriptionCheckout && /*#__PURE__*/_jsx(CheckBoxContainer, {
-        text: "Set up Standing Instructions (SI) for this payment.",
-        isCheckBoxSelected: isSICheckBoxClicked,
-        onCheckBoxClicked: () => {
-          setIsSICheckBoxClicked(!isSICheckBoxClicked);
-        }
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.pressableContainer,
         children: cardValid ? /*#__PURE__*/_jsx(Pressable, {
           style: [styles.buttonContainer, {
             backgroundColor: checkoutDetails.buttonColor,