boxpay-checkout-reactnative-sdk 1.0.0-beta2

package/lib/typescript/src/styles/screens/upiTimerScreenStyle.d.ts

@@ -0,0 +1,100 @@
+declare const styles: {
+    screenView: {
+        flex: number;
+        backgroundColor: string;
+    };
+    cancelPaymentContainer: {
+        alignItems: "center";
+        paddingBottom: number;
+        paddingHorizontal: number;
+        position: "absolute";
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    mainContainer: {
+        flex: number;
+        justifyContent: "flex-start";
+        alignItems: "center";
+        paddingHorizontal: number;
+        marginTop: number;
+    };
+    headingText: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+        fontFamily: string;
+    };
+    descText: {
+        color: string;
+        fontSize: number;
+        paddingTop: number;
+        textAlign: "center";
+        lineHeight: number;
+        fontFamily: string;
+    };
+    container: {
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        marginTop: number;
+    };
+    imageStyle: {
+        height: number;
+        width: number;
+        marginRight: number;
+    };
+    text: {
+        color: string;
+        fontSize: number;
+        fontFamily: string;
+    };
+    expireInTextStyle: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+        marginTop: number;
+        fontFamily: string;
+    };
+    progressBarContainer: {
+        marginTop: number;
+        alignItems: "center";
+    };
+    infoContainer: {
+        flexDirection: "row";
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        marginTop: number;
+    };
+    infoImageStyle: {
+        height: number;
+        width: number;
+    };
+    infoText: {
+        color: string;
+        fontSize: number;
+        paddingStart: number;
+        lineHeight: number;
+        fontFamily: string;
+    };
+    thickDivider: {
+        flexDirection: "row";
+        height: number;
+        backgroundColor: string;
+        marginBottom: number;
+    };
+    cancelTextStyle: {
+        fontSize: number;
+        fontFamily: string;
+    };
+};
+export default styles;
+//# sourceMappingURL=upiTimerScreenStyle.d.ts.map

package/lib/typescript/src/styles/screens/upiTimerScreenStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upiTimerScreenStyle.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/upiTimerScreenStyle.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FV,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/lib/typescript/src/styles/screens/walletScreenStyles.d.ts

@@ -0,0 +1,102 @@
+declare const styles: {
+    screenView: {
+        flex: number;
+        backgroundColor: string;
+    };
+    loaderView: {
+        flex: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    lottieStyle: {
+        width: number;
+        height: number;
+    };
+    listContainer: {
+        marginHorizontal: number;
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        marginBottom: number;
+    };
+    emptyListContainer: {
+        marginHorizontal: number;
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        marginBottom: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    imageStyle: {
+        width: number;
+        height: number;
+    };
+    headingText: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+        marginTop: number;
+    };
+    subHeadingText: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+        marginTop: number;
+    };
+    bottomContainer: {
+        justifyContent: "center";
+        alignItems: "flex-end";
+        backgroundColor: string;
+        flexDirection: "row";
+    };
+    bottomText: {
+        fontSize: number;
+        color: string;
+        marginBottom: number;
+        fontFamily: string;
+    };
+    bottomImage: {
+        height: number;
+        width: number;
+    };
+    webViewContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        backgroundColor: string;
+    };
+    mainHeadingText: {
+        marginTop: number;
+        marginBottom: number;
+        marginHorizontal: number;
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+    };
+    textFieldStyle: {
+        marginTop: number;
+        marginHorizontal: number;
+        backgroundColor: string;
+        fontSize: number;
+        fontFamily: string;
+        color: string;
+        height: number;
+    };
+    textFieldLabel: {
+        fontSize: number;
+        fontFamily: string;
+    };
+    searchContainer: {
+        flexDirection: "row";
+        height: number;
+        backgroundColor: string;
+    };
+};
+export default styles;
+//# sourceMappingURL=walletScreenStyles.d.ts.map

package/lib/typescript/src/styles/screens/walletScreenStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletScreenStyles.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/walletScreenStyles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGV,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/lib/typescript/src/utils/listAndObjectUtils.d.ts

@@ -0,0 +1,10 @@
+import type { PaymentMethod, PaymentClass } from '../interface';
+export declare function transformAndFilterList(data: PaymentMethod[], filterType: string): PaymentClass[];
+export declare function getDeviceDetails(): {
+    browser: "ios" | "android" | "windows" | "macos" | "web";
+    platformVersion: string;
+    deviceType: string;
+    deviceName: string;
+    deviceBrandName: string;
+};
+//# sourceMappingURL=listAndObjectUtils.d.ts.map

package/lib/typescript/src/utils/listAndObjectUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listAndObjectUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/listAndObjectUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGhE,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,aAAa,EAAE,EACrB,UAAU,EAAE,MAAM,GACjB,YAAY,EAAE,CAehB;AAGD,wBAAgB,gBAAgB;;;;;;EAQ/B"}

package/lib/typescript/src/utils/stringUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function getEndpoint(env: string): string;
+export declare function generateRandomAlphanumericString(length: number): string;
+//# sourceMappingURL=stringUtils.d.ts.map

package/lib/typescript/src/utils/stringUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/stringUtils.ts"],"names":[],"mappings":"AACA,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM/C;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAavE"}

package/package.json

@@ -0,0 +1,148 @@
+{
+  "name": "boxpay-checkout-reactnative-sdk",
+  "version": "1.0.0-beta2",
+  "description": "Boxpay Payment Gateway",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./interface": {
+      "types": "./lib/typescript/src/interface.d.ts",
+      "default": "./lib/module/interface.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "assets",
+    "cross_platform_sdk_react_native_plugin",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!**/__tests__",
+    "!**/__mocks__",
+    "!**/node_modules"
+  ],
+  "scripts": {
+    "typecheck": "tsc",
+    "clean": "del-cli lib",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "prepare": "bob build && cp -r assets lib/assets && cp -r cross_platform_sdk_react_native_plugin lib/cross_platform_sdk_react_native_plugin",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BoxPay-SDKs/checkout-react-native-sdk"
+  },
+  "author": "ishika bansal <ishika.bansal@boxpay.tech> (https://github.com/Ishika1601-boxpay)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/BoxPay-SDKs/checkout-react-native-sdk/issues"
+  },
+  "homepage": "https://github.com/BoxPay-SDKs/checkout-react-native-sdk#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/babel-preset": "0.78.2",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/base-64": "^1.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "babel-plugin-transform-define": "^2.1.4",
+    "del-cli": "^5.1.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^17.10.0",
+    "typescript": "^5.5.4"
+  },
+  "peerDependencies": {
+    "react": "19.0.0",
+    "react-native": "0.79.6",
+    "expo-router": ">=5.0.0",
+    "lottie-react-native": ">=7.0.0",
+    "react-native-modal": ">=13.0.0",
+    "react-native-paper": ">=5.0.0",
+    "react-native-shimmer-placeholder": ">=2.0.0",
+    "react-native-svg": ">=15.0.0",
+    "react-native-toast-message": ">=2.0.0",
+    "react-native-webview": ">=13.0.0"
+  },
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.52.0"
+  },
+  "dependencies": {
+    "axios": "^1.11.0",
+    "base-64": "^1.0.0",
+    "currency-symbol-map": "^5.1.0"
+  },
+  "module": "lib/module/index.js"
+}

package/src/_layout.tsx

@@ -0,0 +1,45 @@
+import { Stack } from 'expo-router';
+
+const BoxpayCheckoutLayout = () => {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="screens/upiTimerScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="screens/cardScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen name="screens/upiScreen" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="screens/webViewScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="screens/walletsScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="screens/netBankingScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="screens/bnplScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen name="screens/emiScreen" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="screens/selectTenureScreen"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="screens/addressScreen"
+        options={{ headerShown: false }}
+      />
+    </Stack>
+  );
+};
+
+export default BoxpayCheckoutLayout;

package/src/components/addressCard.tsx

@@ -0,0 +1,161 @@
+import { View, Text, Pressable, Image } from 'react-native';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { userDataHandler } from '../sharedContext/userdataHandler';
+import styles from '../styles/components/addressCardStyles';
+
+interface AddressCardProps {
+    address:string,
+    navigateToAddressScreen : ()=> void,
+}
+
+const AddressComponent = ({address, navigateToAddressScreen} : AddressCardProps) => {
+    const {checkoutDetails} = checkoutDetailsHandler
+    const {userData} = userDataHandler
+    return (
+        <View>
+            {address != '' && checkoutDetails.isShippingAddressEnabled && (
+                <View>
+                  <Text
+                    style={styles.titleText}
+                  >
+                    Address
+                  </Text>
+                  <Pressable
+                    style={styles.pressableContainer}
+                    onPress={() => {
+                      if (checkoutDetails.isShippingAddressEditable) {
+                        navigateToAddressScreen();
+                      }
+                    }}
+                  >
+                    <Image
+                      source={require('../../assets/images/ic_location.png')}
+                      style={styles.imageStyle}
+                    />
+                    <View
+                      style={styles.insideContainer}
+                    >
+                      <Text
+                        style={styles.insideContainerNormalText}
+                      >
+                        Deliver at{' '}
+                        <Text
+                          style={styles.insideContainerHighlighedText}
+                        >
+                          {userData.labelType === 'Other' ? userData.labelName : userData.labelType}
+                        </Text>
+                      </Text>
+                      <Text
+                        numberOfLines={1}
+                        ellipsizeMode="tail"
+                        style={styles.insideContainerDesc}
+                      >
+                        {address}
+                      </Text>
+                    </View>
+                  </Pressable>
+                </View>
+              )}
+
+              {address == '' && checkoutDetails.isShippingAddressEnabled && (
+                <View>
+                  <Text
+                    style={styles.titleText}
+                  >
+                    Address
+                  </Text>
+                  <Pressable
+                    style={styles.pressableContainer}
+                    onPress={() => {
+                      if (checkoutDetails.isShippingAddressEditable) {
+                        navigateToAddressScreen();
+                      }
+                    }}
+                  >
+                    <Image
+                      source={require('../../assets/images/add_icon.png')}
+                      style={styles.imageStyle}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                      style={styles.insideContainerClickableText}
+                    >
+                      Add new address
+                    </Text>
+                  </Pressable>
+                </View>
+              )}
+
+              {(checkoutDetails.isFullNameEnabled || checkoutDetails.isPhoneEnabled || checkoutDetails.isEmailEnabled) &&
+                !checkoutDetails.isShippingAddressEnabled && (
+                  <View>
+                    <Text
+                      style={styles.titleText}
+                    >
+                      Personal Details
+                    </Text>
+                    <Pressable
+                      style={styles.pressableContainer}
+                      onPress={() => {
+                        if (
+                            checkoutDetails.isFullNameEditable ||
+                            checkoutDetails.isPhoneEditable ||
+                            checkoutDetails.isEmailEditable
+                        ) {
+                          navigateToAddressScreen();
+                        }
+                      }}
+                    >
+                      {(userData.firstName != '' || userData.phone != '' || userData.email != '') && (
+                        <>
+                          <Image
+                            source={require('../../assets/images/ic_user.png')}
+                            style={styles.imageStyle}
+                          />
+                          <View
+                            style={styles.insideContainer}
+                          >
+                            <Text
+                              style={styles.insideContainerHighlighedText}
+                            >
+                              {userData.firstName} {userData.lastName} | {' '}
+                              <Text
+                                style={styles.insideContainerHighlighedText}
+                              >
+                                {userData.phone}
+                              </Text>
+                            </Text>
+                            <Text
+                              numberOfLines={1}
+                              ellipsizeMode="tail"
+                              style={styles.insideContainerDesc}
+                            >
+                              {userData.email}
+                            </Text>
+                          </View>
+                        </>
+                      )}
+                      {(userData.firstName == '' || userData.phone == '' || userData.email == '') && (
+                        <>
+                          <Image
+                            source={require('../../assets/images/add_icon.png')}
+                            style={styles.imageStyle}
+                          />
+                          <Text
+                            numberOfLines={1}
+                            ellipsizeMode="tail"
+                            style={styles.insideContainerClickableText}
+                          >
+                            Add personal details
+                          </Text>
+                        </>
+                      )}
+                    </Pressable>
+                  </View>
+              )}
+        </View>
+    )
+}
+
+export default AddressComponent

package/src/components/bankCard.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import styles from '../styles/components/bankCardStyles';
+
+interface BankCardProps {
+  name: string;
+  iconUrl: string;
+  hasNoCostEmi: boolean;
+  hasLowCostEmi: boolean;
+  onPress: () => void;
+}
+
+const BankCard: React.FC<BankCardProps> = ({
+  name,
+  iconUrl,
+  hasNoCostEmi,
+  hasLowCostEmi,
+  onPress,
+}) => {
+  const [error, setImageError] = useState(false);
+  const [load, setLoad] = useState(true);
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      {/* Bank Icon */}
+      <View
+        style={styles.imageContainer}
+      >
+        {load && !error && (
+          <ShimmerPlaceHolder
+            visible={false} // Keep shimmer until loading is done
+            style={styles.shimmer}
+          />
+        )}
+        {!error ? (
+          <SvgUri
+            uri={iconUrl}
+            width={100} // Keep original size
+            height={100}
+            style={{ transform: [{ scale: 0.4 }] }}
+            onLoad={() => setLoad(false)}
+            onError={() => {
+              setImageError(true);
+              setLoad(false);
+            }}
+          />
+        ) : (
+          <Image
+            source={require('../../assets/images/ic_netbanking_semi_bold.png')}
+            style={styles.errorImage}
+          />
+        )}
+      </View>
+
+      {/* Bank Name & Offers */}
+      <View style={styles.detailsContainer}>
+        <Text style={styles.bankName}>{name}</Text>
+        <View style={styles.tagsContainer}>
+          {hasNoCostEmi && (
+            <View style={styles.tag}>
+              <Text style={styles.tagText}>NO COST EMI</Text>
+            </View>
+          )}
+          {hasLowCostEmi && (
+            <View style={styles.tag}>
+              <Text style={styles.tagText}>LOW COST EMI</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      <Image
+        source={require('../../assets/images/chervon-down.png')}
+        style={styles.chervonImage}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default BankCard;