boxpay-checkout-reactnative-sdk 1.0.16 → 1.0.17-beta1

package/src/screens/webViewScreen.tsx

@@ -1,92 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
-import { WebView, type WebViewNavigation } from 'react-native-webview';
-import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
-
-interface WebViewScreenProps {
-  url: string | null;
-  html: string | null;
-  onBackPress: (redirectionResult : string | null) => void;
-}
-
-const WebViewScreen: React.FC<WebViewScreenProps> = ({
-  url,
-  html,
-  onBackPress,
-  ...props
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [currentUrl, setCurrentUrl] = useState(url ?? '');  // ← track URL
-  const hasCalledBack = useRef(false);                       // ← prevent double call
-
-  const source = html
-    ? { html: html }
-    : url
-      ? { uri: url }
-      : { html: '<h1>No content provided</h1>' };
-
-  const checkUrl = (navUrl: string) => {
-    setCurrentUrl(navUrl);
-  
-    if (navUrl.includes('payment-completion-handler') && !hasCalledBack.current && navUrl.includes('boxpay')) {
-      const url = new URL(navUrl);
-      const redirectionResult = url.searchParams.get('redirectionResult');
-      hasCalledBack.current = true;
-      onBackPress(redirectionResult);
-    }
-  };
-
-  return (
-    <View style={{ flex: 1 }}>
-      {/* URL Search Bar - shows every redirect */}
-      <View style={styles.searchBar}>
-        <Text numberOfLines={1} style={styles.searchBarText}>
-          {currentUrl}
-        </Text>
-      </View>
-
-      <WebView
-        source={source}
-        {...props}
-        style={{ flex: 1 }}
-        javaScriptEnabled={true}
-        domStorageEnabled={true}
-        startInLoadingState={true}
-        onNavigationStateChange={(navState: WebViewNavigation) => checkUrl(navState.url)}
-        onShouldStartLoadWithRequest={(request: ShouldStartLoadRequest) => {
-          checkUrl(request.url);
-          return true;
-        }}
-        onLoadStart={() => setIsLoading(true)}
-        onLoadEnd={() => setIsLoading(false)}
-      />
-      {isLoading && (
-        <View style={styles.loaderOverlay}>
-          <ActivityIndicator size="large" color="#1a1a6e" />
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  loaderOverlay: {
-    ...StyleSheet.absoluteFill,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255,255,255,0.6)',
-  },
-  searchBar: {
-    backgroundColor: '#f1f1f1',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#ddd',
-  },
-  searchBarText: {
-    fontSize: 11,
-    color: '#333',
-  },
-});
-
-export default WebViewScreen;

package/src/sdk-version.json

@@ -1 +0,0 @@
-{ "version": "1.0.16" }

package/src/serviceRequest.ts

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

package/src/sharedContext/checkoutDetailsHandler.ts

@@ -1,114 +0,0 @@
-import type { CheckoutDetails } from '../interface';
-
-export type CheckoutDetailsHandler = {
-  checkoutDetails: CheckoutDetails;
-};
-
-export let checkoutDetailsHandler: CheckoutDetailsHandler = {
-  checkoutDetails: {
-    currencySymbol: '',
-    currencyCode : '',
-    amount: '',
-    token: '',
-    fontFamily : {},
-    ctaBorderRadius:0,
-    buttonColor: '#1CA672',
-    textInputFieldFocusedOutlineColor : "#2D2B32",
-    textInputFieldUnFocusedOutlineColor: "#ADACB0",
-    buttonTextColor:'white',
-    headerColor : 'white',
-    headerTextColor:'#363840',
-    env: '',
-    itemsLength: 0,
-    errorMessage: '',
-    shopperToken: null,
-    isSuccessScreenVisible: false,
-    isFailedScreenVisible: 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,
-    isUpiQRMethodEnabled:false,
-    isUpiCollectMethodEnabled : false,
-    isCardMethodEnabled : false,
-    isWalletMethodEnabled : false,
-    isNetBankingMethodEnabled : false,
-    isEmiMethodEnabled : false,
-    isBnplMethodEnabled : false,
-    isUPIOtmIntentMethodEnabled : false,
-    isUPIOtmCollectMethodEnabled : false,
-    isUPIOtmQRMethodEnabled : false,
-    isOrderItemDetailsVisible : true,
-    isSICheckboxChecked : false,
-    isSICheckboxEnabled : false,
-    isSubscriptionCheckout : false,
-    subscriptionDetails : null
-  },
-};
-
-export const setCheckoutDetailsHandler = (handler: CheckoutDetailsHandler) => {
-  checkoutDetailsHandler = handler;
-};
-
-export const setCheckOutDetailsHandlerToDefault = () => {
-  checkoutDetailsHandler = {
-    checkoutDetails: {
-      currencySymbol: '',
-      currencyCode: '',
-      amount: '',
-      token: '',
-      fontFamily : {},
-      ctaBorderRadius:0,
-      buttonColor: '',
-      textInputFieldFocusedOutlineColor : "",
-      textInputFieldUnFocusedOutlineColor: "",
-      buttonTextColor:'',
-      headerColor : '',
-      headerTextColor:'',
-      env: '',
-      itemsLength: 0,
-      errorMessage: '',
-      shopperToken: null,
-      isSuccessScreenVisible: false,
-      isFailedScreenVisible: 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,
-      isUpiQRMethodEnabled: false,
-      isUpiCollectMethodEnabled: false,
-      isCardMethodEnabled: false,
-      isWalletMethodEnabled: false,
-      isNetBankingMethodEnabled: false,
-      isEmiMethodEnabled: false,
-      isBnplMethodEnabled: false,
-      isUPIOtmIntentMethodEnabled: false,
-      isUPIOtmCollectMethodEnabled: false,
-      isUPIOtmQRMethodEnabled: false,
-      isOrderItemDetailsVisible : true,
-      isSICheckboxChecked : false,
-      isSICheckboxEnabled : false,
-      isSubscriptionCheckout : false,
-      subscriptionDetails : null
-    },
-  };
-};
-

package/src/sharedContext/getTextInputTheme.ts

@@ -1,12 +0,0 @@
-import { checkoutDetailsHandler } from "./checkoutDetailsHandler";
-
-
-export const getTextInputTheme = () => {
-    const { checkoutDetails } = checkoutDetailsHandler;
-    return {
-      colors: {
-        primary: checkoutDetails.textInputFieldFocusedOutlineColor,
-        outline: checkoutDetails.textInputFieldUnFocusedOutlineColor,
-      },
-    };
-};

package/src/sharedContext/handleAutoNavigation.ts

@@ -1,53 +0,0 @@
-import { ScreenRouteMap, TransactionStatus, type AutoNavigationScreen, type PaymentClass } from '../interface';
-import { checkoutDetailsHandler } from './checkoutDetailsHandler';
-import { userDataHandler } from './userdataHandler';
-
-
-export const handleAutoNavigation = (
-    status : String,
-    savedCardArray : PaymentClass[]
-) : AutoNavigationScreen | null => {
-    const {checkoutDetails} = checkoutDetailsHandler
-    const {userData} = userDataHandler 
-
-    if (checkoutDetails.isOrderItemDetailsVisible) return null;
-
-    if (savedCardArray.length > 0) return null;
-
-    if(status !== TransactionStatus.NoAction) return null
-
-    const isPersonalDataMissing = 
-    (checkoutDetails.isFullNameEnabled && (!userData.firstName || userData.firstName.trim() === "")) ||
-    (checkoutDetails.isEmailEnabled && (!userData.email || userData.email.trim() === "")) ||
-    (checkoutDetails.isPhoneEnabled && (!userData.completePhoneNumber || userData.completePhoneNumber.trim() === ""));
-
-    if (isPersonalDataMissing) return null;
-
-    const isShippingDataMissing = checkoutDetails.isShippingAddressEnabled && (!userData.address1 || !userData.city || !userData.pincode);
-
-    if (isShippingDataMissing) return null;
-
-    const isUPIEnabled = checkoutDetails.isUpiCollectMethodEnabled || 
-                        checkoutDetails.isUPIOtmCollectMethodEnabled || 
-                        checkoutDetails.isUPIOtmIntentMethodEnabled || 
-                        checkoutDetails.isUpiIntentMethodEnabled || 
-                        checkoutDetails.isUpiQRMethodEnabled || 
-                        checkoutDetails.isUPIOtmQRMethodEnabled
-
-    const enabledMethods: (keyof typeof ScreenRouteMap & (
-    'CARD' | 'WALLET' | 'NETBANKING' | 'EMI' | 'BNPL'
-    ))[] = [];
-    if (checkoutDetails.isCardMethodEnabled) enabledMethods.push('CARD');
-    if (checkoutDetails.isWalletMethodEnabled) enabledMethods.push('WALLET');
-    if (checkoutDetails.isNetBankingMethodEnabled) enabledMethods.push('NETBANKING');
-    if (checkoutDetails.isEmiMethodEnabled) enabledMethods.push('EMI');
-    if (checkoutDetails.isBnplMethodEnabled) enabledMethods.push('BNPL');
-
-    if (enabledMethods.length === 1 && !isUPIEnabled) {
-        const method = enabledMethods[0];
-        if (!method) return null
-        return ScreenRouteMap[method];
-    }
-    
-    return null;
-}

package/src/sharedContext/handlePaymentResponseHandler.ts

@@ -1,304 +0,0 @@
-import { type HandleFetchStatusOptions, type HandlePaymentOptions, type PaymentClass, type RecommendedInstruments, APIStatus, TransactionStatus } from "../interface";
-import { transformAndFilterList } from '../utility';
-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,
-    onOpenQr,
-    onOpenUpiIntent, 
-    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;
-  
-            onSetTransactionId(apidata.transactionId);
-        
-            switch (txnStatus) {
-                case TransactionStatus.RequiresAction: {
-                    onSetStatus(TransactionStatus.RequiresAction);
-                    if (actionsArray.length > 0) {
-                        const action = actionsArray[0];
-            
-                        switch (action.type) {
-                        case 'html':
-                            if (action.htmlPageString && onSetPaymentHtml) {
-                                onSetPaymentHtml(action.htmlPageString);
-                            }
-                            break;
-            
-                        case 'redirect':
-                            if (action.url && onSetPaymentUrl) {
-                                onSetPaymentUrl(action.url);
-                            }
-                            break;
-            
-                        case 'appRedirect':
-                            if (action.url && onOpenUpiIntent) {
-                                onOpenUpiIntent(action.url); // 👈 launch UPI intent
-                            }
-                            break;
-                            
-                        case 'qrCode' : 
-                            if(action.content && onOpenQr) {
-                                onOpenQr(action.content)
-                                setLoading(false);
-                            }
-                            break
-            
-                        default:
-                            break;
-                        }
-                    } else {
-                        setLoading(false);
-                        if (upiId && onNavigateToTimer) {
-                            onNavigateToTimer(upiId);
-                        }
-                    }
-                    break;
-                }
-                case TransactionStatus.Failed:
-                case TransactionStatus.Rejected: {
-                    onSetStatus(TransactionStatus.Failed);
-                    const fallback = checkoutDetailsErrorMessage;
-                    const errorMessage =
-                        reasonCode?.startsWith('UF')
-                        ? reason?.includes(':')
-                            ? reason.split(':')[1]?.trim() ?? fallback
-                            : reason ?? fallback
-                        : fallback;
-            
-                        if(onSetFailedMessage && onShowFailedModal) {
-                            onSetFailedMessage(errorMessage);
-                            onSetStatus(TransactionStatus.Failed);
-                            onShowFailedModal();
-                        }
-                        setLoading(false);
-                        break;
-        
-                }
-                case TransactionStatus.Approved:
-                case TransactionStatus.Success:
-                case TransactionStatus.Paid: {
-                    onSetStatus(TransactionStatus.Success);
-                    if(onShowSuccessModal) {
-                        onShowSuccessModal(apidata.transactionTimestampLocale ?? '');
-                    }
-                    setLoading(false);
-                    break;
-                }
-        
-                case TransactionStatus.Expired:{
-                    onSetStatus(TransactionStatus.Expired);
-                    if(onShowSessionExpiredModal) {
-                        onShowSessionExpiredModal();
-                    }
-                    setLoading(false);
-                    break;
-                }
-        
-                default:
-                   { 
-                    break;
-                }
-            }
-        }
-        break;
-        case APIStatus.Failed : {
-            if(onSetFailedMessage && onShowFailedModal) {
-                onSetFailedMessage(response.data.status.reason);
-                onShowFailedModal();
-            }
-            onSetStatus(TransactionStatus.Failed);
-            setLoading(false);
-        }
-    }
-}
-
-export function handleFetchStatusResponseHandler({
-    response,
-    checkoutDetailsErrorMessage,
-    onSetStatus,
-    onSetTransactionId,
-    onSetFailedMessage,
-    onShowFailedModal,
-    onShowSuccessModal,
-    onShowSessionExpiredModal,
-    setLoading,
-    stopBackgroundApiTask,
-    isFromUPIIntentFlow
-} : 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;
-  
-            onSetTransactionId(apidata.transactionId);
-        
-            switch (txnStatus) {
-                case TransactionStatus.Failed:
-                case TransactionStatus.Rejected:
-                    onSetStatus(TransactionStatus.Failed);
-                    {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);
-                    {onSetStatus(TransactionStatus.Success);
-                    onShowSuccessModal(apidata.transactionTimestampLocale ?? '');
-                    stopBackgroundApiTask?.();
-                    setLoading?.(false);
-                    break;}
-        
-                case TransactionStatus.Expired:
-                    onSetStatus(TransactionStatus.Expired);
-                    {onSetStatus(TransactionStatus.Expired);
-                    onShowSessionExpiredModal();
-                    stopBackgroundApiTask?.();
-                    setLoading?.(false);
-                    break;}
-        
-                default:
-                    {
-                        if(isFromUPIIntentFlow) {
-                            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;
-                    }
-            }
-        }
-        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

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

package/src/sharedContext/userdataHandler.ts

@@ -1,55 +0,0 @@
-import type { UserData } from '../interface';
-
-export type UserDataHandler = {
-  userData: UserData;
-};
-
-export let userDataHandler: UserDataHandler = {
-  userData: {
-    firstName: null,
-    lastName: null,
-    email: null,
-    completePhoneNumber: null,
-    phoneCode : "+91",
-    dob: null,
-    pan: null,
-    address1: null,
-    address2: null,
-    city: null,
-    state: null,
-    countryCode: "IN",
-    countryName: "India",
-    pincode: null,
-    labelType: null,
-    labelName: null,
-    uniqueId: null,
-  },
-};
-
-export const setUserDataHandler = (handler: UserDataHandler) => {
-  userDataHandler = handler;
-};
-
-export const setUserDataHandlerToDefault = () => {
-  userDataHandler = {
-    userData: {
-      firstName: null,
-      lastName: null,
-      email: null,
-      completePhoneNumber: null,
-      phoneCode : "+91",
-      dob: null,
-      pan: null,
-      address1: null,
-      address2: null,
-      city: null,
-      state: null,
-      countryCode: "IN",
-      countryName: "India",
-      pincode: null,
-      labelType: null,
-      labelName: null,
-      uniqueId: null,
-    },
-  }
-}