react-native-digilocker-aadhar-pan

React Native component for seamless DigiLocker Aadhar and PAN verification integration.

Installation

npm install react-native-digilocker-aadhar-pan react-native-webview

iOS Additional Setup

cd ios && pod install

Usage

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import DigiLockerAadharPan from 'react-native-digilocker-aadhar-pan';

const App = () => {
  const [showDigiLocker, setShowDigiLocker] = useState(false);

  const config = {
    companyName: 'your-company-name',
    secretToken: 'your-secret-token',
    redirectUrl: 'https://your-redirect-url.com',
    documents: 'aadhaar,pan', // Optional: default is 'aadhaar,pan'
    panName: '',               // Optional: PAN card holder name (default: empty string)
    panNo: '',                 // Optional: PAN number (default: empty string)
  };

  const handleSuccess = (data) => {
    console.log('DigiLocker Success:', data);
    Alert.alert('Success', 'Verification completed!');
    
    // Access user data
    console.log('Name:', data.data.name);
    console.log('Aadhar:', data.data.aadhar_no);
    console.log('PAN:', data.data.pan_number);
  };

  const handleError = (error) => {
    console.error('DigiLocker Error:', error);
    Alert.alert('Error', error);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button
        title="Verify with DigiLocker"
        onPress={() => setShowDigiLocker(true)}
      />

      <DigiLockerAadharPan
        config={config}
        onSuccess={handleSuccess}
        onError={handleError}
        visible={showDigiLocker}
        onClose={() => setShowDigiLocker(false)}
      />
    </View>
  );
};

export default App;

Configuration Object

| Property | Type | Required | Default | Description | |----------|------|----------|---------|-------------| | companyName | string | Yes | - | Your company name registered with DigiLocker API | | secretToken | string | Yes | - | Your secret token for API authentication | | redirectUrl | string | Yes | - | URL to redirect after verification completion | | documents | string | No | 'aadhaar,pan' | Comma-separated list of documents to fetch | | panName | string | No | '' | PAN card holder name (leave empty to skip) | | panNo | string | No | '' | PAN number (leave empty to skip) |

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | config | object | Yes | Configuration object containing API credentials and options | | onSuccess | function | Yes | Callback function called when verification is successful. Receives response data as parameter | | onError | function | Yes | Callback function called when an error occurs. Receives error message as parameter | | visible | boolean | Yes | Controls the visibility of the DigiLocker modal | | onClose | function | Yes | Callback function to close the modal |

Response Data Structure

The onSuccess callback receives a response object with the following structure:

{
  code: 200,
  success: true,
  status: "success",
  msg: "Data Exported Successfully",
  data: {
    name: "John Doe",
    aadhar_no: "XXXX-XXXX-1234",
    aadhar_address: "123 Street Name, City",
    aadhar_filename: "https://...",
    aadhar_img_filename: "https://...",
    aadhar_xml: "https://...",
    adharimg: "https://...",
    dob: "01-01-1990",
    gender: "M",
    fathername: "Father Name",
    house: "123",
    locality: "Locality Name",
    dist: "District",
    state: "State",
    country: "India",
    pincode: "123456",
    pan_number: "ABCDE1234F",
    name_on_pan: "JOHN DOE",
    pan_image_path: "https://...",
    date_time: "Wed, 17 Nov 2025 10:42:53 GMT",
    other_documents_files: {}
  }
}

Example: With PAN Details Pre-filled

const config = {
  companyName: 'democapital',
  secretToken: 'your-secret-token',
  redirectUrl: 'https://digilocker.meon.co.in/digilocker/thank-you-page',
  documents: 'aadhaar,pan',
  panName: 'JOHN DOE',        // Pre-fill PAN name
  panNo: 'ABCDE1234F',         // Pre-fill PAN number
};

Example: Fetch Only Aadhar

const config = {
  companyName: 'democapital',
  secretToken: 'your-secret-token',
  redirectUrl: 'https://your-redirect-url.com',
  documents: 'aadhaar',        // Only fetch Aadhar
};

Features

• ✅ Easy integration with DigiLocker API
• ✅ Automatic token management and state handling
• ✅ WebView-based secure verification flow
• ✅ Support for Aadhar and PAN verification
• ✅ Optional PAN pre-fill functionality
• ✅ Customizable document selection
• ✅ Loading indicators and error handling
• ✅ Clean modal-based UI

Requirements

• React Native >= 0.60.0
• react-native-webview >= 11.0.0

Notes

• The panName and panNo fields are optional. If you don't provide them, they will default to empty strings
• User can provide their own PAN details through the frontend before opening DigiLocker
• The component automatically manages API tokens and state internally
• All API calls are handled securely within the component

License

MIT

Support

For issues and feature requests, please visit our GitHub repository.

Author

Your Name - [email protected]