boxpay-checkout-reactnative-sdk 1.0.5 → 1.0.6-beta1

package/lib/typescript/src/sharedContext/checkoutDetailsHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkoutDetailsHandler.d.ts","sourceRoot":"","sources":["../../../../src/sharedContext/checkoutDetailsHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,sBAAsB,GAAG;IACnC,eAAe,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF,eAAO,IAAI,sBAAsB,EAAE,sBA0ClC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,SAAS,sBAAsB,SAExE,CAAC;AAEF,eAAO,MAAM,kCAAkC,YA4C9C,CAAC"}
+{"version":3,"file":"checkoutDetailsHandler.d.ts","sourceRoot":"","sources":["../../../../src/sharedContext/checkoutDetailsHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,sBAAsB,GAAG;IACnC,eAAe,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF,eAAO,IAAI,sBAAsB,EAAE,sBA4ClC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,SAAS,sBAAsB,SAExE,CAAC;AAEF,eAAO,MAAM,kCAAkC,YA8C9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxpay-checkout-reactnative-sdk",
-  "version": "1.0.5",
+  "version": "1.0.6-beta1",
   "description": "Boxpay Payment Gateway",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -57,6 +57,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@react-navigation/native": "^7.1.17",
+    "@react-navigation/native-stack": "^7.3.26",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
@@ -86,8 +88,6 @@
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-render-html" : "^6.3.4",
 
-    "@react-navigation/native": "^7.1.17",
-    "@react-navigation/native-stack": "^7.3.26",
     "lottie-react-native": "^7.3.4",
     "react-native-modal": "^14.0.0-rc.1",
     "react-native-svg": ">=15.0.0"
@@ -145,7 +145,7 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "1.0.1-beta21"
+    "version": "1.0.6-beta1"
   },
   "dependencies": {
     "axios": "^1.11.0",

package/src/components/checkboxContainer.tsx

@@ -0,0 +1,66 @@
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+
+interface CheckBoxContainerProps {
+    text : string,
+    isCheckBoxSelected : boolean,
+    onCheckBoxClicked : () => void
+}
+
+const CheckBoxContainer = ({text, isCheckBoxSelected, onCheckBoxClicked} : CheckBoxContainerProps) =>{
+    const {checkoutDetails} = checkoutDetailsHandler
+    return(
+        <View
+        style={styles.checkBoxContainer}>
+          <TouchableOpacity
+            onPress={() => onCheckBoxClicked()}
+          >
+            <View style={[
+              styles.checkboxBox,
+              { borderColor: checkoutDetails.buttonColor },
+              isCheckBoxSelected && { backgroundColor: checkoutDetails.buttonColor }
+            ]}>
+              {isCheckBoxSelected && (
+                <Text style={styles.checkmark}>✓</Text>
+              )}
+            </View>
+          </TouchableOpacity>
+          <Text
+            style={[styles.checkBoxText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
+          >
+            {text}
+          </Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    checkBoxContainer : {
+      flexDirection: 'row',
+      marginTop: 10,
+      alignItems: 'center'
+  },
+  checkBoxText : {
+      color: '#2D2B32',
+      fontSize: 14,
+      marginLeft: 6,
+  },
+  checkboxBox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 8,
+  },
+  checkmark: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: 'bold',
+    lineHeight: 16,
+  }
+  });
+
+
+export default CheckBoxContainer

package/src/components/imageLoader.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import { SvgXml } from 'react-native-svg';
 import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
 import { Image, type ImageSourcePropType , View} from "react-native";
+import callUIAnalytics from "../postRequest/callUIAnalytics";
+import { AnalyticsEvents } from "../interface";
 
 interface ImageLoaderProps {
     image : string,
@@ -50,7 +52,8 @@ const ImageLoader = ({image , errorImage} : ImageLoaderProps) => {
             }
             setLoad(false);
           })
-          .catch(() => {
+          .catch((error) => {
+            callUIAnalytics(AnalyticsEvents.SDK_CRASH, "Image loader componenet", `${error}`)
             setImageError(true);
             setLoad(false);
           });

package/src/components/savedCardComponent.tsx

@@ -4,10 +4,12 @@ import { RadioButton } from 'react-native-paper';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 import ImageLoader from './imageLoader';
 import type { PaymentClass } from '../interface';
+import { useState } from 'react';
+import CheckBoxContainer from './checkboxContainer';
 
 interface SavedCardComponentViewProps {
   savedCards: PaymentClass[];
-  onProceedForward: (instrumentValue: string) => void;
+  onProceedForward: (instrumentValue: string, isSICheckBoxClicked : boolean) => void;
   errorImage: ImageSourcePropType;
   onClickAddCard: () => void;
   onClickRadio: (selectedInstrumentValue: string) => void;
@@ -106,10 +108,10 @@ interface SavedCardRowProps {
   cardNumber: string;
   image: string;
   errorImage: ImageSourcePropType;
-  isSelected: boolean | null;
+  isSelected: boolean;
   instrumentTypeValue: string;
   onPress: (id: string) => void;
-  onProceedForward: (instrumentValue: string) => void;
+  onProceedForward: (instrumentValue: string, isSICheckBoxClicked : boolean) => void;
   brandColor: string;
   currencySymbol: string;
   amount: string;
@@ -127,9 +129,10 @@ const SavedCardRow = ({
   onProceedForward,
   brandColor,
   currencySymbol,
-  amount,
+  amount
 }: SavedCardRowProps) => {
   const { checkoutDetails } = checkoutDetailsHandler;
+  const [isSICheckBoxClicked, setIsSICheckBoxClicked] = useState(false)
   return (
     <View
       style={{
@@ -173,16 +176,28 @@ const SavedCardRow = ({
         <RadioButton
           value={id}
           status={isSelected ? 'checked' : 'unchecked'}
-          onPress={() => onPress(id)}
+          onPress={() => {
+            setIsSICheckBoxClicked(false)
+            onPress(id)
+          }}
           color={brandColor}
           uncheckedColor={'#01010273'}
         />
       </View>
+      {(checkoutDetails.isSICheckboxVisible && isSelected) && (
+        <CheckBoxContainer
+        text = {"Set up Standing Instructions (SI) for this payment."}
+        isCheckBoxSelected = {isSICheckBoxClicked}
+        onCheckBoxClicked = {() => {
+          setIsSICheckBoxClicked(!isSICheckBoxClicked)
+        }}
+        />
+      )}
       {isSelected && (
         <Pressable
           style={[styles.buttonContainer, { backgroundColor: brandColor }]}
           onPress={() => {
-            onProceedForward(instrumentTypeValue);
+            onProceedForward(instrumentTypeValue, isSICheckBoxClicked);
           }}
         >
           <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
@@ -227,5 +242,30 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     marginTop: 4,
     alignSelf: 'flex-start',
-  }
+  },
+  checkBoxContainer : {
+    flexDirection: 'row',
+    marginTop: 10,
+    alignItems: 'center'
+},
+checkBoxText : {
+    color: '#2D2B32',
+    fontSize: 14,
+    marginLeft: 6,
+},
+checkboxBox: {
+  width: 20,
+  height: 20,
+  borderWidth: 2,
+  borderRadius: 3,
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: 8,
+},
+checkmark: {
+  color: '#fff',
+  fontSize: 13,
+  fontWeight: 'bold',
+  lineHeight: 16,
+}
 });

package/src/index.tsx

@@ -1,6 +1,6 @@
 import type { BoxpayCheckoutProps} from './interface';
+import { View } from 'react-native';
 import styles from './styles/indexStyles';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import CheckoutContainer from './navigation';
 
 const BoxpayCheckout = ({
@@ -11,7 +11,7 @@ const BoxpayCheckout = ({
   uiConfiguration = null
 }: BoxpayCheckoutProps) => {
   return (
-    <SafeAreaView style={styles.screenView}>
+    <View style={styles.screenView}>
       <CheckoutContainer
       token={token}
       configurationOptions={configurationOptions}
@@ -19,7 +19,7 @@ const BoxpayCheckout = ({
       shopperToken={shopperToken}
       uiConfiguration={uiConfiguration}
       />
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/interface.ts

@@ -7,6 +7,7 @@ export enum ConfigurationOptions {
   ShowBoxpaySuccessScreen = 'SHOW_BOXPAY_SUCCESS_SCREEN',
   EnableSandboxEnv = 'ENABLE_SANDBOX_ENV',
   ShowUPIQROnLoad = 'SHOW_UPI_QR_ON_LOAD',
+  ShowSICheckbox = 'SHOW_SI_CHECKBOX'
 }
 
 export enum UIConfigurationOptions {
@@ -75,7 +76,9 @@ export interface CheckoutDetails {
   isUPIOtmIntentMethodEnabled : boolean,
   isUPIOtmCollectMethodEnabled : boolean,
   isUPIOtmQRMethodEnabled : boolean,
-  isOrderItemDetailsVisible : boolean
+  isOrderItemDetailsVisible : boolean,
+  isSICheckboxVisible : boolean,
+  isSubscriptionCheckout : boolean
 }
 
 interface AnalyticsResponse {
@@ -500,6 +503,7 @@ export interface SessionDetails {
       dateOfBirth : string | null,
       panNumber : string | null
     },
+    subscriptionDetails : SubscriptionDetails | null,
     order : OrderDetails | null
   },
   merchantDetails : {
@@ -528,6 +532,11 @@ interface OrderDetails {
   items : OrderItem[] | null
 }
 
+interface SubscriptionDetails {
+  type : string,
+  maxAmountLocaleFull : string
+}
+
 export enum AnalyticsEvents {
   CHECKOUT_LOADED = "CHECKOUT_LOADED",
   ADDRESS_UPDATED = "ADDRESS_UPDATED",

package/src/postRequest/cardPostRequest.ts

@@ -11,7 +11,8 @@ const cardPostRequest = async (
   cvv: string,
   holderName: string,
   cardNickName: string,
-  isCheckboxClicked: boolean
+  isCheckboxClicked: boolean,
+  isSICheckBoxClicked : boolean,
 ) : Promise<PaymentExecutedPostResponse> => {
   const { checkoutDetails } = checkoutDetailsHandler;
   const deviceDetails = getDeviceDetails()
@@ -36,6 +37,9 @@ const cardPostRequest = async (
         : {}),
     },
     shopper: shopperData,
+    ...(checkoutDetails.isSubscriptionCheckout
+      ? { oneTimePayment: checkoutDetails.isSICheckboxVisible ? isSICheckBoxClicked : true }
+      : {}),
     deviceDetails: deviceDetails,
   };
   callUIAnalytics(AnalyticsEvents.PAYMENT_CATEGORY_SELECTED,"Card Post Request",``)

package/src/postRequest/upiPostRequest.tsx

@@ -3,15 +3,20 @@ import type { InstrumentDetails, PaymentExecutedPostResponse } from '../interfac
 import { getBrowserData, getDeviceDetails, getShopperDetails } from '../utility';
 import { AnalyticsEvents, APIStatus } from '../interface';
 import callUIAnalytics from './callUIAnalytics';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
 
-const upiPostRequest = async (instrumentDetails: InstrumentDetails) : Promise<PaymentExecutedPostResponse> => {
+const upiPostRequest = async (instrumentDetails: InstrumentDetails, isSICheckBoxClicked : boolean) : Promise<PaymentExecutedPostResponse> => {
   const deviceDetails = getDeviceDetails()
   const browserData = getBrowserData()
   const shopperData = getShopperDetails()
+  const {checkoutDetails} = checkoutDetailsHandler
 
   const requestBody = {
     browserData: browserData,
     instrumentDetails,
+    ...((checkoutDetails.isSubscriptionCheckout && instrumentDetails.type === 'card/token')
+      ? { oneTimePayment: checkoutDetails.isSICheckboxVisible ? isSICheckBoxClicked : true }
+      : {}),
     shopper: shopperData,
     deviceDetails: deviceDetails
   };

package/src/screens/cardScreen.tsx

@@ -31,6 +31,7 @@ import Toast from 'react-native-toast-message'
 import { handleFetchStatusResponseHandler, handlePaymentResponse } from '../sharedContext/handlePaymentResponseHandler';
 import type { CheckoutStackParamList } from '../navigation';
 import { setUserDataHandlerToDefault } from '../sharedContext/userdataHandler';
+import CheckBoxContainer from '../components/checkboxContainer';
 
 type CardScreenRouteProp = RouteProp<CheckoutStackParamList, 'CardScreen'>;
 
@@ -108,6 +109,8 @@ const CardScreen = ({ route, navigation }: Props) => {
   const [showKnowMoreDialog, setKnowMoreDialog] = useState(false);
   const [isSavedCardCheckBoxClicked, setIsSavedCardCheckBoxClicked] =
     useState(false);
+  
+  const [isSICheckBoxClicked, setIsSICheckBoxClicked] = useState(false)
   const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
   const [paymentHtml, setPaymentHtml] = useState<string | null>(null);
   const [showWebView, setShowWebView] = useState(false);
@@ -504,7 +507,8 @@ const CardScreen = ({ route, navigation }: Props) => {
         cardCvvText || '',
         cardHolderNameText || '',
         cardNickNameText || '',
-        isSavedCardCheckBoxClicked
+        isSavedCardCheckBoxClicked,
+        isSICheckBoxClicked
       );
     }
     handlePaymentResponse({
@@ -982,18 +986,18 @@ const CardScreen = ({ route, navigation }: Props) => {
               style={styles.checkBoxContainer}
             >
               <TouchableOpacity
-  onPress={() => setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked)}
->
-  <View style={[
-    styles.checkboxBox,
-    { borderColor: checkoutDetails.buttonColor },
-    isSavedCardCheckBoxClicked && { backgroundColor: checkoutDetails.buttonColor }
-  ]}>
-    {isSavedCardCheckBoxClicked && (
-      <Text style={styles.checkmark}>✓</Text>
-    )}
-  </View>
-</TouchableOpacity>
+                onPress={() => setIsSavedCardCheckBoxClicked(!isSavedCardCheckBoxClicked)}
+              >
+                <View style={[
+                  styles.checkboxBox,
+                  { borderColor: checkoutDetails.buttonColor },
+                  isSavedCardCheckBoxClicked && { backgroundColor: checkoutDetails.buttonColor }
+                ]}>
+                  {isSavedCardCheckBoxClicked && (
+                    <Text style={styles.checkmark}>✓</Text>
+                  )}
+                </View>
+              </TouchableOpacity>
               <Text
                 style={[styles.checkBoxText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
               >
@@ -1014,9 +1018,19 @@ const CardScreen = ({ route, navigation }: Props) => {
                   Know more
                 </Text>
               </Pressable>
-            </View>
+              </View>
             </>
           )}
+
+          {checkoutDetails.isSICheckboxVisible && (
+             <CheckBoxContainer
+             text = {"Set up Standing Instructions (SI) for this payment."}
+             isCheckBoxSelected = {isSICheckBoxClicked}
+             onCheckBoxClicked = {() => {
+              setIsSICheckBoxClicked(!isSICheckBoxClicked)
+             }}
+             />
+          )}
           <View
             style={styles.pressableContainer}
           >

package/src/screens/mainScreen.tsx

@@ -104,7 +104,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
     const response = await upiPostRequest({
       type: checkoutDetailsHandler.checkoutDetails.isUPIOtmIntentMethodEnabled ? "upiotm/intent" : 'upi/intent',
       ...(selectedIntent && { upiAppDetails: { upiApp: selectedIntent } }), // Conditionally add upiAppDetails only if upiIntent is present
-    });
+    }, false);
     handlePaymentResponse({
       response: response,
       checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,
@@ -130,7 +130,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
   const handleUpiCollectPayment = async (
     upiId: string,
     instrumentRef: string,
-    type: string
+    type: string,
+    isSICheckBoxClicked : boolean
   ) => {
     const requestPayload: InstrumentDetails =
       type === 'Card'
@@ -145,7 +146,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
               : { shopperVpa: upiId },
           };
     setLoadingState(true);
-    const response = await upiPostRequest(requestPayload);
+    const response = await upiPostRequest(requestPayload, isSICheckBoxClicked);
     handlePaymentResponse({
       response: response,
       upiId: upiId,
@@ -582,7 +583,9 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                     isUPIOtmCollectMethodEnabled : methodFlags.isUPIOtmCollectVisible,
                     isUPIOtmIntentMethodEnabled : methodFlags.isUPIIntentVisible,
                     isUPIOtmQRMethodEnabled : methodFlags.isUPIOtmQRVisible,
-                    isOrderItemDetailsVisible : isFieldEnabled('ORDER_ITEM_DETAILS')
+                    isOrderItemDetailsVisible : isFieldEnabled('ORDER_ITEM_DETAILS'),
+                    isSICheckboxVisible : configurationOptions?.SHOW_SI_CHECKBOX ? true : false,
+                    isSubscriptionCheckout : paymentDetails.subscriptionDetails != null ? true : false
                   },
                 });
                 setPaymentHandler({
@@ -825,7 +828,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                         handleUpiCollectPayment(
                           displayValue,
                           instrumentValue,
-                          type
+                          type,
+                          false
                         )
                       }
                       errorImage={require('../../assets/images/ic_upi.png')}
@@ -843,7 +847,7 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                   handlePaymentIntent(selectedIntent)
                 }
                 handleCollectPayment={(displayValue : string, instrumentValue : string, type : string) =>
-                  handleUpiCollectPayment(displayValue, instrumentValue, type)
+                  handleUpiCollectPayment(displayValue, instrumentValue, type, false)
                 }
                 savedUpiArray={savedUpiArray}
                 onClickRadio={handleSavedUpiSectionClick}
@@ -870,8 +874,8 @@ const MainScreen = ({route, navigation} : MainScreenProps) => {
                   >
                     <SavedCardComponentView
                       savedCards={savedCardArray}
-                      onProceedForward={(instrumentValue : string) => {
-                        handleUpiCollectPayment('', instrumentValue, 'Card');
+                      onProceedForward={(instrumentValue : string, isSICheckBoxClicked : boolean) => {
+                        handleUpiCollectPayment('', instrumentValue, 'Card', isSICheckBoxClicked);
                       }}
                       errorImage={require('../../assets/images/ic_card.png')}
                       onClickAddCard={() => navigation.navigate("CardScreen", {})}

package/src/screens/upiScreen.tsx

@@ -94,7 +94,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
       type: isUPIOtmQRVisible ? "upiotm/qr" : 'upi/qr',
     }
     setLoading(true);
-    const response = await upiPostRequest(requestPayload);
+    const response = await upiPostRequest(requestPayload, false);
     handlePaymentResponse({
       response: response,
       checkoutDetailsErrorMessage: checkoutDetailsHandler.checkoutDetails.errorMessage,

package/src/sdk-version.json

@@ -1 +1 @@
-{ "version": "1.0.5" }
+{ "version": "1.0.6-beta1" }

package/src/sharedContext/checkoutDetailsHandler.ts

@@ -44,7 +44,9 @@ export let checkoutDetailsHandler: CheckoutDetailsHandler = {
     isUPIOtmIntentMethodEnabled : false,
     isUPIOtmCollectMethodEnabled : false,
     isUPIOtmQRMethodEnabled : false,
-    isOrderItemDetailsVisible : true
+    isOrderItemDetailsVisible : true,
+    isSICheckboxVisible : false,
+    isSubscriptionCheckout : false
   },
 };
 
@@ -93,7 +95,9 @@ export const setCheckOutDetailsHandlerToDefault = () => {
       isUPIOtmIntentMethodEnabled: false,
       isUPIOtmCollectMethodEnabled: false,
       isUPIOtmQRMethodEnabled: false,
-      isOrderItemDetailsVisible : true
+      isOrderItemDetailsVisible : true,
+      isSICheckboxVisible : false,
+      isSubscriptionCheckout : false
     },
   };
 };