@fundly/payment-sdk

A comprehensive React component library for payment processing with Fundly's payment gateway services.

Features

• 🚀 Multiple Payment Methods: Cash, Cheque, QR Code, Payment Links, and Fundly Pay
• 📱 Mobile Optimized: Built with responsive design for mobile-first experience
• 🎨 Material-UI Components: Beautiful, accessible UI components
• 📷 Camera Integration: Built-in camera functionality for cheque capture
• 🔒 Secure: Built-in authentication and secure API communication
• 📦 TypeScript: Full TypeScript support with type definitions

Installation

npm install @fundly/payment-sdk

Peer Dependencies

This package requires React 18+ as a peer dependency:

npm install react react-dom

Quick Start

import React from 'react';
import { PaymentOptionPage } from '@fundly/payment-sdk';

function App() {
  return (
    <div>
      <PaymentOptionPage />
    </div>
  );
}

export default App;

Components

PaymentOptionPage

The main component that provides a complete payment options interface.

import { PaymentOptionPage } from '@fundly/payment-sdk';

<PaymentOptionPage />

Individual Payment Drawers

You can also use individual payment method components:

import {
  CashDrawer,
  ChequeDrawer,
  FundlyPayDrawer,
  ScanQrDrawer,
  PaymentLinkDrawer,
  GenerateQrDrawer
} from '@fundly/payment-sdk';

// Cash payment
<CashDrawer
  open={isOpen}
  onClose={() => setIsOpen(false)}
  onPaymentCollected={(response) => console.log('Payment completed', response)}
/>

// Cheque payment with camera integration
<ChequeDrawer
  open={isOpen}
  onClose={() => setIsOpen(false)}
  onPaymentCollected={(response) => console.log('Cheque payment completed', response)}
/>

Configuration

Setting Up Payment Configuration

Before using the payment components, configure the payment details:

import {
  setDistributorIdnum,
  setChemistId,
  setPayableValue,
  setPaymentType,
  setTypeOfApp
} from '@fundly/payment-sdk';

// Configure payment details
setDistributorIdnum('D20000539DE');
setChemistId('R20001029MH');
setPayableValue('1000');
setPaymentType('INVOICE_COLLECT');
setTypeOfApp('CUSTOMER_APP');

Authentication

Set up authentication token:

import { setAccessToken } from '@fundly/payment-sdk';

setAccessToken('your-jwt-token');

API Reference

Components Props

Common Drawer Props

interface DrawerProps {
  open: boolean;
  onClose: () => void;
  onPaymentCollected?: (paymentResponse?: PaymentResponse) => void;
}

PaymentResponse Interface

interface PaymentResponse {
  status: 'success' | 'failed' | 'pending';
  data?: any;
  message?: string;
}

Utility Functions

Configuration Functions

• setDistributorIdnum(id: string) - Set distributor ID
• setChemistId(id: string) - Set chemist business ID
• setPayableValue(amount: string) - Set payment amount
• setPaymentType(type: string) - Set payment type
• setTypeOfApp(type: string) - Set application type

Authentication Functions

• setAccessToken(token: string) - Set JWT token
• getAccessToken() - Get current JWT token

Payment Methods

1. Cash Payment

Simple cash payment recording with receipt generation.

2. Cheque Payment

Cheque payment with:

• Date picker for cheque date
• Cheque number input
• Camera integration for cheque image capture
• Gallery/file selection option

3. Fundly Pay

One-click payment solution with:

• Tenure selection
• Instant payment processing
• Eligible amount display

4. QR Code Payments

• Static QR: Scan existing QR codes
• Dynamic QR: Generate new QR codes for payments

5. Payment Links

Generate and share payment links for remote payments.

Styling

The package includes default styles. Make sure to import the CSS:

import '@fundly/payment-sdk/dist/style.css';

Customization

The components use Material-UI and Tailwind CSS. You can customize the theme by:

1. Overriding CSS variables
2. Using Material-UI theme customization
3. Adding custom Tailwind classes

Mobile Features

• Camera Integration: Native camera access for document capture
• Responsive Design: Optimized for mobile devices
• Touch-friendly: Large touch targets and intuitive gestures
• Hardware Back Button: Support for Android hardware back button

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

Build and Publishing

To build the library:

npm run build:lib

To publish to npm:

npm publish

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Fundly

Support

For support, email [email protected] or call +91-9892422528.