@zezosoft/react-native-zezopay 1.0.0

package/package.json

@@ -0,0 +1,181 @@
+{
+  "name": "@zezosoft/react-native-zezopay",
+  "version": "1.0.0",
+  "description": "A React Native library for integrating ZezoPay payment gateway seamlessly in iOS and Android apps.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @zezosoft/react-native-zezopay-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version",
+    "build": "bob build",
+    "watch": "nodemon --watch src --ext ts,tsx,js --delay 500ms --exec \"yarn clean && yarn build && yalc push\""
+  },
+  "keywords": [
+    "react-native",
+    "zezopay",
+    "payment",
+    "payment-gateway",
+    "ios",
+    "android",
+    "upi",
+    "razorpay",
+    "library"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Zezo-Soft/react-native-zezopay.git"
+  },
+  "author": "Naresh Dhamu <narsadhamu@gmail.com> (https://github.com/naresh-dhamu)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Zezo-Soft/react-native-zezopay/issues"
+  },
+  "homepage": "https://github.com/Zezo-Soft/react-native-zezopay#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/axios": "^0.14.4",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "@types/react-native-razorpay": "^2.2.6",
+    "commitlint": "^19.6.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "nodemon": "^3.1.10",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-svg": "^15.13.0",
+    "release-it": "^17.10.0",
+    "typescript": "5.4.4",
+    "yalc": "^1.0.0-pre.53"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "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"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "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.1"
+  },
+  "dependencies": {
+    "@zezosoft/zezopay-client": "^1.0.1",
+    "axios": "^1.11.0",
+    "lucide-react-native": "^0.542.0",
+    "qs": "^6.14.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-razorpay": "^2.3.0",
+    "react-native-size-matters": "^0.4.2"
+  }
+}

package/src/ZezoPay/Payments/Providers/PaymentGateways.types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 25 Sep 2025 at 11:35 AM
+ */
+
+declare interface IPaymentGateway {
+  init(): void;
+  open(options: IPaymentGatewayOpenOptions): void;
+}
+
+declare interface IPaymentGatewayOpenOptions {
+  publicKey: string;
+  amount: number;
+  currency: string;
+  order_id: string;
+  redirect_url?: string;
+  name?: string;
+  description?: string;
+  mode?: 'live' | 'test';
+  image?: string;
+  handler?: (response: {
+    razorpay_order_id: string;
+    razorpay_signature?: string;
+    razorpay_payment_id?: string;
+  }) => void;
+  OnError?: (error?: any) => void;
+  prefill?: {
+    user_name?: string;
+    user_email?: string;
+    user_phone?: string;
+  };
+  theme?: {
+    color?: string;
+  };
+  extraData?: {
+    merchantId: string;
+    merchantTransactionId: string;
+    body: string;
+    checksum: string;
+    instrumentResponse?: {
+      type: string;
+      redirectInfo: {
+        url: string;
+        method: string;
+      };
+    };
+  };
+}

package/src/ZezoPay/Payments/Providers/Razorpay/Razorpay.ts

@@ -0,0 +1,46 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 25 Sep 2025 at 11:34 AM
+ */
+import RazorpayCheckout from 'react-native-razorpay';
+
+class Razorpay implements IPaymentGateway {
+  constructor() {
+    // init Razorpay
+    this.init();
+  }
+
+  init() {
+    // check if Razorpay already initialized
+  }
+
+  async open(options: IPaymentGatewayOpenOptions) {
+    RazorpayCheckout.open({
+      key: options.publicKey,
+      amount: options.amount,
+      currency: options.currency,
+      name: options.name || '',
+      description: options.description
+        ? options.description?.length > 255
+          ? options.description.slice(0, 255)
+          : options.description
+        : '',
+      order_id: options.order_id,
+      image: options.image,
+      prefill: {
+        name: options?.prefill?.user_name || '',
+        email: options?.prefill?.user_email || '',
+        contact: options?.prefill?.user_phone || '',
+      },
+      theme: options.theme,
+    })
+      .then((response) => {
+        options.handler?.(response);
+      })
+      .catch((error) => {
+        options.OnError?.(error);
+      });
+  }
+}
+
+export default Razorpay;

package/src/ZezoPay/Payments/Providers/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 25 Sep 2025 at 11:37 AM
+ */
+
+import Razorpay from './Razorpay/Razorpay';
+
+export { Razorpay };

package/src/ZezoPay/ZezoPay.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Keyboard,
+  TouchableWithoutFeedback,
+  StatusBar,
+  Text,
+} from 'react-native';
+import { ArrowLeft } from 'lucide-react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import Header from './components/Header';
+import type { ZezoPayProps } from './types';
+import PaymentMethod from './components/PaymentMethod';
+import { Summary } from './components/Summary';
+import PayButton from './components/PayButton';
+import { useZezoPay } from './utils/hooks/useZezoPay';
+import { formatCurrency } from './utils';
+
+const ZezoPay: React.FC<ZezoPayProps> = ({
+  title = 'Payments',
+  summaryItems,
+  onBack,
+  userInfo,
+  publicKey,
+  digitalProductId,
+  subscriptionId,
+  callback,
+}) => {
+  const {
+    selectedPayment,
+    setSelectedPayment,
+    summaryItems: items,
+    totalPrice,
+    isSuccess,
+    error,
+    isProcessing,
+    providers,
+    loading,
+    providerError,
+    removeItem,
+    handlePayNow,
+  } = useZezoPay({
+    publicKey: publicKey,
+    userInfo: {
+      _id: userInfo._id,
+      name: userInfo?.name || '',
+      email: userInfo?.email || '',
+    },
+    subscriptionId: subscriptionId,
+    digitalProductId: digitalProductId,
+    summaryItems: summaryItems || [],
+    callback,
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.safeArea} edges={['bottom', 'left', 'right']}>
+        <StatusBar
+          barStyle="dark-content"
+          backgroundColor={styles.safeArea.backgroundColor}
+        />
+        <SafeAreaView style={styles.headerSafeArea} edges={['top']}>
+          <View style={styles.headerWrapper}>
+            <Header
+              title={title}
+              onBack={onBack}
+              leftIcon={<ArrowLeft size={moderateScale(24)} color="#000" />}
+            />
+          </View>
+        </SafeAreaView>
+
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+          <View style={styles.container}>
+            <KeyboardAwareScrollView
+              style={styles.scrollView}
+              contentContainerStyle={styles.scrollContent}
+              keyboardShouldPersistTaps="handled"
+              enableOnAndroid
+              extraScrollHeight={verticalScale(20)}
+              showsVerticalScrollIndicator={false}
+              contentInsetAdjustmentBehavior="never"
+            >
+              <View style={styles.content}>
+                <PaymentMethod
+                  providers={providers || []}
+                  onProviderChange={setSelectedPayment}
+                  selectedProvider={selectedPayment}
+                  isLoading={loading}
+                  error={providerError?.message}
+                />
+
+                <Summary items={items} onRemoveItem={removeItem} />
+              </View>
+            </KeyboardAwareScrollView>
+
+            {/* Bottom container for error + PayButton */}
+            <View style={styles.bottomContainer}>
+              {error ? (
+                <View style={styles.errorWrapper}>
+                  <Text style={styles.errorText}>{error}</Text>
+                </View>
+              ) : null}
+
+              <PayButton
+                onPaymentInitiate={handlePayNow}
+                status={
+                  isSuccess
+                    ? 'success'
+                    : isProcessing
+                      ? 'processing'
+                      : !selectedPayment || totalPrice === 0
+                        ? 'disabled'
+                        : 'idle'
+                }
+                paymentButtonText={`Pay ${formatCurrency({
+                  amount: totalPrice,
+                  minimumFractionDigits: 0,
+                })}`}
+                noteText="Powered by Zezo Pay"
+              />
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: { flex: 1, backgroundColor: '#FFFFFF' },
+  headerSafeArea: { backgroundColor: '#FFFFFF' },
+  headerWrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    zIndex: 10,
+  },
+  container: { flex: 1, position: 'relative' },
+  scrollView: { flex: 1, paddingBottom: verticalScale(80) },
+  scrollContent: {
+    flexGrow: 1,
+    paddingTop: verticalScale(10),
+    paddingBottom: verticalScale(80),
+  },
+  content: { paddingHorizontal: scale(16) },
+  bottomContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(16),
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+    alignItems: 'center',
+    zIndex: 5,
+  },
+  errorWrapper: {
+    marginBottom: verticalScale(8),
+    width: '100%',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: '#DC2626',
+    fontSize: moderateScale(14),
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+});
+
+export default ZezoPay;

package/src/ZezoPay/components/Header.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, Platform } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { ArrowLeft } from 'lucide-react-native';
+import { scale, moderateScale } from 'react-native-size-matters';
+
+export interface HeaderProps {
+  title: string;
+  titleStyle?: TextStyle;
+  containerStyle?: ViewStyle;
+  leftIcon?: React.ReactNode;
+  onBack?: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({
+  title,
+  titleStyle,
+  containerStyle,
+  leftIcon,
+  onBack,
+}) => {
+  return (
+    <View style={[styles.header, containerStyle]}>
+      {/* Left Button Container */}
+      <View style={styles.gridItemLeft}>
+        <View style={styles.backBtnContainer}>
+          <Pressable
+            onPress={onBack}
+            android_ripple={{
+              color: 'rgba(0,0,0,0.1)',
+              borderless: false,
+              radius: scale(100),
+            }}
+            style={({ pressed }) => [
+              styles.backBtnWrapper,
+              pressed && Platform.OS === 'ios' && styles.backBtnPressed,
+            ]}
+            hitSlop={10}
+          >
+            <View style={styles.backBtn}>
+              {leftIcon ? (
+                leftIcon
+              ) : (
+                <ArrowLeft size={moderateScale(20)} color="#000" />
+              )}
+            </View>
+          </Pressable>
+        </View>
+      </View>
+
+      {/* Title */}
+      <View style={styles.gridItem}>
+        <Text style={[styles.title, titleStyle]} numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+
+      <View style={styles.gridItem} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    height: scale(44),
+    paddingHorizontal: scale(16),
+    justifyContent: 'space-between',
+  },
+  gridItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gridItemLeft: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  backBtnContainer: {
+    borderRadius: scale(100),
+    overflow: 'hidden', // crucial for Android ripple
+  },
+  backBtnWrapper: {
+    borderRadius: scale(100),
+  },
+  backBtn: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: scale(10),
+    width: scale(35),
+    height: scale(35),
+  },
+  backBtnPressed: {
+    backgroundColor: 'rgba(0,0,0,0.1)', // iOS pressed effect
+  },
+  title: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default Header;

package/src/ZezoPay/components/PayButton.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ActivityIndicator,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import LinearGradient from 'react-native-linear-gradient';
+import { Check } from 'lucide-react-native';
+
+interface PayButtonProps {
+  onPaymentInitiate: () => void;
+  status?: 'idle' | 'processing' | 'success' | 'disabled';
+  paymentButtonText?: string;
+  paymentProcessingText?: string;
+  paymentSuccessText?: string;
+  noteText?: string;
+}
+
+const PayButton: React.FC<PayButtonProps> = ({
+  onPaymentInitiate,
+  status = 'idle',
+  paymentButtonText = 'Pay Now',
+  paymentProcessingText = 'Processing...',
+  paymentSuccessText = 'Payment Successful',
+  noteText = 'Powered by Zezo Pay',
+}) => {
+  const colorsMap = {
+    idle: ['#0251ca', '#063482'],
+    processing: ['#0a84ff', '#1784e6'],
+    success: ['#28a745', '#1c7c31'],
+    disabled: ['#556fadff', '#3d71e9ff'],
+  };
+
+  return (
+    <View style={styles.container}>
+      {status === 'success' ? (
+        <View style={styles.shadowWrapper}>
+          <LinearGradient
+            colors={colorsMap.success}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={styles.paymentButton}
+          >
+            <Check size={20} color="#fff" />
+            <Text style={[styles.successText, { marginLeft: scale(8) }]}>
+              {paymentSuccessText}
+            </Text>
+          </LinearGradient>
+        </View>
+      ) : (
+        <Pressable
+          onPress={onPaymentInitiate}
+          disabled={status === 'processing' || status === 'disabled'}
+          style={({ pressed }) => [
+            { opacity: pressed ? 0.85 : 1, width: '100%' },
+          ]}
+        >
+          <View style={styles.shadowWrapper}>
+            <LinearGradient
+              colors={colorsMap[status]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={styles.paymentButton}
+            >
+              {status === 'processing' ? (
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  <ActivityIndicator
+                    color="#fff"
+                    style={{ marginRight: scale(8) }}
+                  />
+                  <Text style={styles.paymentText}>
+                    {paymentProcessingText}
+                  </Text>
+                </View>
+              ) : (
+                <Text style={styles.paymentText}>{paymentButtonText}</Text>
+              )}
+            </LinearGradient>
+          </View>
+        </Pressable>
+      )}
+
+      {noteText && <Text style={styles.noteText}>{noteText}</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { width: '100%', alignItems: 'center' },
+  shadowWrapper: {
+    width: '100%',
+    height: verticalScale(50),
+    borderRadius: scale(12),
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
+    backgroundColor: '#0000',
+    justifyContent: 'center',
+  },
+  paymentButton: {
+    width: '100%',
+    height: '100%',
+    borderRadius: scale(12),
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  paymentText: {
+    color: '#fff',
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+  },
+  successText: {
+    color: '#fff',
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+  },
+  noteText: {
+    marginTop: verticalScale(10),
+    fontSize: moderateScale(13),
+    fontWeight: '600',
+    color: '#FF7847',
+    textAlign: 'center',
+  },
+});
+
+export default PayButton;