@zezosoft/react-native-zezopay

A modern, drop-in payment SDK for React Native. Accept payments with UPI, Razorpay, PhonePe, Stripe, and In-App Purchases (IAP).

📦 Installation

yarn add @zezosoft/react-native-zezopay react-native-reanimated react-native-safe-area-context react-native-svg react-native-device-info react-native-webview react-native-linear-gradient @react-native-clipboard/clipboard react-native-view-shot react-native-blob-util @react-native-community/netinfo react-native-system-navigation-bar react-native-razorpay react-native-phonepe-pg @stripe/stripe-react-native react-native-iap react-native-mmkv

⚙️ Setup

1. Babel Plugin

Add the plugin at the end of your plugins list in babel.config.js (Reanimated Docs):

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-worklets/plugin'],
};

(For Reanimated v3, use 'react-native-reanimated/plugin'. In Expo SDK 50+, it is included automatically.)

2. iOS Pods & Metro Reset

cd ios && pod install && cd ..
yarn start --reset-cache

🚀 Quick Start

import React from 'react';
import { View, Alert } from 'react-native';
import { ZezoPay } from '@zezosoft/react-native-zezopay';

export default function CheckoutScreen({ navigation }: any) {
  return (
    <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
      <ZezoPay
        publicKey="your_zezopay_public_key"
        title="Complete Payment"
        onBack={() => navigation?.goBack?.()}
        items={[
          {
            id: 'plan_pro',
            name: 'Pro Membership',
            price: 499,
            duration: '1 Year',
            discount: { type: 'fixed', amount: 50 },
          },
        ]}
        userInfo={{
          _id: 'user_123',
          name: 'Naresh Dhamu',
          email: '[email protected]',
          phone: '9876543210',
        }}
        callbacks={{
          onSuccess: () => {
            Alert.alert(
              'Payment Success',
              'Thank you! Your payment has been processed.'
            );
            navigation?.goBack?.();
          },
          onFailure: ({ error }) => {
            Alert.alert(
              'Payment Failed',
              error?.message || 'Transaction failed.'
            );
          },
          onError: ({ error }) => {
            Alert.alert('Error', error?.message || 'An error occurred.');
          },
        }}
        theme={{
          isDark: false,
          colors: {
            primary: '#6366F1',
          },
        }}
      />
    </View>
  );
}

📖 Component Props

| Prop | Type | Required | Description | | ----------- | --------------- | :------: | --------------------------------------------- | | publicKey | string | Yes | Your ZezoPay merchant public key | | title | string | Yes | Header title (e.g., "Checkout") | | items | SummaryItem[] | Yes | Order summary items array | | userInfo | UserInfo | Yes | User object (_id, name, email, phone) | | onBack | () => void | Yes | Back button callback | | plan | Plan | No | Subscription plan payload | | product | Product | No | Digital product payload | | callbacks | Callbacks | No | Handlers: onSuccess, onFailure, onError | | theme | ThemeInput | No | Custom colors, gradients, and dark mode |

🛠️ Local Development

yarn install
yarn prepare
yarn example start
yarn example android
yarn example ios
yarn test

📜 License

MIT © Naresh Dhamu • Built with ❤️ by ZezoSoft