nba-kyc-lib/README.md

A simple input form Web Component usable in React and Angular

# KYC Verification Package

A modern, user-friendly KYC (Know Your Customer) verification package that provides a seamless verification experience with support for GST and Aadhar verification, along with bank account management.

## Features

- 🎯 **Multiple KYC Types**

  - GST Number Verification
  - Aadhar Card Verification
  - Bank Account Management

- 🔒 **Secure & Encrypted**

  - End-to-end encryption
  - Secure data handling
  - OTP-based verification

- 💳 **Bank Account Management**

  - Add multiple bank accounts
  - IFSC code validation
  - Bank details verification
  - Easy bank account management

- 🎨 **Modern UI/UX**
  - Clean and intuitive interface
  - Progress tracking
  - Responsive design
  - Loading states and error handling

## Installation

```bash
npm install kyc-verification
```

## Usage

### Basic Implementation

```javascript
import { renderSimpleForm } from "kyc-verification";

// Initialize the form
const kycForm = await renderSimpleForm(
  document.getElementById("your-container-id"),
  null,
  {
    showBank: true,
    requiredFields: { kycType: true, kycNumber: true, otp: true },
    onSuccess: (data) => console.log("Success:", data),
    onError: (err) => console.error("Error:", err),
    onClose: () => console.log("Modal closed"),
    openModal: true,
    token: "your-auth-token",
    premiseId: "your-premise-id",
    customerId: "your-customer-id",
    verifyId: "your-verify-id",
  },
  {
    sendOTP: "/api/send-otp",
    verifyOTP: "/api/verify-otp",
    verifyIFSC: "/api/verify-ifsc",
    updateBankDetails: "/api/update-bank",
    API_BASE_URL: "https://your-api-base-url",
    getBankDetails: "/api/get-bank-details",
  },
  { iconPath: "./path-to-icons" }
);

// Open the modal
kycForm.openModal();

// Close the modal
kycForm.closeModal();

// Check if modal is open
kycForm.isOpen();
```

### Configuration Options

#### Form Configuration

```javascript
{
  showBank: boolean,              // Show bank details section
  requiredFields: {               // Required fields configuration
    kycType: boolean,
    kycNumber: boolean,
    otp: boolean
  },
  onSuccess: Function,            // Success callback
  onError: Function,              // Error callback
  onClose: Function,              // Close callback
  openModal: boolean,             // Initial modal state
  token: string,                  // Authentication token
  premiseId: string|number,       // Premise ID
  customerId: string|number,      // Customer ID
  verifyId: string|number         // Verification ID
}
```

#### API Endpoints Configuration

```javascript
{
  sendOTP: string,               // Send OTP endpoint
  verifyOTP: string,             // Verify OTP endpoint
  verifyIFSC: string,            // Verify IFSC endpoint
  updateBankDetails: string,     // Update bank details endpoint
  API_BASE_URL: string,          // Base API URL
  getBankDetails: string         // Get bank details endpoint
}
```

## Validation Rules

### GST Number

- Must follow the format: `^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$`
- Example: `22AAAAA0000A1Z5`

### Aadhar Number

- Must be exactly 12 digits
- Example: `123456789012`

### Bank Account Details

- Account Number: 9-18 digits
- IFSC Code: Must follow the format `^[A-Z]{4}0[A-Z0-9]{6}$`
- Account Holder Name: Minimum 3 characters

## Styling

The package comes with built-in styles, but you can customize them by overriding the CSS classes. The main classes are:

- `.kyc-container` - Main container
- `.kyc-form-wrapper` - Form wrapper
- `.kyc-header` - Header section
- `.kyc-progress-bar` - Progress bar
- `.kyc-form` - Form section
- `.form-section` - Individual form sections
- `.form-group` - Form groups
- `.input-with-button` - Input with action button
- `.bank-list` - Bank list section

## Error Handling

The package includes comprehensive error handling for:

- Invalid KYC numbers
- Invalid OTP
- Invalid bank details
- API errors
- Network issues

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Support

For support, please open an issue in the GitHub repository.