boxpay-checkout-reactnative-sdk 1.0.0-beta31 → 1.0.0-beta33

package/src/components/sessionExpire.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import callUIAnalytics from '../postRequest/callUIAnalytics';
-import { AnalyticsEvents } from '../interface';
 
 interface SessionExpireProps {
   onClick: () => void;
@@ -46,7 +44,6 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
               { backgroundColor: checkoutDetails.brandColor },
             ]}
             onPress={() => {
-              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Session Expired button clicked", "")
               onClick()
             }}
           >

package/src/interface.ts

@@ -40,6 +40,7 @@ export interface CheckoutDetails {
   isDOBEditable: boolean;
   isUpiIntentMethodEnabled : boolean,
   isUpiCollectMethodEnabled : boolean,
+  isUpiQRMethodEnabled : boolean,
   isCardMethodEnabled : boolean,
   isWalletMethodEnabled : boolean,
   isNetBankingMethodEnabled : boolean,
@@ -139,6 +140,10 @@ interface CardTokenPayload {
   };
 }
 
+interface UPIQRPayload {
+  type : 'upi/qr'
+}
+
 interface UPICollectPayload {
   type: 'upi/collect';
   upi?: {
@@ -150,7 +155,8 @@ interface UPICollectPayload {
 export type InstrumentDetails =
   | UPIIntentPayload
   | CardTokenPayload
-  | UPICollectPayload;
+  | UPICollectPayload
+  | UPIQRPayload
 
 export interface PaymentMethod {
   id: string;
@@ -235,7 +241,8 @@ interface PaymentActions {
   method : string,
   url : string,
   type : string,
-  htmlPageString : string
+  htmlPageString : string,
+  content : string
 }
 
 export interface FetchCardDetails {
@@ -264,6 +271,7 @@ export interface HandlePaymentOptions {
   onShowSuccessModal: (timestamp: string) => void;
   onShowSessionExpiredModal: () => void;
   onNavigateToTimer?: (upiId: string) => void;
+  onOpenQr? : (qrImage : string) => void
   onOpenUpiIntent?: (url: string) => void; 
   setLoading: (loading: boolean) => void;
 }

package/src/postRequest/callUIAnalytics.ts

@@ -1,7 +1,6 @@
-import Constants from 'expo-constants';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import type { AnalyticsApiResponse } from '../interface';
-import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import { getBrowserData, getDeviceDetails } from '../utils/listAndObjectUtils';
 import { APIStatus } from '../interface';
 import axios from 'axios';
 import { getBaseURL } from '../utils/stringUtils';
@@ -13,26 +12,10 @@ const callUIAnalytics = async (
   ) : Promise<AnalyticsApiResponse> => {
     const { checkoutDetails } = checkoutDetailsHandler;
     const deviceDetails = getDeviceDetails()
+    const browserData = getBrowserData()
 
     const requestBody = {
-        browserData: {
-          screenHeight:
-            Constants.platform?.ios?.screenHeight ||
-            Constants.platform?.android?.screenHeight ||
-            0,
-          screenWidth:
-            Constants.platform?.ios?.screenWidth ||
-            Constants.platform?.android?.screenWidth ||
-            0,
-          acceptHeader: 'application/json',
-          userAgentHeader: 'Expo App',
-          browserLanguage: 'en_US',
-          ipAddress: 'null',
-          colorDepth: 24,
-          javaEnabled: true,
-          timeZoneOffSet: new Date().getTimezoneOffset(),
-          packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
-        },
+        browserData: browserData,
         callerToken : checkoutDetails.token,
         uiEvent : uiEvent,
         eventAttrs : {

package/src/postRequest/cardPostRequest.ts

@@ -1,9 +1,7 @@
-import Constants from 'expo-constants';
 import api from '../serviceRequest'
-import { userDataHandler } from '../sharedContext/userdataHandler';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
-import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import type { PaymentExecutedPostResponse } from '../interface';
+import { getBrowserData, getDeviceDetails, getShopperDetails } from '../utils/listAndObjectUtils';
 import { AnalyticsEvents, APIStatus } from '../interface';
 import callUIAnalytics from './callUIAnalytics';
 
@@ -15,49 +13,18 @@ const cardPostRequest = async (
   cardNickName: string,
   isCheckboxClicked: boolean
 ) : Promise<PaymentExecutedPostResponse> => {
-  const { userData } = userDataHandler;
   const { checkoutDetails } = checkoutDetailsHandler;
   const deviceDetails = getDeviceDetails()
+  const browserData = getBrowserData()
+  const shopperData = getShopperDetails()
 
   const formatExpiry = (input: string) => {
     const [month, year] = input.split('/');
     return `20${year}-${month}`;
   };
-  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
-    return Object.values(address).every(
-      (value) => value === null || value === undefined || value === ''
-    );
-  };
 
-  const deliveryAddress = {
-    address1: userData.address1,
-    address2: userData.address2,
-    city: userData.city,
-    state: userData.state,
-    countryCode: userData.country,
-    postalCode: userData.pincode,
-    labelType: userData.labelType,
-    labelName: userData.labelName,
-  };
   const requestBody = {
-    browserData: {
-      screenHeight:
-        Constants.platform?.ios?.screenHeight ||
-        Constants.platform?.android?.screenHeight ||
-        0,
-      screenWidth:
-        Constants.platform?.ios?.screenWidth ||
-        Constants.platform?.android?.screenWidth ||
-        0,
-      acceptHeader: 'application/json',
-      userAgentHeader: 'Expo App',
-      browserLanguage: 'en_US',
-      ipAddress: 'null',
-      colorDepth: 24,
-      javaEnabled: true,
-      timeZoneOffSet: new Date().getTimezoneOffset(),
-      packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
-    },
+    browserData: browserData,
     instrumentDetails: {
       type: 'card/plain',
       card: {
@@ -73,19 +40,7 @@ const cardPostRequest = async (
         ? { saveInstrument: true }
         : {}),
     },
-    shopper: {
-      email: userData.email,
-      firstName: userData.firstName,
-      gender: null,
-      lastName: userData.lastName,
-      phoneNumber: userData.phone,
-      uniqueReference: userData.uniqueId,
-      dateOfBirth: userData.dob,
-      panNumber: userData.pan,
-      deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
-        ? null
-        : deliveryAddress,
-    },
+    shopper: shopperData,
     deviceDetails: deviceDetails,
   };
   callUIAnalytics(AnalyticsEvents.PAYMENT_CATEGORY_SELECTED,"Card Post Request",``)

package/src/postRequest/emiPostRequest.ts

@@ -1,8 +1,6 @@
-import Constants from 'expo-constants';
 import api from '../serviceRequest'
-import { userDataHandler } from '../sharedContext/userdataHandler';
-import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
-import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import type { PaymentExecutedPostResponse } from '../interface';
+import { getBrowserData, getDeviceDetails, getShopperDetails } from '../utils/listAndObjectUtils';
 import { AnalyticsEvents, APIStatus } from '../interface';
 import callUIAnalytics from './callUIAnalytics';
 
@@ -27,8 +25,9 @@ const emiPostRequest = async (
     duration
   } : EmiPostPayload
 ) : Promise<PaymentExecutedPostResponse> => {
-  const { userData } = userDataHandler;
   const deviceDetails = getDeviceDetails()
+  const browserData = getBrowserData()
+  const shopperData = getShopperDetails()
   const formatExpiry = (input: string) => {
     const [month, year] = input.split('/');
     return `20${year}-${month}`;
@@ -59,56 +58,11 @@ const emiPostRequest = async (
         },
       };
 
-  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
-    return Object.values(address).every(
-      (value) => value === null || value === undefined || value === ''
-    );
-  };
-
-  const deliveryAddress = {
-    address1: userData.address1,
-    address2: userData.address2,
-    city: userData.city,
-    state: userData.state,
-    countryCode: userData.country,
-    postalCode: userData.pincode,
-    labelType: userData.labelType,
-    labelName: userData.labelName,
-  };
   const requestBody = {
-    browserData: {
-      screenHeight:
-        Constants.platform?.ios?.screenHeight ||
-        Constants.platform?.android?.screenHeight ||
-        0,
-      screenWidth:
-        Constants.platform?.ios?.screenWidth ||
-        Constants.platform?.android?.screenWidth ||
-        0,
-      acceptHeader: 'application/json',
-      userAgentHeader: 'Expo App',
-      browserLanguage: 'en_US',
-      ipAddress: 'null',
-      colorDepth: 24,
-      javaEnabled: true,
-      timeZoneOffSet: new Date().getTimezoneOffset(),
-      packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
-    },
+    browserData: browserData,
     instrumentDetails: instrumentDetails,
     ...(offerCode?.trim() !== '' && { offers: [offerCode] }),
-    shopper: {
-      email: userData.email,
-      firstName: userData.firstName,
-      gender: null,
-      lastName: userData.lastName,
-      phoneNumber: userData.phone,
-      uniqueReference: userData.uniqueId,
-      dateOfBirth: userData.dob,
-      panNumber: userData.pan,
-      deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
-        ? null
-        : deliveryAddress,
-    },
+    shopper: shopperData,
     deviceDetails: deviceDetails,
   };
 

package/src/postRequest/methodsPostRequest.tsx

@@ -1,9 +1,7 @@
-import Constants from 'expo-constants';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import api from '../serviceRequest'
-import { userDataHandler } from '../sharedContext/userdataHandler';
-import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
-import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import type { PaymentExecutedPostResponse } from '../interface';
+import { getBrowserData, getDeviceDetails, getShopperDetails } from '../utils/listAndObjectUtils';
 import { AnalyticsEvents, APIStatus } from '../interface';
 import callUIAnalytics from './callUIAnalytics';
 
@@ -11,64 +9,20 @@ const methodsPostRequest = async (
   instrumentDetails: string,
   paymentMethod: string
 ) : Promise<PaymentExecutedPostResponse> => {
-  const { userData } = userDataHandler;
   const { checkoutDetails } = checkoutDetailsHandler;
   const deviceDetails = getDeviceDetails()
-  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
-    return Object.values(address).every(
-      (value) => value === null || value === undefined || value === ''
-    );
-  };
-
-  const deliveryAddress = {
-    address1: userData.address1,
-    address2: userData.address2,
-    city: userData.city,
-    state: userData.state,
-    countryCode: userData.country,
-    postalCode: userData.pincode,
-    labelType: userData.labelType,
-    labelName: userData.labelName,
-  };
+  const browserData = getBrowserData()
+  const shopperData = getShopperDetails()
 
   const requestBody = {
-    browserData: {
-      screenHeight:
-        Constants.platform?.ios?.screenHeight ||
-        Constants.platform?.android?.screenHeight ||
-        0,
-      screenWidth:
-        Constants.platform?.ios?.screenWidth ||
-        Constants.platform?.android?.screenWidth ||
-        0,
-      acceptHeader: 'application/json',
-      userAgentHeader: 'Expo App',
-      browserLanguage: 'en_US',
-      ipAddress: 'null',
-      colorDepth: 24,
-      javaEnabled: true,
-      timeZoneOffSet: new Date().getTimezoneOffset(),
-      packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
-    },
+    browserData: browserData,
     instrumentDetails: {
       type: instrumentDetails,
       [paymentMethod]: {
         token: checkoutDetails.token,
       },
     },
-    shopper: {
-      email: userData.email,
-      firstName: userData.firstName,
-      gender: null,
-      lastName: userData.lastName,
-      phoneNumber: userData.phone,
-      uniqueReference: userData.uniqueId,
-      dateOfBirth: userData.dob,
-      panNumber: userData.pan,
-      deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
-        ? null
-        : deliveryAddress,
-    },
+    shopper: shopperData,
     deviceDetails: deviceDetails
   };
 

package/src/postRequest/upiPostRequest.tsx

@@ -1,64 +1,18 @@
-import Constants from 'expo-constants';
 import api from '../serviceRequest';
-import { userDataHandler } from '../sharedContext/userdataHandler';
-import type { DeliveryAddress, InstrumentDetails, PaymentExecutedPostResponse } from '../interface';
-import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import type { InstrumentDetails, PaymentExecutedPostResponse } from '../interface';
+import { getBrowserData, getDeviceDetails, getShopperDetails } from '../utils/listAndObjectUtils';
 import { AnalyticsEvents, APIStatus } from '../interface';
 import callUIAnalytics from './callUIAnalytics';
 
 const upiPostRequest = async (instrumentDetails: InstrumentDetails) : Promise<PaymentExecutedPostResponse> => {
-  const { userData } = userDataHandler;
   const deviceDetails = getDeviceDetails()
+  const browserData = getBrowserData()
+  const shopperData = getShopperDetails()
 
-  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
-    return Object.values(address).every(
-      (value) => value === null || value === undefined || value === ''
-    );
-  };
-
-  const deliveryAddress = {
-    address1: userData.address1,
-    address2: userData.address2,
-    city: userData.city,
-    state: userData.state,
-    countryCode: userData.country,
-    postalCode: userData.pincode,
-    labelType: userData.labelType,
-    labelName: userData.labelName,
-  };
   const requestBody = {
-    browserData: {
-      screenHeight:
-        Constants.platform?.ios?.screenHeight ||
-        Constants.platform?.android?.screenHeight ||
-        0,
-      screenWidth:
-        Constants.platform?.ios?.screenWidth ||
-        Constants.platform?.android?.screenWidth ||
-        0,
-      acceptHeader: 'application/json',
-      userAgentHeader: 'Expo App',
-      browserLanguage: 'en_US',
-      ipAddress: 'null',
-      colorDepth: 24,
-      javaEnabled: true,
-      timeZoneOffSet: new Date().getTimezoneOffset(),
-      packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
-    },
+    browserData: browserData,
     instrumentDetails,
-    shopper: {
-      email: userData.email,
-      firstName: userData.firstName,
-      gender: null,
-      lastName: userData.lastName,
-      phoneNumber: userData.phone,
-      uniqueReference: userData.uniqueId,
-      dateOfBirth: userData.dob,
-      panNumber: userData.pan,
-      deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
-        ? null
-        : deliveryAddress,
-    },
+    shopper: shopperData,
     deviceDetails: deviceDetails
   };
 

package/src/screens/mainScreen.tsx

@@ -80,8 +80,12 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   const [recommendedInstrumentsArray, setRecommendedInstruments] = useState<PaymentClass[]>([]);
   const [savedCardArray, setSavedCardArray] = useState<PaymentClass[]>([]);
   const [savedUpiArray, setSavedUpiArray] = useState<PaymentClass[]>([]);
+  const [qrImageUrl, setQrImageUrl] = useState<string | null> (null)
+  const qrTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [timerValue, setTimerValue] = useState(5 * 60);
 
   let isFirstTimeLoadRef = useRef(true);
+  let qrIsExpired = useRef(false)
 
   const handlePaymentIntent = async (selectedIntent: string) => {
     setLoadingState(true);
@@ -153,6 +157,38 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     });
   };
 
+  const handleUpiQRPayment = async() => {
+    const requestPayload: InstrumentDetails ={
+      type: 'upi/qr',
+    }
+    setLoadingState(true);
+    const response = await upiPostRequest(requestPayload);
+    handlePaymentResponse({
+      response: response,
+      checkoutDetailsErrorMessage: checkoutDetailsHandler.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),
+      onOpenQr: (id:string)=> {
+        setQrImageUrl(id)
+        startQRTimer()
+        qrIsExpired.current = false
+      },
+      onOpenUpiIntent : (url) => {
+        urlToBase64(url);
+      },
+      setLoading: setLoadingState
+    });
+  }
+
   useEffect(() => {
     if (isFirstTimeLoadRef.current) {
       isFirstTimeLoadRef.current = false;
@@ -202,6 +238,33 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     }
   }, [paymentUrl, paymentHtml]);
 
+  const startQRTimer = () => {
+    qrTimerRef.current = setInterval(() => {
+      setTimerValue((prevTime) => {
+        if (prevTime <= 1) {
+          clearInterval(qrTimerRef.current!);
+          qrIsExpired.current = true
+          return 0;
+        }
+
+        // ⏱️ Decrement timer
+        const newTime = prevTime - 1;
+
+        // 🌐 Call API every 4 seconds (or any interval you want)
+        if (newTime % 4 === 0) {
+          callFetchStatusApi();
+        }
+
+        return newTime;
+      });
+    }, 1000);
+  }
+
+  const stopQRTimer= () => {
+    if(qrTimerRef.current) {
+      clearInterval(qrTimerRef.current!);
+    }
+  }
   const openUPIIntent = async (url: string) => {
     try {
       await Linking.openURL(url); // Open the UPI app
@@ -304,6 +367,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 const methodFlags = {
                   isUPIIntentVisible: false,
                   isUPICollectVisible: false,
+                  isUPIQRVisible : false,
                   isCardsVisible: false,
                   isWalletVisible: false,
                   isNetbankingVisible: false,
@@ -317,6 +381,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                       methodFlags.isUPIIntentVisible = true;
                     } else if (method.brand === 'UpiCollect') {
                       methodFlags.isUPICollectVisible = true;
+                    } else if(method.brand === 'UpiQr') {
+                      methodFlags.isUPIQRVisible = true
                     }
                   } else if (method.type === 'Card') {
                     methodFlags.isCardsVisible = true;
@@ -471,6 +537,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     isDOBEditable: isFieldEditable('SHOPPER_DOB'),
                     isUpiIntentMethodEnabled : methodFlags.isUPIIntentVisible,
                     isUpiCollectMethodEnabled : methodFlags.isUPICollectVisible,
+                    isUpiQRMethodEnabled : methodFlags.isUPIQRVisible,
                     isCardMethodEnabled : methodFlags.isCardsVisible,
                     isWalletMethodEnabled : methodFlags.isWalletVisible,
                     isNetBankingMethodEnabled : methodFlags.isNetbankingVisible,
@@ -666,6 +733,11 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                 }
                 savedUpiArray={savedUpiArray}
                 onClickRadio={handleSavedUpiSectionClick}
+                qrImage={qrImageUrl}
+                handleQRPayment={handleUpiQRPayment}
+                qrIsExpired = {qrIsExpired.current}
+                timeRemaining={timerValue}
+                stopTimer = {stopQRTimer}
               />
 
               {savedCardArray.length != 0 && (