boxpay-checkout-reactnative-sdk
Version:
Boxpay Payment Gateway
844 lines (832 loc) • 31.8 kB
JavaScript
"use strict";
import { View, Text, Image, BackHandler, Pressable, StatusBar } from 'react-native';
import { useEffect, useRef, useState } from 'react';
import Header from "../components/header.js";
import { Checkbox, TextInput } from 'react-native-paper';
import LottieView from 'lottie-react-native';
import fetchCardDetails from "../postRequest/fetchCardDetails.js";
import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler.js";
import cardPostRequest from "../postRequest/cardPostRequest.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 emiPostRequest from "../postRequest/emiPostRequest.js";
import { SafeAreaView } from 'react-native-safe-area-context';
import KnowMoreBottomSheet from "../components/knowMoreBottomSheet.js";
import styles from "../styles/screens/cardScreenStyles.js";
import Toast from 'react-native-toast-message';
import { handleFetchStatusResponseHandler, handlePaymentResponse } from "../sharedContext/handlePaymentResponseHandler.js";
// Define the screen's navigation properties
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const CardScreen = ({
route,
navigation
}) => {
const {
duration,
bankName,
bankUrl,
offerCode,
amount,
percent,
cardType,
issuerBrand
} = route.params || {};
const durationNumber = Array.isArray(duration) ? duration[0] : duration;
const bankNameStr = Array.isArray(bankName) ? bankName[0] : bankName;
const bankUrlStr = Array.isArray(bankUrl) ? bankUrl[0] : bankUrl;
const offerCodeStr = Array.isArray(offerCode) ? offerCode[0] : offerCode;
const amountStr = Array.isArray(amount) ? amount[0] : amount;
const percentNumber = Array.isArray(percent) ? percent[0] : percent;
const cardTypeStr = Array.isArray(cardType) ? cardType[0] : cardType;
const {
checkoutDetails
} = checkoutDetailsHandler;
const [cardNumberText, setCardNumberText] = useState(null);
const [cardExpiryText, setCardExpiryText] = useState(null);
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 [maxCvvLength, setMaxCvvLength] = useState(4);
const [maxCardNumberLength, setMaxCardNumberLength] = useState(19);
const [loading, setLoading] = useState(false);
const [cardNumberError, setCardNumberError] = useState(false);
const [cardExpiryError, setCardExpiryError] = useState(false);
const [cardCvvError, setCardCvvError] = useState(false);
const [cardHolderNameError, setCardHolderNameError] = useState(false);
const [cardNumberErrorText, setCardNumberErrorText] = useState('This card number is invalid');
const [cardExpiryErrorText, setCardExpiryErrorText] = useState('Expiry is invalid');
const [cardCvvErrorText, setCardCvvErrorText] = useState('CVV is invalid');
const [cardHolderNameErrorText, setCardHolderNameErrorText] = useState('This card name is invalid');
const [cardNumberValid, setCardNumberValid] = useState(true);
const [cardExpiryValid, setCardExpiryValid] = useState(true);
const [methodEnabled, setMethodEnabled] = useState(true);
const [cardNumberFocused, setCardNumberFocused] = useState(false);
const [cardExpiryFocused, setCardExpiryFocused] = useState(false);
const [cardCvvFocused, setCardCvvFocused] = useState(false);
const [cardHolderNameFocused, setCardHolderNameFocused] = useState(false);
const [cardNickNameFocused, setCardNickNameFocused] = useState(false);
const [cardValid, setCardValid] = useState(false);
const [showCvvInfo, setShowCvvInfo] = useState(false);
const [showKnowMoreDialog, setKnowMoreDialog] = useState(false);
const [isSavedCardCheckBoxClicked, setIsSavedCardCheckBoxClicked] = useState(false);
const [paymentUrl, setPaymentUrl] = useState(null);
const [paymentHtml, setPaymentHtml] = useState(null);
const [showWebView, setShowWebView] = useState(false);
const [failedModalOpen, setFailedModalState] = useState(false);
const [successModalOpen, setSuccessModalState] = useState(false);
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 [transactionId, setTransactionId] = useState(null);
const backgroundApiInterval = useRef(null);
const [imageLoad, setImageLoad] = useState(true);
const [imageError, setImageError] = useState(false);
const [emiIssuerExist, setEmiIssuerExist] = useState(true);
const [emiIssuer, setEmiIssuer] = useState('');
const [shopperToken, setShopperToken] = useState(null);
const handleCardNumberTextChange = async text => {
if (text == '') {
setCardNumberText(text);
} else {
const cleaned = text.replace(/[^\d]/g, '');
// Add space every 4 digits
const formatted = cleaned.match(/.{1,4}/g)?.join(' ') || '';
setCardNumberText(formatted);
if (formatted.length > 10) {
if (formatted.length == 18 && maxCardNumberLength == 18 || formatted.length == 19) {
if (!isValidCardNumberByLuhn(formatted.replace(/ /g, ''))) {
setCardNumberValid(false);
} else {
setCardNumberValid(true);
}
}
await fetchCardDetails(formatted.replace(/ /g, '')).then(response => {
switch (response.apiStatus) {
case APIStatus.Success:
{
const data = response.data;
if ('paymentMethod' in data) {
if (durationNumber != undefined && durationNumber != '') {
setEmiIssuerExist(data.issuerName != '' && data.issuerName != null);
setEmiIssuer(data.issuerName ?? "");
}
setMethodEnabled(data.methodEnabled);
if (data.paymentMethod.brand == 'VISA') {
setCardSelectedIcon(require('../../assets/images/ic_visa.png'));
setMaxCvvLength(3);
setMaxCardNumberLength(19);
} else if (data.paymentMethod.brand == 'Mastercard') {
setCardSelectedIcon(require('../../assets/images/ic_masterCard.png'));
setMaxCvvLength(3);
setMaxCardNumberLength(19);
} else if (data.paymentMethod.brand == 'RUPAY') {
setCardSelectedIcon(require('../../assets/images/ic_rupay.png'));
setMaxCvvLength(3);
setMaxCardNumberLength(19);
} else if (data.paymentMethod.brand == 'AmericanExpress') {
setCardSelectedIcon(require('../../assets/images/ic_amex.png'));
setMaxCvvLength(4);
setMaxCardNumberLength(18);
} else if (data.paymentMethod.brand == 'Maestro') {
setCardSelectedIcon(require('../../assets/images/ic_maestro.png'));
setMaxCvvLength(3);
setMaxCardNumberLength(19);
} else {
setCardSelectedIcon(require('../../assets/images/ic_default_card.png'));
setMaxCvvLength(3);
setMaxCardNumberLength(19);
}
}
break;
}
case APIStatus.Failed:
{
Toast.show({
type: 'error',
text1: 'Oops!',
text2: 'Something went wrong. Please try again.'
});
break;
}
default:
{
break;
}
}
});
} else {
setCardSelectedIcon(require('../../assets/images/ic_default_card.png'));
setMaxCvvLength(3);
setMaxCardNumberLength(19);
}
}
};
const isValidCardNumberByLuhn = stringInputCardNumber => {
const minCardLength = 13;
if (stringInputCardNumber.length < minCardLength) {
return false;
}
let sum = 0;
let isSecondDigit = false;
for (let i = stringInputCardNumber.length - 1; i >= 0; i--) {
let d = parseInt(stringInputCardNumber[i], 10);
if (isSecondDigit) {
d *= 2;
}
sum += Math.floor(d / 10);
sum += d % 10;
isSecondDigit = !isSecondDigit;
}
const result = sum % 10 === 0;
return result;
};
const handleCardNumberBlur = () => {
const cleaned = cardNumberText?.replace(/ /g, '') || '';
const cleanedLength = maxCardNumberLength == 19 ? 16 : 15;
setCardNumberErrorText(cleaned.length < 1 ? 'Required' : cleaned.length < cleanedLength && methodEnabled ? '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 < cleanedLength || !methodEnabled || !cardNumberValid || !emiIssuerExist || emiIssuer != issuerBrand && durationNumber != undefined && durationNumber != '');
setCardNumberFocused(false);
};
const startBackgroundApiTask = () => {
backgroundApiInterval.current = setInterval(() => {
callFetchStatusApi();
}, 4000);
};
const stopBackgroundApiTask = () => {
if (backgroundApiInterval.current) {
clearInterval(backgroundApiInterval.current);
}
};
useEffect(() => {
if (paymentUrl) {
setShowWebView(true);
}
}, [paymentUrl]);
useEffect(() => {
setShopperToken(checkoutDetails.shopperToken);
}, []);
const handleCardExpiryTextChange = text => {
setCardExpiryText(text);
if (text === '') {
return;
}
const isDeleting = text.length < (cardExpiryText?.length || 0);
// Remove all non-digits
let cleaned = text.replace(/\D/g, '');
// Handle backspace on slash
if (isDeleting && text.endsWith('/')) {
cleaned = cleaned.slice(0, -1);
}
// Limit to 4 digits (MMYY)
cleaned = cleaned.slice(0, 4);
// Add leading zero for single-digit month
if (cleaned.length === 1 && parseInt(cleaned, 10) > 1) {
cleaned = `0${cleaned}`;
}
// Format as MM/YY
let formatted = cleaned;
if (cleaned.length > 2) {
formatted = `${cleaned.slice(0, 2)}/${cleaned.slice(2)}`;
} else if (cleaned.length === 2 && !isDeleting) {
formatted = `${cleaned}/`;
}
// Set formatted text
setCardExpiryText(formatted);
// Validate month
let monthError = false;
if (cleaned.length >= 2) {
const month = parseInt(cleaned.slice(0, 2), 10);
monthError = month < 1 || month > 12;
}
// Validate year
let yearError = false;
if (cleaned.length === 4) {
const currentYear = new Date().getFullYear() % 100; // Get last two digits of current year
const currentMonth = new Date().getMonth() + 1;
const enteredMonth = parseInt(cleaned.slice(0, 2), 10);
const enteredYear = parseInt(cleaned.slice(2), 10);
if (enteredYear < currentYear) {
yearError = true; // Prevent past years
} else if (enteredYear === currentYear && enteredMonth < currentMonth) {
yearError = true; // Prevent past months in the current year
}
}
// If invalid month or year, show error
if (monthError || yearError) {
setCardExpiryValid(false);
return;
}
setCardExpiryValid(true);
};
const handleCardExpiryBlur = () => {
const cleaned = cardExpiryText?.replace(/ /g, '') || '';
setCardExpiryErrorText(cleaned.length < 1 ? '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' : '');
setCardCvvError(cleaned.length < maxCvvLength);
setCardCvvFocused(false);
};
const handleCardHolderNameBlur = () => {
const cleaned = cardHolderNameText?.replace(/ /g, '') || '';
setCardHolderNameErrorText(cleaned.length < 1 ? 'Required' : '');
setCardHolderNameFocused(false);
setCardHolderNameError(cleaned.length < 1);
};
const handleCardCvvTextChange = text => {
setCardCvvText(text);
if (text == '') {
setCardCvvErrorText('Required');
setCardCvvError(true);
} else {
setCardCvvError(false);
}
};
const handleCardHolderNameTextChange = text => {
setCardHolderNameText(text);
if (text != '') {
setCardHolderNameError(false);
}
};
const checkCardValid = () => {
if (durationNumber != undefined && durationNumber != '') {
if (cardNumberError || cardExpiryError || cardCvvError || cardHolderNameError || cardNumberText?.length != maxCardNumberLength || cardExpiryText?.length != 5 || cardCvvText?.length != maxCvvLength || (cardHolderNameText?.length ?? 0) < 1 || !cardNumberValid || !emiIssuerExist) {
setCardValid(false);
} else {
setCardValid(true);
}
} else {
if (cardNumberError || cardExpiryError || cardCvvError || cardHolderNameError || cardNumberText?.length != maxCardNumberLength || cardExpiryText?.length != 5 || cardCvvText?.length != maxCvvLength || (cardHolderNameText?.length ?? 0) < 1 || !cardNumberValid) {
setCardValid(false);
} else {
setCardValid(true);
}
}
};
const onProceedBack = () => {
navigation.goBack();
return true;
};
const callFetchStatusApi = async () => {
const response = await fetchStatus();
handleFetchStatusResponseHandler({
response: response,
checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
onSetStatus: setStatus,
onSetTransactionId: setTransactionId,
onSetFailedMessage: msg => {
paymentFailedMessage.current = msg;
},
onShowFailedModal: () => {
setFailedModalState(true);
},
onShowSuccessModal: ts => {
setSuccessfulTimeStamp(ts);
setSuccessModalState(true);
},
onShowSessionExpiredModal: () => {
setSessionExppireModalState(true);
},
setLoading: setLoading,
stopBackgroundApiTask: stopBackgroundApiTask
});
};
const onProceedForward = async () => {
let response;
setLoading(true);
if (durationNumber !== undefined && durationNumber !== '') {
response = await emiPostRequest({
cardNumber: cardNumberText || '',
expiryDate: cardExpiryText || '',
cvv: cardCvvText || '',
holderName: cardHolderNameText || '',
cardType: cardTypeStr || '',
offerCode: offerCodeStr || '',
duration: durationNumber
});
} else {
response = await cardPostRequest(cardNumberText || '', cardExpiryText || '', cardCvvText || '', cardHolderNameText || '', cardNickNameText || '', isSavedCardCheckBoxClicked);
}
handlePaymentResponse({
response: response,
checkoutDetailsErrorMessage: checkoutDetails.errorMessage,
onSetStatus: setStatus,
onSetTransactionId: setTransactionId,
onSetPaymentHtml: setPaymentHtml,
onSetPaymentUrl: setPaymentUrl,
onSetFailedMessage: msg => paymentFailedMessage.current = msg,
onShowFailedModal: () => setFailedModalState(true),
onShowSuccessModal: ts => {
setSuccessfulTimeStamp(ts);
setSuccessModalState(true);
},
onShowSessionExpiredModal: () => setSessionExppireModalState(true),
setLoading: setLoading
});
};
useEffect(() => {
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
});
});
useEffect(() => {
checkCardValid();
}, [cardNumberText, cardExpiryText, cardCvvText, cardHolderNameText]);
const onExitCheckout = () => {
const mockPaymentResult = {
status: status || '',
transactionId: transactionId || ''
};
paymentHandler.onPaymentResult(mockPaymentResult);
};
useEffect(() => {
if (paymentHtml) {
setShowWebView(true);
}
}, [paymentHtml]);
return /*#__PURE__*/_jsxs(SafeAreaView, {
style: styles.screenView,
children: [/*#__PURE__*/_jsx(StatusBar, {
barStyle: "dark-content"
}), 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: 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'
},
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,
children: bankNameStr
})]
}), /*#__PURE__*/_jsxs(View, {
style: styles.thickBorder,
children: [/*#__PURE__*/_jsxs(Text, {
style: styles.durationText,
children: [duration, " months x", /*#__PURE__*/_jsxs(Text, {
style: styles.currencyText,
children: [' ', checkoutDetails.currencySymbol]
}), amountStr]
}), /*#__PURE__*/_jsxs(Text, {
style: styles.percentText,
children: ["@", percentNumber, "% p.a."]
})]
})]
}), /*#__PURE__*/_jsx(TextInput, {
mode: "outlined",
label: /*#__PURE__*/_jsx(Text, {
style: [styles.textFieldLabel, {
color: cardNumberFocused ? '#2D2B32' : cardNumberText != '' && cardNumberText != null ? '#2D2B32' : '#ADACB0'
}],
children: "Card Number"
}),
value: cardNumberText || '',
onChangeText: it => {
handleCardNumberTextChange(it);
},
theme: {
colors: {
primary: '#2D2B32',
outline: '#E6E6E6'
}
},
style: [styles.textInput, {
marginTop: 28,
marginHorizontal: 16
}],
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,
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'
}],
children: "Expiry (MM/YY)"
}),
value: cardExpiryText || '',
onChangeText: it => {
handleCardExpiryTextChange(it);
},
theme: {
colors: {
primary: '#2D2B32',
outline: '#E6E6E6'
}
},
style: styles.textInput,
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,
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'
}],
children: "CVV"
}),
value: cardCvvText || '',
onChangeText: it => {
handleCardCvvTextChange(it);
},
theme: {
colors: {
primary: '#2D2B32',
outline: '#E6E6E6'
}
},
style: styles.textInput,
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);
}
}),
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,
children: cardCvvErrorText
})]
})]
}), /*#__PURE__*/_jsx(TextInput, {
mode: "outlined",
label: /*#__PURE__*/_jsx(Text, {
style: [styles.textFieldLabel, {
color: cardHolderNameFocused ? '#2D2B32' : cardHolderNameText != '' && cardHolderNameText != null ? '#2D2B32' : '#ADACB0'
}],
children: "Name on the Card"
}),
value: cardHolderNameText || '',
onChangeText: it => {
handleCardHolderNameTextChange(it);
},
theme: {
colors: {
primary: '#2D2B32',
outline: '#E6E6E6'
}
},
style: [styles.textInput, {
marginHorizontal: 16,
marginTop: 16
}],
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,
children: cardHolderNameErrorText
}), shopperToken != null && shopperToken != '' && /*#__PURE__*/_jsx(TextInput, {
mode: "outlined",
label: /*#__PURE__*/_jsx(Text, {
style: [styles.textFieldLabel, {
color: cardNickNameFocused ? '#2D2B32' : cardNickNameText != '' && cardNickNameText != null ? '#2D2B32' : '#ADACB0'
}],
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
}],
outlineStyle: {
borderRadius: 8,
// Add this
borderWidth: 1.5
},
onBlur: () => {
setCardNickNameFocused(false);
},
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,
children: "CVV will not be stored"
})]
}), shopperToken != null && shopperToken != '' && /*#__PURE__*/_jsxs(View, {
style: styles.checkBoxContainer,
children: [/*#__PURE__*/_jsx(Checkbox, {
status: isSavedCardCheckBoxClicked ? 'checked' : 'unchecked',
onPress: () => {
setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked);
},
color: checkoutDetails.brandColor
}), /*#__PURE__*/_jsx(Text, {
style: styles.checkBoxText,
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.brandColor
}],
children: "Know more"
})
})]
}), /*#__PURE__*/_jsx(View, {
style: styles.pressableContainer,
children: cardValid ? /*#__PURE__*/_jsx(Pressable, {
style: [styles.buttonContainer, {
backgroundColor: checkoutDetails.brandColor
}],
onPress: () => {
onProceedForward();
},
children: /*#__PURE__*/_jsx(Text, {
style: styles.buttonText,
children: "Make Payment"
})
}) : /*#__PURE__*/_jsx(Pressable, {
style: [styles.buttonContainer, {
backgroundColor: '#E6E6E6'
}],
children: /*#__PURE__*/_jsx(Text, {
style: [styles.buttonText, {
color: '#ADACB0'
}],
children: "Make Payment"
})
})
})]
}), 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.pressableContainer,
children: /*#__PURE__*/_jsx(WebViewScreen, {
url: paymentUrl,
html: paymentHtml,
onBackPress: () => {
startBackgroundApiTask();
setLoading(true);
setLoading(true);
setShowWebView(false);
}
})
})]
});
};
export default CardScreen;
//# sourceMappingURL=cardScreen.js.map