cashfree-payments-react

A complete, self-sustained React payment system with Cashfree integration. This package provides everything you need to implement payments in your React/Next.js application with minimal setup.

Features

• 🚀 Super easy integration - just one component!
• 🎨 Customizable UI components with Tailwind CSS
• 📱 Responsive design out of the box
• 🔒 Secure payment processing
• 🛠 TypeScript support
• ⚡ Server-side API utilities
• 🔄 Real-time payment status updates
• 💾 Persistent payment state
• 🎯 Zero configuration required
• 📝 Comprehensive documentation

Installation

npm install cashfree-payments-react
# or
yarn add cashfree-payments-react
# or
pnpm add cashfree-payments-react

Quick Start (Super Easy Integration)

1. One-Line Payment Button

import { SimplePayment } from 'cashfree-payments-react';

export default function CheckoutPage() {
  return (
    <SimplePayment 
      amount={999.99}
      onSuccess={(data) => console.log('Payment successful:', data)}
      onError={(error) => console.error('Payment failed:', error)}
    />
  );
}

That's it! You now have a fully functional payment system. 🎉

2. Custom Integration with Hook

import { usePayment } from 'cashfree-payments-react';

export default function CustomCheckout() {
  const { 
    initializePayment, 
    isLoading, 
    error,
    paymentStatus 
  } = usePayment();

  const handlePayment = async () => {
    await initializePayment(999.99, {
      name: 'John Doe',
      email: '[email protected]',
      phone: '9999999999'
    });
  };

  return (
    <div>
      <button onClick={handlePayment} disabled={isLoading}>
        {isLoading ? 'Processing...' : 'Pay Now'}
      </button>
      {error && <div>Error: {error.message}</div>}
      {paymentStatus && <div>Status: {paymentStatus.payment_status}</div>}
    </div>
  );
}

Environment Variables

Create a .env.local file in your project root and add your Cashfree credentials:

NEXT_PUBLIC_CASHFREE_CLIENT_ID="your_client_id"
NEXT_PUBLIC_CASHFREE_CLIENT_SECRET="your_client_secret"
NEXT_PUBLIC_CASHFREE_ENV="sandbox" # or "production"
NEXT_PUBLIC_CASHFREE_API_VERSION="2023-08-01"

Advanced Usage

Full Payment Form

If you need more control, you can use the full payment form:

import { PaymentForm } from 'cashfree-payments-react';

export default function CheckoutPage() {
  return (
    <PaymentForm 
      onSuccess={handleSuccess}
      onError={handleError}
      className="custom-form"
      customStyles={{
        input: 'custom-input',
        button: 'custom-button'
      }}
    />
  );
}

Payment Status Component

import { PaymentStatus } from 'cashfree-payments-react';

export default function PaymentStatusPage() {
  return (
    <PaymentStatus 
      status={status} 
      error={error}
      className="custom-status"
    />
  );
}

API Integration

Create an API route for order creation:

// pages/api/create-order.ts
import { createOrder } from 'cashfree-payments-react';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const response = await createOrder(req.body);
    res.status(200).json(response);
  } catch (error) {
    res.status(500).json({ error: 'Failed to create order' });
  }
}

Testing

For testing, you can use Cashfree's test card details:

• Card Number: 4111 1111 1111 1111
• Expiry: Any future date
• CVV: Any 3 digits
• Name: Any name

For UPI testing:

• UPI ID: success@upi
• For failure testing: failure@upi

API Reference

Components

SimplePayment

interface SimplePaymentProps {
  amount: number;
  onSuccess?: (data: PaymentResponse) => void;
  onError?: (error: Error) => void;
  buttonText?: string;
  className?: string;
  customerDetails?: {
    name: string;
    email: string;
    phone: string;
  };
}

PaymentForm & PaymentStatus

(Previous props documentation remains the same)

Hooks

usePayment

const {
  orderId,
  paymentSessionId,
  paymentStatus,
  error,
  isLoading,
  initializePayment,
  savePaymentDetails,
  loadPaymentDetails,
  clearPaymentDetails,
  refetchStatus
} = usePayment();

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT