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

npm install kyc-verification

Usage

Basic Implementation

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

{
  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

{
  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.