boxpay-checkout-reactnative-sdk 1.0.0-beta2

package/src/serviceRequest.ts

@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { generateRandomAlphanumericString, getEndpoint } from './utils/stringUtils'; // adjust path accordingly
+import { checkoutDetailsHandler } from './sharedContext/checkoutDetailsHandler';
+
+// Create an Axios instance if needed
+
+const { checkoutDetails } = checkoutDetailsHandler;
+const version = process.env.SDK_VERSION
+
+const api = axios.create({
+    baseURL: `${getEndpoint(checkoutDetails.env)}${checkoutDetails.token}`,
+});
+
+// Add request interceptor
+api.interceptors.request.use(
+  (config) => {
+    config.headers['X-Request-Id'] = generateRandomAlphanumericString(10);
+    config.headers['X-Client-Connector-Name'] = 'React Native SDK';
+    config.headers['X-Client-Connector-Version'] = version;
+
+    if (checkoutDetails.shopperToken) {
+      config.headers['Authorization'] = `Session ${checkoutDetails.shopperToken}`;
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);

package/src/sharedContext/checkoutDetailsHandler.ts

@@ -0,0 +1,42 @@
+import type { CheckoutDetails } from '../interface';
+
+export type CheckoutDetailsHandler = {
+  checkoutDetails: CheckoutDetails;
+};
+
+export let checkoutDetailsHandler: CheckoutDetailsHandler = {
+  checkoutDetails: {
+    currencySymbol: '',
+    amount: '',
+    token: '',
+    brandColor: '',
+    env: '',
+    itemsLength: 0,
+    errorMessage: '',
+    shopperToken: null,
+    isSuccessScreenVisible: false,
+    isShippingAddressEnabled: false,
+    isShippingAddressEditable: false,
+    isFullNameEnabled: false,
+    isFullNameEditable: false,
+    isEmailEnabled: false,
+    isEmailEditable: false,
+    isPhoneEnabled: false,
+    isPhoneEditable: false,
+    isPanEnabled: false,
+    isPanEditable: false,
+    isDOBEnabled: false,
+    isDOBEditable: false,
+    isUpiIntentMethodEnabled : false,
+    isUpiCollectMethodEnabled : false,
+    isCardMethodEnabled : false,
+    isWalletMethodEnabled : false,
+    isNetBankingMethodEnabled : false,
+    isEmiMethodEnabled : false,
+    isBnplMethodEnabled : false
+  },
+};
+
+export const setCheckoutDetailsHandler = (handler: CheckoutDetailsHandler) => {
+  checkoutDetailsHandler = handler;
+};

package/src/sharedContext/handlePaymentResponseHandler.ts

@@ -0,0 +1,270 @@
+import { type HandleFetchStatusOptions, type HandlePaymentOptions, type PaymentClass, type RecommendedInstruments, APIStatus, TransactionStatus } from "../interface";
+import { transformAndFilterList } from '../utils/listAndObjectUtils';
+import Toast from 'react-native-toast-message'
+import fetchPaymentMethods from '../postRequest/fetchPaymentMethods';
+import fetchRecommendedInstruments from "../postRequest/fetchRecommendedInstruments";
+
+export function handlePaymentResponse({
+    response,
+    upiId,
+    checkoutDetailsErrorMessage,
+    onSetStatus,
+    onSetTransactionId,
+    onSetPaymentUrl,
+    onSetPaymentHtml,
+    onSetFailedMessage,
+    onShowFailedModal,
+    onShowSuccessModal,
+    onShowSessionExpiredModal,
+    onNavigateToTimer,
+    onOpenUpiIntent, // 👈 new
+    setLoading
+  }: HandlePaymentOptions) {
+    switch(response.apiStatus) {
+        case APIStatus.Success: {
+            const apidata = response.data
+            const { status, reason, reasonCode } = apidata.status;
+            const actionsArray = apidata.actions || [];
+            const txnStatus = status.toUpperCase() as TransactionStatus;
+  
+            onSetStatus(status);
+            onSetTransactionId(apidata.transactionId);
+        
+            switch (txnStatus) {
+                case TransactionStatus.RequiresAction: {
+                    if (actionsArray.length > 0) {
+                        const action = actionsArray[0];
+            
+                        switch (action.type) {
+                        case 'html':
+                            if (action.htmlPageString) {
+                            onSetPaymentHtml(action.htmlPageString);
+                            }
+                            break;
+            
+                        case 'redirect':
+                            if (action.url) {
+                                onSetPaymentUrl(action.url);
+                            }
+                            break;
+            
+                        case 'appRedirect':
+                            if (action.url && onOpenUpiIntent) {
+                                onOpenUpiIntent(action.url); // 👈 launch UPI intent
+                            }
+                            break;
+            
+                        default:
+                            break;
+                        }
+                    } else {
+                        setLoading(false);
+                        if (upiId && onNavigateToTimer) {
+                            onNavigateToTimer(upiId);
+                        }
+                    }
+                    break;
+                }
+                case TransactionStatus.Failed:
+                case TransactionStatus.Rejected: {
+                    const fallback = checkoutDetailsErrorMessage;
+                    const errorMessage =
+                        reasonCode?.startsWith('UF')
+                        ? reason?.includes(':')
+                            ? reason.split(':')[1]?.trim() ?? fallback
+                            : reason ?? fallback
+                        : fallback;
+            
+                    onSetFailedMessage(errorMessage);
+                    onSetStatus(TransactionStatus.Failed);
+                    onShowFailedModal();
+                    setLoading(false);
+                    break;
+        
+                }
+                case TransactionStatus.Approved:
+                case TransactionStatus.Success:
+                case TransactionStatus.Paid: {
+                    onSetStatus(TransactionStatus.Success);
+                    onShowSuccessModal(apidata.transactionTimestampLocale ?? '');
+                    setLoading(false);
+                    break;
+                }
+        
+                case TransactionStatus.Expired:{
+                    onSetStatus(TransactionStatus.Expired);
+                    onShowSessionExpiredModal();
+                    setLoading(false);
+                    break;
+                }
+        
+                default:
+                   { onShowFailedModal();
+                    setLoading(false);
+                    break;}
+            }
+        }
+        break;
+        case APIStatus.Failed : {
+            onSetFailedMessage(response.data.status.reason);
+            onSetStatus(TransactionStatus.Failed);
+            onShowFailedModal();
+            setLoading(false);
+        }
+    }
+}
+
+export function handleFetchStatusResponseHandler({
+    response,
+    checkoutDetailsErrorMessage,
+    onSetStatus,
+    onSetTransactionId,
+    onSetFailedMessage,
+    onShowFailedModal,
+    onShowSuccessModal,
+    onShowSessionExpiredModal,
+    setLoading,
+    stopBackgroundApiTask
+} : HandleFetchStatusOptions) {
+    switch(response.apiStatus) {
+        case APIStatus.Success: {
+            const apidata = response.data
+            const status = apidata.status;
+            const reasonCode = apidata.reasonCode
+            const reason = apidata.reason
+            const txnStatus = status.toUpperCase() as TransactionStatus;
+  
+            onSetStatus(status);
+            onSetTransactionId(apidata.transactionId);
+        
+            switch (txnStatus) {
+                case TransactionStatus.Failed:
+                case TransactionStatus.Rejected:
+                    {const fallback = checkoutDetailsErrorMessage;
+                    const errorMessage =
+                        reasonCode?.startsWith('UF')
+                        ? reason?.includes(':')
+                            ? reason.split(':')[1]?.trim() ?? fallback
+                            : reason ?? fallback
+                        : fallback;
+            
+                    onSetFailedMessage(errorMessage);
+                    onSetStatus(TransactionStatus.Failed);
+                    onShowFailedModal();
+                    stopBackgroundApiTask?.();
+                    setLoading?.(false);
+                    break;}
+        
+                case TransactionStatus.Approved:
+                case TransactionStatus.Success:
+                case TransactionStatus.Paid:
+                    {onSetStatus(TransactionStatus.Success);
+                    onShowSuccessModal(apidata.transactionTimestampLocale ?? '');
+                    stopBackgroundApiTask?.();
+                    setLoading?.(false);
+                    break;}
+        
+                case TransactionStatus.Expired:
+                    {onSetStatus(TransactionStatus.Expired);
+                    onShowSessionExpiredModal();
+                    stopBackgroundApiTask?.();
+                    setLoading?.(false);
+                    break;}
+        
+                default:
+                    {onShowFailedModal();
+                    setLoading?.(false);
+                    stopBackgroundApiTask?.();
+                    break;}
+            }
+        }
+        break;
+        case APIStatus.Failed : {
+            onSetFailedMessage(response.data.status.reason);
+            onSetStatus(TransactionStatus.Failed);
+            onShowFailedModal();
+            setLoading?.(false);
+        }
+    }
+}
+
+interface fetchPaymentMethodHandlerArgs {
+    paymentType : string,
+    setList : (list:PaymentClass[]) => void
+}
+
+export async function fetchPaymentMethodHandler({
+    paymentType,
+    setList
+}:fetchPaymentMethodHandlerArgs) {
+    const response = await fetchPaymentMethods();
+      
+      switch (response.apiStatus) {
+        case APIStatus.Success: {
+          const paymentMethodList = transformAndFilterList(response.data, paymentType);
+          setList(paymentMethodList);
+          break;
+        }
+  
+        case APIStatus.Failed: {
+          Toast.show({
+            type: 'error',
+            text1: 'Oops!',
+            text2: 'Something went wrong. Please try again.',
+          });
+          break;
+        }
+  
+        default:
+          break;
+      }
+}
+
+interface fetchSavedInstrumentsArgs {
+    setRecommendedList : (list:PaymentClass[]) => void,
+    setUpiInstrumentList : (list : PaymentClass[]) => void,
+    setCardInstrumentList : (list : PaymentClass[]) => void
+}
+
+
+export async function fetchSavedInstrumentsHandler({setRecommendedList, setUpiInstrumentList, setCardInstrumentList} : fetchSavedInstrumentsArgs) {
+    const response = await fetchRecommendedInstruments()
+    switch(response.apiStatus) {
+        case APIStatus.Success : {
+            const instrumentList = response.data
+            const upiList : PaymentClass[] = []
+            const cardList : PaymentClass[] = []
+            instrumentList.forEach((instrument: RecommendedInstruments) => {
+                const item: PaymentClass = {
+                  type: instrument.type,
+                  id: instrument.instrumentRef,
+                  displayName: instrument.cardNickName ? instrument.cardNickName : '',
+                  displayValue: instrument.displayValue,
+                  iconUrl: instrument.logoUrl ? instrument.logoUrl : '///',
+                  instrumentTypeValue: instrument.instrumentRef,
+                  isSelected: false,
+                };
+              
+                if (instrument.type.toLowerCase() === 'upi') {
+                  upiList.push(item);
+                } else if (instrument.type.toLowerCase() === 'card') {
+                  cardList.push(item);
+                }
+            });
+            setRecommendedList(upiList.slice(0, 2));
+            setUpiInstrumentList(upiList)
+            setCardInstrumentList(cardList)
+            break
+        }
+        case APIStatus.Failed: {
+            Toast.show({
+                type: 'error',
+                text1: 'Oops!',
+                text2: 'Something went wrong. Please try again.',
+            });
+            break;
+        }
+        default:
+          break;
+    }
+}

package/src/sharedContext/paymentStatusHandler.ts

@@ -0,0 +1,12 @@
+import type { PaymentResult } from '../interface';
+export type PaymentHandler = {
+  onPaymentResult: (result: PaymentResult) => void;
+};
+
+export let paymentHandler: PaymentHandler = {
+  onPaymentResult: () => {},
+};
+
+export const setPaymentHandler = (handler: PaymentHandler) => {
+  paymentHandler = handler;
+};

package/src/sharedContext/userdataHandler.ts

@@ -0,0 +1,29 @@
+import type { UserData } from '../interface';
+
+export type UserDataHandler = {
+  userData: UserData;
+};
+
+export let userDataHandler: UserDataHandler = {
+  userData: {
+    firstName: null,
+    lastName: null,
+    email: null,
+    phone: null,
+    dob: null,
+    pan: null,
+    address1: null,
+    address2: null,
+    city: null,
+    state: null,
+    country: null,
+    pincode: null,
+    labelType: null,
+    labelName: null,
+    uniqueId: null,
+  },
+};
+
+export const setUserDataHandler = (handler: UserDataHandler) => {
+  userDataHandler = handler;
+};

package/src/styles/components/addressCardStyles.ts

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native';
+import { checkoutDetailsHandler } from '../../sharedContext/checkoutDetailsHandler';
+
+const {brandColor} = checkoutDetailsHandler.checkoutDetails
+const styles = StyleSheet.create({
+  titleText: {
+    marginStart: 16,
+    marginTop: 20,
+    fontSize: 14,
+    color: '#020815B5',
+    fontFamily: 'Poppins-SemiBold'
+  },
+  pressableContainer : {
+    borderColor: '#F1F1F1',
+    borderWidth: 1,
+    marginHorizontal: 16,
+    marginTop: 8,
+    paddingBottom: 16,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    borderRadius: 12,
+  },
+  imageStyle : {
+    height: 20,
+    width: 20,
+    marginStart: 12,
+    marginTop: 20,
+  },
+  insideContainer : {
+    flexDirection: 'column',
+    marginStart: 8,
+    marginTop: 12,
+    marginEnd: 8,
+    flex: 1,
+  },
+  insideContainerNormalText : {
+    fontSize: 12,
+    color: '#4F4D55',
+    fontFamily: 'Poppins-Regular',
+  },
+  insideContainerHighlighedText : {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 12,
+    color: '#4F4D55',
+  },
+  insideContainerDesc : {
+    fontSize: 14,
+    color: '#4F4D55',
+    fontFamily: 'Poppins-SemiBold',
+    flexShrink: 1,
+    marginTop: -4,
+  },
+  insideContainerClickableText : {
+    fontSize: 14,
+    color: brandColor,
+    fontFamily: 'Poppins-SemiBold',
+    flexShrink: 1,
+    marginTop: -4,
+  }
+});
+
+export default styles

package/src/styles/components/bankCardStyles.ts

@@ -0,0 +1,60 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    imageContainer : {
+        width: 32,
+        height: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    shimmer : {
+        width: 32, height: 32, borderRadius: 8
+    },
+    errorImage : {
+        transform: [{ scale: 0.4 }]
+    },
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 12,
+    },
+    detailsContainer: {
+      flex: 1,
+      marginStart: 8,
+    },
+    bankName: {
+      fontSize: 14,
+      fontFamily: 'Poppins-SemiBold',
+      color: '#4F4D55',
+    },
+    tagsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    tag: {
+      borderColor: '#FFADD2',
+      borderRadius: 6,
+      backgroundColor: '#FFF0F6',
+      borderWidth: 1,
+      paddingHorizontal: 4,
+      marginRight: 6,
+    },
+    tagText: {
+      fontSize: 10,
+      fontFamily: 'Poppins-Medium',
+      color: '#EB2F96',
+    },
+    chervonImage : {
+        alignSelf: 'center',
+        height: 6,
+        width: 14,
+        marginLeft: 'auto',
+        transform: [
+        {
+            rotate: '270deg',
+        },
+        ],
+    }
+  });
+
+  export default styles

package/src/styles/components/cancelPaymentModalStyles.ts

@@ -0,0 +1,88 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    modalContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    modal: {
+      margin: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    },
+    modalContent: {
+      backgroundColor: '#F5F6FB',
+      borderRadius: 16,
+      padding: 16,
+      width: '80%',
+      margin: 'auto',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 4,
+      elevation: 5,
+    },
+    iconContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 10,
+    },
+    iconImage: {
+      height: 20,
+      width: 20,
+      tintColor: '#DB7C1D',
+    },
+    modalTitle: {
+      fontSize: 16,
+      color: '#2D2B32',
+      marginLeft: 8,
+      fontFamily: 'Poppins-SemiBold',
+    },
+    modalText: {
+      fontSize: 14,
+      color: '#555',
+      marginBottom: 20,
+      lineHeight: 24,
+      fontFamily: 'Poppins-Regular',
+    },
+    buttonContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: 10,
+    },
+    cancelButton: {
+      backgroundColor: '#fff',
+      borderRadius: 7,
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    confirmButton: {
+      borderRadius: 7,
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      flex: 1,
+      marginLeft: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    buttonText: {
+      color: '#333',
+      fontSize: 16,
+      textAlign: 'center',
+      fontFamily: 'Poppins-Regular',
+    },
+    confirmButtonText: {
+      color: 'white',
+      fontSize: 16,
+      textAlign: 'center',
+      fontFamily: 'Poppins-SemiBold',
+    },
+});
+
+export default styles

package/src/styles/components/cvvInfoBottomSheetStyles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    modal: {
+      justifyContent: 'flex-end',
+      margin: 0,
+    },
+    sheet: {
+      backgroundColor: 'white',
+      padding: 20,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+    },
+    secondaryHeading: {
+      color: '#2D2B32',
+      fontSize: 14,
+      marginTop: 16,
+      fontFamily: 'Poppins-SemiBold',
+    },
+    desc: {
+      color: '#4F4D55',
+      fontSize: 14,
+      fontFamily: 'Poppins-Regular',
+    },
+    buttonContainer: {
+      flexDirection: 'row',
+      borderRadius: 8,
+      justifyContent: 'center',
+      marginTop: 12,
+      backgroundColor: '#1CA672',
+    },
+    buttonText: {
+      color: 'white',
+      fontSize: 16,
+      paddingVertical: 12,
+      fontFamily: 'Poppins-SemiBold',
+    },
+    headingText : {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: 20,
+        color: '#2D2B32'
+    },
+    divider : {
+        flexDirection: 'row',
+        height: 2,
+        backgroundColor: '#ECECED',
+        marginTop: 28,  
+    },
+    imageStyle : {
+        width: 120, height: 58, marginTop: 28
+    }
+});
+
+export default styles

package/src/styles/indexStyles.ts

@@ -0,0 +1,52 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    screenView : { flex: 1, backgroundColor: '#F5F6FB' },
+    loadingContainer : { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    lottieStyle : { width: 80, height: 80 },
+    container : {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headingText : {
+        marginStart: 14,
+        marginTop: 20,
+        fontSize: 14,
+        color: '#020815B5',
+        fontFamily: 'Poppins-SemiBold',
+    },
+    paymentContainer : {
+        borderColor: '#F1F1F1',
+        borderWidth: 1,
+        marginHorizontal: 16,
+        marginVertical: 8,
+        backgroundColor: 'white',
+        flexDirection: 'column',
+        borderRadius: 12,
+    },
+    footerContainer : {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        backgroundColor: '#F5F6FB',
+        flexDirection: 'row',
+    },
+    footerText : {
+        fontSize: 12,
+        color: '#888888',
+        marginBottom: 15,
+        fontFamily: 'Poppins-Medium',
+    },
+    footerImage : { height: 50, width: 50 },
+    webViewScreenStyle : {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'white',
+    }
+})
+
+export default styles