Meon DigiLocker SDK

An npm package for integrating Meon DigiLocker APIs with React Native. Includes dynamic form fields, validation, searchable document dropdowns, and complete document verification flow.

Installation

npm install meon-digilocker-sdk

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-native react-native-webview @react-native-picker/picker

Note: For iOS, you may need to run:

cd ios && pod install

Features

• ✅ 6 Complete API integrations
• ✅ Dynamic form fields based on document selection
• ✅ Searchable document dropdown
• ✅ Comprehensive validation
• ✅ TypeScript support
• ✅ React Native components included
• ✅ Complete document verification flow with WebView
• ✅ All API calls handled internally
• ✅ Dynamic client credentials support

Quick Start

Simple Usage (Recommended)

The easiest way to use this SDK is with the DigilockerForm component. All API calls and logic are handled internally:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { DigilockerForm } from 'meon-digilocker-sdk';

function App() {
  const handleSuccess = (data: any) => {
    console.log('Document verification successful!', data);
    // Handle the verified document data here
    // data contains all the document information like:
    // - aadhar_no, pan_number, name, dob, etc.
  };

  const handleError = (error: string) => {
    console.error('Error:', error);
    // Handle errors here
  };

  return (
    <View style={styles.container}>
      <DigilockerForm
        companyName="your-company-name"
        secretToken="your-secret-token"
        position={2}
        onSuccess={handleSuccess}
        onError={handleError}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9FAFB',
  },
});

export default App;

That's it! The DigilockerForm component handles:

• Loading issuers
• Loading documents
• Loading form fields
• Form submission
• WebView handling
• Final data retrieval

Advanced Usage (SDK Methods)

If you need more control, you can use the SDK methods directly:

import MeonDigilockerSDK from 'meon-digilocker-sdk';

// Initialize SDK with your credentials
const sdk = new MeonDigilockerSDK('democapital', 'cy7Kw2rWqdzVo2KPxlU0ymd9uRQKPSsb');

// Get access token
const tokenResponse = await sdk.getAccessToken();
console.log(tokenResponse.client_token, tokenResponse.state);

Using Individual Components

You can also use the individual React Native components:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import MeonDigilockerSDK, { DocumentDropdown, DynamicFormFields } from 'meon-digilocker-sdk';

function CustomDigilockerForm() {
  const [sdk] = useState(() => new MeonDigilockerSDK('democapital', 'cy7Kw2rWqdzVo2KPxlU0ymd9uRQKPSsb'));
  const [issuers, setIssuers] = useState([]);
  const [selectedIssuer, setSelectedIssuer] = useState(null);
  const [documents, setDocuments] = useState([]);
  const [selectedDocument, setSelectedDocument] = useState(null);
  const [fields, setFields] = useState([]);
  const [fieldValues, setFieldValues] = useState({});

  // Load issuers
  useEffect(() => {
    sdk.getSelectedIssuers(2).then(response => {
      setIssuers(response.selected_issuers);
    });
  }, []);

  // Load documents when issuer is selected
  useEffect(() => {
    if (selectedIssuer) {
      sdk.getDocuments(selectedIssuer.orgid).then(response => {
        setDocuments(response.issuers_documents);
      });
    }
  }, [selectedIssuer]);

  // Load fields when document is selected
  useEffect(() => {
    if (selectedDocument && selectedIssuer) {
      sdk.getDocumentFields(
        selectedIssuer.name,
        selectedDocument.doctype,
        selectedIssuer.orgid
      ).then(response => {
        setFields(response.digilocker_fields);
        // Reset field values
        const initialValues = {};
        response.digilocker_fields.forEach(field => {
          initialValues[field.paramname] = '';
        });
        setFieldValues(initialValues);
      });
    }
  }, [selectedDocument, selectedIssuer]);

  return (
    <View>
      <Text>DigiLocker Document Verification</Text>
      
      {/* Document Selection */}
      {selectedIssuer && (
        <DocumentDropdown
          documents={documents}
          onSelect={(doc) => {
            setSelectedDocument(doc);
            setFields([]);
            setFieldValues({});
          }}
          placeholder="Search and select a document..."
        />
      )}

      {/* Dynamic Form Fields */}
      {selectedDocument && fields.length > 0 && (
        <DynamicFormFields
          fields={fields}
          values={fieldValues}
          onChange={(values) => setFieldValues(values)}
        />
      )}
    </View>
  );
}

API Reference

Constructor

const sdk = new MeonDigilockerSDK(companyName, secretToken);

• companyName (string, required): Your company name
• secretToken (string, required): Your secret token

Methods

1. getAccessToken()

Get access token and state for authentication.

const response = await sdk.getAccessToken();
// Returns: { client_token, state, status }

2. getSelectedIssuers(position?)

Get list of available issuers.

const response = await sdk.getSelectedIssuers(2);
// Returns: { selected_issuers: [...] }

3. getDocuments(orgId)

Get list of documents for a specific organization.

const response = await sdk.getDocuments('000027');
// Returns: { issuers_documents: [...], success: true }

4. getDocumentFields(issuerName, doctype, orgId)

Get form fields for a specific document type.

const response = await sdk.getDocumentFields(
  'Central Board of Secondary Education',
  'SSCER',
  '000027'
);
// Returns: { digilocker_fields: [...], doctype, org_id }

5. submitDocuments(params, companyPath?)

Submit document data and get redirect URL for webview.

const response = await sdk.submitDocuments({
  selected_issuer: 'Central Board of Secondary Education',
  get_documents: 'SSCER',
  digilocker_documents: [{
    select_issuer: 'Central Board of Secondary Education',
    select_docuement: 'SSCER',
    orgid: '000027',
    doctype: 'SSCER',
    rollno: '1100040',
    year: '20XX',
  }],
}, 'shashank');
// Returns: { message, redirect, success, url }

6. sendEntireData(params)

Get final document data after webview success.

const response = await sdk.sendEntireData({
  client_token: 'DDA5FAB5E5594D6687CE279C643476A8',
  state: '84B7B7108D8C46798E1766FC954EBA41',
  status: true,
});
// Returns: { code, data: {...}, msg, status, success }

React Native Components

DigilockerForm

Complete form component that handles the entire document verification flow.

Props:

• companyName (string, required): Your company name
• secretToken (string, required): Your secret token
• position (number, optional): Position parameter for issuers (default: 2)
• onSuccess (function, optional): Callback when verification succeeds
  • Receives: data - Object containing verified document data
• onError (function, optional): Callback when an error occurs
  • Receives: error - String error message

DocumentDropdown

Searchable dropdown for selecting documents (React Native Modal-based).

Props:

• documents (Document[]): Array of document objects
• onSelect (function): Callback when document is selected
• placeholder (string): Placeholder text
• disabled (boolean): Disable the dropdown

DynamicFormFields

Dynamic form fields based on document selection (React Native TextInput and Picker).

Props:

• fields (DocumentField[]): Array of field definitions
• values (Record<string, string>): Current field values
• onChange (function): Callback when values change
• showLabels (boolean): Show field labels (default: true)

Validation

The SDK includes comprehensive validation for all inputs:

• Company name validation
• Secret token validation
• Organization ID validation (6 digits)
• Document type validation
• Issuer name validation
• Document fields validation
• Client token and state validation

All methods throw descriptive errors if validation fails.

Error Handling

All API methods throw errors that can be caught:

try {
  const response = await sdk.getAccessToken();
} catch (error) {
  console.error('Error:', error.message);
}

License

MIT

Support

For issues and questions, please contact support.