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

package/src/components/sessionExpire.tsx

@@ -8,6 +8,7 @@ interface SessionExpireProps {
   onClick: () => void;
 }
 
+
 const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
   const { checkoutDetails } = checkoutDetailsHandler;
   return (
@@ -20,13 +21,13 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
             loop={false}
             style={{ width: 90, height: 90, alignSelf: 'center' }}
           />
-          <Text style={styles.successfulHeading}>
+          <Text style={[styles.successfulHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
             Payment session has expired.
           </Text>
           <Text
             style={{
               fontSize: 14,
-              fontFamily: 'Poppins-Regular',
+              fontFamily: checkoutDetails.fontFamily.regular,
               color: '#000000',
               textAlign: 'center',
               alignSelf: 'center',
@@ -41,13 +42,13 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
           <Pressable
             style={[
               styles.buttonContainer,
-              { backgroundColor: checkoutDetails.brandColor },
+              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
             ]}
             onPress={() => {
               onClick()
             }}
           >
-            <Text style={styles.buttonText}>Go back to Home</Text>
+            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Go back to Home</Text>
           </Pressable>
         </View>
       </Modal>
@@ -72,12 +73,10 @@ const styles = StyleSheet.create({
     color: '#DB7C1D',
     fontSize: 22,
     alignSelf: 'center',
-    paddingTop: 8,
-    fontFamily: 'Poppins-SemiBold',
+    paddingTop: 8
   },
   buttonContainer: {
     flexDirection: 'row',
-    borderRadius: 8,
     justifyContent: 'center',
     marginTop: 12,
     backgroundColor: '#1CA672',
@@ -86,6 +85,5 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: 16,
     paddingVertical: 12,
-    fontFamily: 'Poppins-SemiBold',
   },
 });

package/src/index.tsx

@@ -1,23 +1,25 @@
 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 = ({
   token,
-  configurationOptions,
+  configurationOptions = null,
   onPaymentResult,
   shopperToken = null,
+  uiConfiguration = null
 }: BoxpayCheckoutProps) => {
   return (
-    <SafeAreaView style={styles.screenView}>
+    <View style={styles.screenView}>
       <CheckoutContainer
       token={token}
       configurationOptions={configurationOptions}
       onPaymentResult={onPaymentResult}
       shopperToken={shopperToken}
+      uiConfiguration={uiConfiguration}
       />
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/interface.ts

@@ -7,11 +7,32 @@ 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 {
+  FontFamily = 'FONT_FAMILY',
+  CTABorderRadius = 'CTA_BORDER_RADIUS',
+}
+
+export interface FontConfiguration {
+  regular?: string;
+  medium?: string;
+  semiBold?: string;
+  bold?: string;
+  extraBold?: string
+}
+
+// 👇 Each key has its own strict type
+export interface UIConfiguration {
+  [UIConfigurationOptions.FontFamily]?: FontConfiguration;
+  [UIConfigurationOptions.CTABorderRadius]?: number;
 }
 
 export interface BoxpayCheckoutProps {
   token: string;
   configurationOptions?: Partial<Record<ConfigurationOptions, boolean>> | null;
+  uiConfiguration?: UIConfiguration | null;
   onPaymentResult: (result: PaymentResultObject) => void;
   shopperToken?: string | null;
 }
@@ -21,7 +42,12 @@ export interface CheckoutDetails {
   currencyCode : string,
   amount: string;
   token: string;
-  brandColor: string;
+  fontFamily : FontConfiguration,
+  ctaBorderRadius : number,
+  buttonColor: string;
+  buttonTextColor : string;
+  headerColor : string;
+  headerTextColor : string;
   env: string;
   itemsLength: number;
   errorMessage: string;
@@ -46,7 +72,13 @@ export interface CheckoutDetails {
   isWalletMethodEnabled : boolean,
   isNetBankingMethodEnabled : boolean,
   isEmiMethodEnabled : boolean,
-  isBnplMethodEnabled : boolean
+  isBnplMethodEnabled : boolean,
+  isUPIOtmIntentMethodEnabled : boolean,
+  isUPIOtmCollectMethodEnabled : boolean,
+  isUPIOtmQRMethodEnabled : boolean,
+  isOrderItemDetailsVisible : boolean,
+  isSICheckboxVisible : boolean,
+  isSubscriptionCheckout : boolean
 }
 
 interface AnalyticsResponse {
@@ -102,14 +134,16 @@ export interface UserData {
   firstName: string | null;
   lastName: string | null;
   email: string | null;
-  phone: string | null;
+  completePhoneNumber: string | null;
+  phoneCode : string | null;
   dob: string | null;
   pan: string | null;
   address1: string | null;
   address2: string | null;
   city: string | null;
   state: string | null;
-  country: string | null;
+  countryCode: string | null;
+  countryName : string | null;
   pincode: string | null;
   labelType: string | null;
   labelName: string | null;
@@ -128,7 +162,7 @@ export interface DeliveryAddress {
 }
 
 interface UPIIntentPayload {
-  type: 'upi/intent';
+  type: 'upi/intent' | 'upiotm/intent';
   upiAppDetails?: {
     upiApp: string; // Or a more specific type for the UPI app identifier
   };
@@ -142,11 +176,11 @@ interface CardTokenPayload {
 }
 
 interface UPIQRPayload {
-  type : 'upi/qr'
+  type : 'upi/qr' | 'upiotm/qr'
 }
 
 interface UPICollectPayload {
-  type: 'upi/collect';
+  type: 'upi/collect' | 'upiotm/collect';
   upi?: {
     instrumentRef?: string;
     shopperVpa?: string;
@@ -286,7 +320,8 @@ export interface SurChargeResponse {
     surchargeDetails : {
       title : string,
       merchantId : string,
-      surchargeCode : string
+      surchargeCode : string,
+      applicableOn : string
     },
     calculatedSurchargeFee : number
   }[],
@@ -455,7 +490,8 @@ export interface SessionDetails {
     money : {
       amountLocaleFull : string,
       currencySymbol : string,
-      currencyCode : string
+      currencyCode : string,
+      amount : number
     },
     shopper : {
       firstName : string | null,
@@ -467,12 +503,15 @@ export interface SessionDetails {
       dateOfBirth : string | null,
       panNumber : string | null
     },
+    subscriptionDetails : SubscriptionDetails | null,
     order : OrderDetails | null
   },
   merchantDetails : {
     checkoutTheme : {
       primaryButtonColor : string,
-      buttonTextColor : string
+      buttonTextColor : string,
+      headerColor : string,
+      headerTextColor : string
     }
   },
   sessionExpiryTimestamp : string,
@@ -493,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",
@@ -520,4 +564,66 @@ export interface CardScreenParams {
 
 export interface UPITimerScreenParams {
   upiId : string
-}
+}
+
+export interface AddressScreenParams {
+  isNewAddress : boolean
+}
+
+export interface CountryDetails {
+  fullName: string;
+  isdCode: string;
+  phoneNumberLength: number[];
+  threeLetterCode: string;
+}
+
+
+export interface GetInstantOffersResponse {
+  title : string | null,
+  description: string | null,
+  terms : string | null,
+  type : string | null,
+  code : string | null,
+  discount : OfferDiscount | null,
+  enabled : boolean | null,
+  visibleOnCheckout : boolean | null,
+  criteria : Criteria | null
+}
+
+export interface OfferDiscount{
+  percentage : number | null,
+  amount : number | null,
+  type : string | null,
+  maxAmount : number | null
+}
+
+export interface Criteria{
+  startDate : string | null,
+  endDate : string | null,
+  minMoney : MinMoney | null,
+  applicableTo : Applicable | null
+}
+
+export interface MinMoney {
+  amount : number | null ;
+  currencyCode : string | null
+}
+
+export interface Applicable {
+  paymentMethods : OfferPaymentMethod[] | null
+}
+
+export interface OfferPaymentMethod {
+  type : string | null;
+  issuer : string | null
+}
+
+export type GetInstantDiscountResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: GetInstantOffersResponse[]
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};

package/src/navigation.tsx

@@ -9,19 +9,22 @@ import NetBankingScreen from "./screens/netBankingScreen";
 import SavedAddressScreen from "./screens/savedAddressScreen";
 import WalletScreen from "./screens/walletScreen";
 import MainScreen from "./screens/mainScreen";
-import type { BoxpayCheckoutProps, CardScreenParams, UPITimerScreenParams } from "./interface";
+import type { AddressScreenParams, BoxpayCheckoutProps, CardScreenParams, UPITimerScreenParams } from "./interface";
 import { NavigationIndependentTree } from "@react-navigation/native";
+import type { InstantOfferProps } from "./screens/instantOfferList";
+import InstantOfferScreen from "./screens/instantOfferList";
 
 export type CheckoutStackParamList = {
   MainScreen : BoxpayCheckoutProps,
   CardScreen: CardScreenParams;
   EmiScreen: {};
   UpiTimerScreen: UPITimerScreenParams;
-  AddressScreen : {},
+  AddressScreen : AddressScreenParams,
   BNPLScreen : {},
   SavedAddressScreen : {},
   NetBankingScreen : {},
   WalletScreen : {},
+  InstantOfferScreen : InstantOfferProps
 };
 
 const Stack = createNativeStackNavigator<CheckoutStackParamList>();
@@ -30,7 +33,8 @@ const CheckoutNavigator = ({
   token,
   configurationOptions = null,
   onPaymentResult,
-  shopperToken = null
+  shopperToken = null,
+  uiConfiguration = null
 }: BoxpayCheckoutProps) => {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
@@ -38,7 +42,8 @@ const CheckoutNavigator = ({
         token,
         configurationOptions,
         onPaymentResult,
-        shopperToken
+        shopperToken,
+        uiConfiguration
       }}/>
       <Stack.Screen name="CardScreen" component={CardScreen} />
       <Stack.Screen name="EmiScreen" component={EmiScreen} />
@@ -48,6 +53,7 @@ const CheckoutNavigator = ({
       <Stack.Screen name="NetBankingScreen" component={NetBankingScreen}/>
       <Stack.Screen name="WalletScreen" component={WalletScreen}/>
       <Stack.Screen name="SavedAddressScreen" component={SavedAddressScreen}/>
+      <Stack.Screen name="InstantOfferScreen" component={InstantOfferScreen}/>
     </Stack.Navigator>
   );
 };
@@ -56,7 +62,8 @@ const CheckoutContainer = ({
   token,
   configurationOptions = null,
   onPaymentResult,
-  shopperToken = null
+  shopperToken = null,
+  uiConfiguration = null
 }: BoxpayCheckoutProps)=> {
   return (
     <NavigationIndependentTree>
@@ -65,6 +72,7 @@ const CheckoutContainer = ({
       configurationOptions={configurationOptions}
       onPaymentResult={onPaymentResult}
       shopperToken={shopperToken}
+      uiConfiguration={uiConfiguration}
       />
     </NavigationIndependentTree>
   );

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/fetchInstantOffer.ts

@@ -0,0 +1,19 @@
+import { type GetInstantDiscountResponse, APIStatus} from "../interface";
+import api from "../serviceRequest";
+
+const fetchInstantOffer = async(amount : string) : Promise<GetInstantDiscountResponse> => {
+    
+    const requestBody = {
+        "minAmount" : amount,
+        "maxAmount" : amount
+    }
+    
+    try {
+        const response = await api.post("/offers/search", requestBody);
+        return {apiStatus : APIStatus.Success, data : response.data};
+    } catch (error) {
+        return { apiStatus : APIStatus.Failed , data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };
+    }
+}
+
+export default fetchInstantOffer;

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
   };