> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# वेब KYC SDK: JavaScript पहचान सत्यापन

> Didit का JavaScript SDK: KYC, KYB, AML और लाइवनेस। एम्बेडेड, रीडायरेक्ट या iframe। KYC जाँच $0.33 से, $10 मासिक निःशुल्क।



JavaScript SDK एकीकरण प्रॉम्प्ट
        प्रॉम्प्ट को क्लिपबोर्ड पर कॉपी करें



      
      

\<pre>

\`Integrate Didit identity verification into my web application using the JavaScript SDK.

\## Setup
Install: npm install @didit-protocol/sdk-web
Or CDN: <script src="https://unpkg.com/@didit-protocol/sdk-web/dist/didit-sdk.umd.min.js"></script>

\## Integration Flow
1\. (Option A — UniLink) Use a fixed UniLink URL from the Didit Console (no backend needed)
2\. (Option B — API session) Backend creates a session via POST /v3/session/ → 201 response includes "url"
3\. Frontend calls DiditSdk.shared.startVerification({ url }) — the SDK opens a modal (or inline if embedded mode)
4\. On completion, the SDK invokes DiditSdk.shared.onComplete(result) with type "completed" | "cancelled" | "failed"
5\. Backend receives full signed decision via webhook (status.updated)

\## Frontend Code — Vanilla JS / TypeScript
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
switch (result.type) {
case 'completed':
  // result.session.status: "Approved" | "Pending" | "Declined"
  console.log('Done:', result.session.sessionId, result.session.status);
  break;
case 'cancelled':
  console.log('User cancelled');
  break;
case 'failed':
  console.error('Failed:', result.error.type, result.error.message);
  break;
}
};

// Modal mode (default)
DiditSdk.shared.startVerification({
url: 'https://verify.didit.me/session/SESSION_TOKEN' // from backend OR UniLink
});

// Inline / embedded mode
DiditSdk.shared.startVerification({
url: 'https://verify.didit.me/session/SESSION_TOKEN',
configuration: { embedded: true, embeddedContainerId: 'didit-container' }
});

\## Frontend Code — React
function VerifyButton({ userId }) {
const [loading, setLoading] = useState(false);

async function handleVerify() {
setLoading(true);
const res = await fetch('/api/create-session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ user_id: userId })
});
const { url } = await res.json(); // OpenAPI field is named "url"

const { DiditSdk } = await import('@didit-protocol/sdk-web');
DiditSdk.shared.onComplete = (result) => {
  if (result.type === 'completed') {
    // update UI; final, signed result arrives on backend via webhook
  }
  setLoading(false);
};
DiditSdk.shared.startVerification({ url });
}

return <button onClick={handleVerify} disabled={loading}>Verify Identity</button>;
}

\## Backend: Create Session
POST https://verification.didit.me/v3/session/
Headers: { "x-api-key": DIDIT_API_KEY, "Content-Type": "application/json" }
Body: { "workflow_id": DIDIT_WORKFLOW_ID, "callback": "https://myapp.com/done", "vendor_data": userId }
Returns 201 (all 10 fields, per OpenAPI):
\{
"session_id": "uuid",
"session_number": 43762,
"session_token": "3FaJ9wLqX2Mz",   // 12-char URL-safe token; valid until the session expires
"url": "https://verify.didit.me/session/3FaJ9wLqX2Mz",
"vendor_data": "userId",
"metadata": null,
"status": "Not Started",
"workflow_id": "uuid",
"workflow_version": 3,
"callback": "https://myapp.com/done"
}
Pass the "url" field to DiditSdk.shared.startVerification({ url }) — never build the URL by hand.
(If the request sets "language", the URL gains a language segment: https://verify.didit.me/es/session/...)

\## SDK Surface (singleton — DiditSdk.shared)
Methods:  startVerification(options), close(), destroy()
Callbacks: onComplete(result), onStateChange(state, error?), onEvent(event)
State enum: 'idle' | 'loading' | 'ready' | 'error'

\## Rate Limits
600 session-create requests per minute per API key (falls back to bearer token, then client IP), plus a shared budget of 300 write (POST/PATCH/DELETE) requests per minute across all endpoints — the 300/min budget is exhausted first. Exceeding either returns HTTP 429 with Retry-After.

\## Environment Variables
\- DIDIT_API_KEY — backend only (Didit Console > API & Webhooks)
\- DIDIT_WORKFLOW_ID — backend only (Didit Console > Workflows)
\- Never expose the API key on the frontend — the session_token embedded in "url" is the only credential the SDK needs. It grants access to that one session's flow (valid until the session expires), so don't log or share it either.

\## Docs
\- JavaScript SDK: https://docs.didit.me/integration/web-sdks/javascript-sdk
\- Create Session API: https://docs.didit.me/sessions-api/create-session
\- Webhooks: https://docs.didit.me/integration/webhooks`

\</pre>



      
      

यहाँ पेस्ट करें

Didit JavaScript SDK आपको अपने वेब एप्लिकेशन में पहचान सत्यापन को प्रोग्रामैटिक तरीके से एकीकृत करने की सुविधा देता है, जिसमें उपयोगकर्ता अनुभव पर आपका पूरा नियंत्रण रहता है।***## सुविधाएँ- **सरल API** - सिंगलटन पैटर्न के साथ आसानी से उपयोग होने वाली विधियाँ
- **लचीला एकीकरण** - सीधे UniLink URL का उपयोग करें या बैकएंड के ज़रिए सत्र बनाएँ
- **प्रतिक्रियाशील** - डेस्कटॉप और मोबाइल ब्राउज़र दोनों पर काम करता है
- **अनुकूलन योग्य** - स्टाइलिंग और व्यवहार के लिए कॉन्फ़िगरेशन विकल्प
- **एकाधिक फ़ॉर्मेट** - ESM, CommonJS और UMD बिल्ड
- **TypeScript सहायता** - पूर्ण टाइप परिभाषाएँ शामिल हैं
- **मोडल और इनलाइन मोड** - मोडल ओवरले या इनलाइन एम्बेडिंग में से चुनें
- **इवेंट कॉलबैक** - सत्यापन की प्रगति के लिए रीयल-टाइम इवेंट (शुरू हुआ, चरण पूरा हुआ, समाप्त हुआ)
- **स्थिति प्रबंधन** - कस्टम UI के लिए SDK की स्थिति देखें***## इंस्टॉलेशन### NPM/Yarn```bash theme={null}
npm install @didit-protocol/sdk-web
# or
yarn add @didit-protocol/sdk-web
```### CDN (UMD)```html theme={null}
<script src="https://unpkg.com/@didit-protocol/sdk-web/dist/didit-sdk.umd.min.js"></script>
```> [!NOTE]
>
> npm पर प्रकाशित नवीनतम रिलीज़ `0.5.1` है।
> `0.5.0` ने `DiditSdk.shared.submitEvent()` जोड़ा (देखें [इवेंट सबमिट करना](#इवेंट-सबमिट-करें)), और `0.5.1` होस्टेड फ़्लो को SDK के भीतर डिजिटल ID वॉलेट से उपयोगकर्ता की ID माँगने देता है, और विफल लॉन्च को उसके `errorMessage` के साथ `error` स्थिति में रखता है।
> `0.4.0` ने वे कैमरा विकल्प जोड़े जो नेटिव SDK पहले से देते हैं, जिनमें `defaultLivenessCamera` भी शामिल है, जो चेहरे का कैप्चर पीछे वाले कैमरे पर खोलता है (देखें [कैमरा विकल्प](#कैमरा-विकल्प))।### इंस्टॉल किए गए संस्करण की जाँच करेंइंस्टॉल किए गए रिलीज़ के लिए आपका पैकेज मैनेजर ही अधिकृत स्रोत है:```bash theme={null}
npm list @didit-protocol/sdk-web
npm view @didit-protocol/sdk-web version
```आप रनटाइम एक्सपोर्ट भी देख सकते हैं:```typescript theme={null}
const { SDK_VERSION } = await import('@didit-protocol/sdk-web');

console.log(SDK_VERSION);
```संस्करण `0.3.1` से यह एक्सपोर्ट हर JavaScript फ़ॉर्मेट (ESM, CommonJS, UMD, minified UMD) और TypeScript डिक्लेरेशन में पैकेज के संस्करण से बनाया जाता है, इसलिए यह हमेशा इंस्टॉल किए गए रिलीज़ से मेल खाता है।`0.3.0` और उससे पहले के संस्करण इस एक्सपोर्ट से इंस्टॉल किए गए संस्करण की परवाह किए बिना `0.2.1` दिखाते हैं। उन रिलीज़ पर `npm list` या अपनी lockfile का उपयोग करें।***## वेनिला JavaScript### ES Modules / TypeScript```typescript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

// Set up completion callback
DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```### स्क्रिप्ट टैग (UMD)```html theme={null}
<script src="https://unpkg.com/@didit-protocol/sdk-web/dist/didit-sdk.umd.min.js"></script>
<script>
  const { DiditSdk } = DiditSDK;

  DiditSdk.shared.onComplete = (result) => {
    if (result.type === 'completed') {
      alert('Verification completed: ' + result.session.status);
    }
  };

  function startVerification() {
    DiditSdk.shared.startVerification({
      // You can get this link by clicking on "copy link" in the workflows view
      url: 'https://verify.didit.me/u/WORKFLOW_ID_IN_BASE_64'
    });
  }
</script>

<button onclick="startVerification()">Verify Identity</button>
```***## फ़्रेमवर्क उदाहरण> [card] [SDK वेब उदाहरण](https://github.com/didit-protocol/sdk-web-examples)
>
> React, Angular, Svelte, Next.js, Nuxt, Vue और अन्य, हर फ़्रेमवर्क के लिए उदाहरण और दस्तावेज़ के साथ।***## इंटीग्रेशन के तरीकेSDK को एकीकृत करने के दो तरीके हैं:### तरीका 1: UniLink URL (सबसे सरल)Didit Console से अपने वर्कफ़्लो का UniLink URL सीधे उपयोग करें। इसके लिए बैकएंड की आवश्यकता नहीं है।```typescript theme={null}
DiditSdk.shared.startVerification({
  // You can get this link by clicking on "copy link" in the workflows view
  url: 'https://verify.didit.me/u/WORKFLOW_ID_IN_BASE_64'
});
```[Didit Console](https://business.didit.me) → आपका वर्कफ़्लो → लिंक कॉपी करें पर जाकर अपना UniLink URL प्राप्त करें।**जनरेट किया गया session\_id आपको एक इवेंट के ज़रिए भेजा जाएगा।**
**[इवेंट संदर्भ यहाँ देखें](#इवेंट-संदर्भ)**### तरीका 2: बैकएंड सत्र (प्रोडक्शन के लिए अनुशंसित)आपका बैकएंड Didit API के ज़रिए सत्र बनाता है और होस्टेड सत्यापन URL लौटाता है। इससे आपको `vendor_data`, प्रति-सत्र `callback` और `metadata` पर नियंत्रण मिलता है, और आप उपयोगकर्ता के फ़्रंटएंड तक पहुँचने से पहले ही सत्र बना सकते हैं।अधिक जानकारी के लिए [सत्र बनाने वाले API का संदर्भ](https://docs.didit.me/hi/sessions-api/create-session.md) पढ़ें।**बैकएंड (Node.js / Express)**```javascript theme={null}
import express from 'express';
const app = express();
app.use(express.json());

app.post('/api/create-session', async (req, res) => {
  const response = await fetch('https://verification.didit.me/v3/session/', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.DIDIT_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      workflow_id: process.env.DIDIT_WORKFLOW_ID,
      vendor_data: req.body.userId,             // links the session to your user
      callback: 'https://yourapp.com/verified', // optional — overrides workflow default
    }),
  });

  if (!response.ok) {
    return res.status(response.status).send(await response.text());
  }

  // 201 response fields (per OpenAPI): session_id, session_number, session_token, url,
  // vendor_data, metadata, status, workflow_id, workflow_version, callback
  const session = await response.json();
  res.json({ session_id: session.session_id, url: session.url });
});
```**फ़्रंटएंड**```typescript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

const res = await fetch('/api/create-session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ userId: 'user-123' }),
});
const { url } = await res.json();

DiditSdk.shared.startVerification({
  url,
  configuration: {
    loggingEnabled: true,
  },
});
```> [!NOTE]
>
> सत्र-निर्माण रिस्पॉन्स में फ़ील्ड का नाम `url` है (देखें [सत्र बनाने वाले OpenAPI स्कीमा](https://docs.didit.me/hi/sessions-api/create-session.md))। इसे सीधे `startVerification({ url })` को पास करें।***## कॉन्फ़िगरेशन| विकल्प | प्रकार | डिफ़ॉल्ट | विवरण |
| - | - | - | - |
| `loggingEnabled` | `boolean` | `false` | डीबगिंग के लिए SDK लॉगिंग सक्षम करें |
| `containerElement` | `HTMLElement` | `document.body` | मोडल को माउंट करने के लिए कस्टम कंटेनर एलिमेंट |
| `zIndex` | `number` | `9999` | मोडल ओवरले के लिए Z-index |
| `showCloseButton` | `boolean` | `true` | मोडल पर बंद करने का बटन दिखाएँ |
| `showExitConfirmation` | `boolean` | `true` | बंद करते समय बाहर निकलने की पुष्टि वाला डायलॉग दिखाएँ |
| `closeModalOnComplete` | `boolean` | `false` | सत्यापन पूरा होने पर मोडल अपने आप बंद करें |
| `embedded` | `boolean` | `false` | मोडल ओवरले के बजाय सत्यापन इनलाइन रेंडर करें |
| `embeddedContainerId` | `string` | — | एम्बेडेड मोड के लिए कंटेनर एलिमेंट का ID (`embedded` के `true` होने पर आवश्यक) |
| `defaultDocumentCamera` | `'front' \| 'back'` | `'back'` | दस्तावेज़ कैप्चर पहले जिस कैमरे को खोलता है। देखें [कैमरा विकल्प](#कैमरा-विकल्प) |
| `defaultLivenessCamera` | `'front' \| 'back'` | `'front'` | चेहरे (लाइवनेस) का कैप्चर पहले जिस कैमरे पर खुलता है। देखें [कैमरा विकल्प](#कैमरा-विकल्प) |
| `showDocumentCameraSwitchButton` | `boolean` | `true` | दस्तावेज़ चरण पर कैप्चर के भीतर कैमरा स्विचर दिखाएँ |
| `showLivenessCameraSwitchButton` | `boolean` | `true` | लाइवनेस चरण में कैप्चर के भीतर कैमरा स्विचर दिखाएँ |> [!TIP]
>
> पूर्ण `DiditSdkConfiguration` इंटरफ़ेस के लिए नीचे [पूर्ण TypeScript टाइप परिभाषाएँ](#typescript-प्रकार) देखें।***## कैमरा विकल्प> [!NOTE]
>
> कैमरा विकल्पों के लिए `@didit-protocol/sdk-web`**0.4.0** या उसके बाद का संस्करण चाहिए।वेब SDK में वही चार कैमरा विकल्प हैं जो [नेटिव SDK](https://docs.didit.me/hi/integration/native-sdks/overview.md) में हैं। डिफ़ॉल्ट रूप से दस्तावेज़ कैप्चर रियर कैमरा खोलता है और चेहरा (लाइवनेस) कैप्चर फ़्रंट (सेल्फ़ी) कैमरा खोलता है। एक से ज़्यादा कैमरे वाले डिवाइस पर दोनों चरणों में कैप्चर के दौरान कैमरा बदलने का बटन भी मिलता है। चेहरा कैप्चर को रियर कैमरे पर खोलने के लिए `defaultLivenessCamera: 'back'` सेट करें। उदाहरण के लिए, किसी कियोस्क पर, या जब कोई ऑपरेटर डिवाइस पकड़कर सत्यापित किए जा रहे व्यक्ति की ओर करता है।| विकल्प | प्रकार | डिफ़ॉल्ट | विवरण |
| - | - | - | - |
| `defaultDocumentCamera` | `'front' \| 'back'` | `'back'` | दस्तावेज़ कैप्चर स्क्रीन पर पहली बार पहुँचने पर उपयोग होने वाला लेंस |
| `defaultLivenessCamera` | `'front' \| 'back'` | `'front'` | लाइवनेस (पैसिव चेहरा) कैप्चर स्क्रीन पर पहली बार पहुँचने पर उपयोग होने वाला लेंस |
| `showDocumentCameraSwitchButton` | `boolean` | `true` | दस्तावेज़ स्क्रीन पर कैप्चर के दौरान कैमरा बदलने का बटन दिखाएँ; `false` उपयोगकर्ता को `defaultDocumentCamera` पर लॉक कर देता है |
| `showLivenessCameraSwitchButton` | `boolean` | `true` | लाइवनेस स्क्रीन पर कैप्चर के दौरान कैमरा बदलने का बटन दिखाएँ; `false` उपयोगकर्ता को `defaultLivenessCamera` पर लॉक कर देता है |```typescript theme={null}
// A kiosk: the operator points the device at the person, on the rear camera, with no way to switch
DiditSdk.shared.startVerification({
  url,
  configuration: {
    defaultLivenessCamera: 'back',
    showLivenessCameraSwitchButton: false
  }
});
```- मान्य लेंस मान `'front'` और `'back'` हैं। कोई दूसरा मान अनदेखा किया जाता है, और जो स्विचर फ़्लैग बूलियन नहीं है, वह भी अनदेखा किया जाता है।
- जिस डिवाइस में माँगा गया कैमरा नहीं है, वह अपना मौजूदा कैमरा ही इस्तेमाल करता है। उदाहरण के लिए, `'back'` माँगने पर लैपटॉप अपना वेबकैम ही इस्तेमाल करेगा। एक-कैमरा वाले डिवाइस पर स्विचर फ़्लैग चाहे जो भी हों, स्विचर छिपा रहता है।
- लाइवनेस विकल्प पैसिव लाइवनेस जाँच पर लागू होते हैं। एक्टिव लाइवनेस पर इनका कोई असर नहीं पड़ता।
- SDK ये विकल्प सत्यापन URL के क्वेरी पैरामीटर के रूप में सत्यापन पेज तक भेजता है: `document_camera`, `liveness_camera`, `document_camera_switch` और `liveness_camera_switch`। अगर आप SDK के बजाय सत्यापन URL सीधे खोलते हैं, तो इन्हें खुद सेट करें: बिना क्वेरी स्ट्रिंग वाले URL में `?liveness_camera=back` जोड़ें, और जिस URL में पहले से पैरामीटर हैं उसमें `&liveness_camera=back` जोड़ें। या `URL` API से सेट करें, जिससे दोनों स्थितियाँ अपने आप संभल जाएँ:```typescript theme={null}
const verificationUrl = new URL(url);
verificationUrl.searchParams.set('liveness_camera', 'back');
verificationUrl.searchParams.set('liveness_camera_switch', 'false');
window.location.assign(verificationUrl.toString());
```***## इवेंट सबमिट करें`DiditSdk.shared.submitEvent()` अंतिम उपयोगकर्ता के इवेंट (साइन-अप, लॉगिन, विफल लॉगिन, लॉगआउट, पासवर्ड रीसेट, MFA, डिवाइस बदलना) को Didit की इवेंट निगरानी के लिए कतार में रखता है।
आपका बैकएंड व्यक्ति के लिए एक निगरानी टोकन बनाता है, और SDK डिवाइस फ़िंगरप्रिंट के साथ इवेंट बैच में भेजता है।
कभी भी API कुंजी ब्राउज़र तक न भेजें।```typescript theme={null}
DiditSdk.shared.submitEvent({
  monitoringToken, // minted by your backend for this person
  event: { category: "auth", actionType: "login", payload: { method: "password" } },
});
```टोकन, इवेंट फ़ील्ड और डिलीवरी के व्यवहार के लिए [SDK इवेंट सबमिशन](https://docs.didit.me/hi/transaction-monitoring/sdk-event-submission.md) देखें।***## मोडल का आकार और स्क्रॉलिंग> [!NOTE]
>
> नीचे दिया गया आकार-व्यवहार **0.3.1** या उसके बाद के संस्करण में चाहिए। **0.3.0** और उससे पहले के संस्करण छोटे डेस्कटॉप और लैंडस्केप व्यूपोर्ट पर सत्यापन फ़्लो को काट सकते हैं।मोडल मोड में अधिकतम चौड़ाई 500px और अधिकतम ऊँचाई 700px होती है। छोटे डेस्कटॉप और लैंडस्केप व्यूपोर्ट पर iframe दिखने वाले व्यूपोर्ट के 90% तक फैलता है। सत्यापन फ़्लो iframe के भीतर स्क्रॉल होता है, इसलिए हर चरण तक पहुँचा जा सकता है, जबकि मोडल के पीछे का पेज लॉक रहता है।SDK डायनामिक व्यूपोर्ट यूनिट वाले ब्राउज़र पर `dvh` का उपयोग करता है, और पुराने समर्थित ब्राउज़र पर `vh` पर लौट आता है। 540px और उससे कम चौड़ाई पर मोडल दिखने वाले व्यूपोर्ट को पूरी तरह भर देता है। क्लोज़ बटन और बाहर निकलने की पुष्टि मोडल के भीतर ही रहते हैं।### नए डिज़ाइन वाला सत्यापन फ़्लो> [!NOTE]
>
> इस सेक्शन की सभी बातें संस्करण **0.5.0** से लागू होती हैं, जो अभी प्रकाशित नहीं हुआ है। अपग्रेड करने तक मोडल ऊपर बताए आकार पर ही रहता है।संस्करण 0.5.0 से, पेज जब [`didit:layout` मैसेज](https://docs.didit.me/hi/integration/web-sdks/incontext-iframe#diditlayout-से-iframe-का-आकार-तय-करें) के ज़रिए अपना लेआउट बताता है, तब मोडल नए डिज़ाइन वाले सत्यापन फ़्लो के हिसाब से अपना आकार तय करता है:| विंडो की चौड़ाई | मोडल (संस्करण 0.5.0 से) |
| - | - |
| 1024px या उससे अधिक | हर चरण में 960px बाय 660px, अधिकतम विंडो की चौड़ाई और ऊँचाई के 90% तक |
| 541px से 1023px | 500px चौड़ा, और पेज के कंटेंट जितना लंबा, अधिकतम विंडो की ऊँचाई के 90% तक |
| 540px और उससे कम | पूरी स्क्रीन |- **शुरुआती आकार, संस्करण 0.5.0 से:** जब तक पेज अपना लेआउट नहीं बताता, और जो पेज कभी नहीं बताते उनके लिए, मोडल 500px बाय 700px की मौजूदा अधिकतम सीमा पर रहता है। यह छोटी विंडो में भी फिट रहता है और 540px या उससे कम पर पूरी स्क्रीन रहता है।
- **क्लोज़ बटन, संस्करण 0.5.0 से:** पेज की शीर्ष पट्टी के ऊपर 44px का गोल बटन। यह पेज की लाइट या डार्क थीम के अनुसार चलता है, और दाएँ-से-बाएँ भाषाओं में बाईं ओर चला जाता है।
- **एम्बेडेड मोड, संस्करण 0.5.0 से:** पहले की तरह यह अपने होस्ट एलिमेंट को भरता रहता है (देखें [एम्बेडेड मोड](#एम्बेडेड-मोड))।
- **सत्यापन URL, संस्करण 0.5.0 से:** SDK `sdk_presentation` (`modal` या `embedded`) जोड़ता है और मोडल में `sdk_close_button` (`true` या `false`, जो `showCloseButton` के अनुसार होता है) जोड़ता है, ताकि पेज को पता रहे कि वह कैसे दिखाया जा रहा है।
- **इवेंट, संस्करण 0.5.0 से:** SDK `didit:layout` को खुद संभालता है और उसे `onEvent` तक नहीं भेजता।इसे कॉन्फ़िगर करने की ज़रूरत नहीं है, और मौजूदा हर विकल्प पहले की तरह काम करता रहता है।***## एम्बेडेड मोडएम्बेडेड मोड में मोडल की 500px बाय 700px की सीमा लागू नहीं होती। SDK होस्ट एलिमेंट के कंटेंट बॉक्स को भरता है, इसलिए उस एलिमेंट को स्पष्ट या किसी अन्य तरीके से हल होने वाली ऊँचाई दें:```html theme={null}
<div id="verification-container" style="width: 500px; height: 700px;"></div>
``````typescript theme={null}
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/u/...',
  configuration: {
    embedded: true,
    embeddedContainerId: 'verification-container'
  }
});
```अगर होस्ट की कोई हल होने वाली ऊँचाई नहीं है, तो एम्बेडेड iframe की भी कोई उपयोगी ऊँचाई नहीं होगी। जब आपका लेआउट बदले, तब होस्ट का आकार बदलें; SDK उसे अपने आप भरता रहता है।***## सत्यापन परिणामSDK तीन प्रकार के परिणाम लौटाता है:### पूर्णसत्यापन फ़्लो पूरा हो गया (स्वीकृत, लंबित, या अस्वीकृत)।```typescript theme={null}
{
  type: 'completed',
  session: {
    sessionId: 'session-uuid',
    status: 'Approved' | 'Pending' | 'Declined'
  }
}
```> [!NOTE]
>
> TypeScript टाइप `'Approved' | 'Pending' | 'Declined'` घोषित करता है, लेकिन यह मान होस्टेड फ़्लो के सत्र की स्थिति से जस का तस आता है, इसलिए आपको `In Review` जैसी अन्य स्थितियाँ भी मिल सकती हैं। जब फ़्लो ने कोई स्थिति नहीं भेजी, तब `Pending` SDK का डिफ़ॉल्ट मान होता है। `status` को केवल एक संकेत मानें और अंतिम निर्णय के लिए [webhook](https://docs.didit.me/hi/integration/webhooks.md) पर भरोसा करें।### रद्दउपयोगकर्ता ने सत्यापन मोडल बंद कर दिया। जब `sessionId` पहले से ज्ञात हो, तब `session` शामिल होता है (यदि उपयोगकर्ता ने iframe द्वारा उसे रिपोर्ट करने से पहले रद्द किया हो, तो यह `undefined` हो सकता है)।```typescript theme={null}
{
  type: 'cancelled',
  session: {
    sessionId: 'session-uuid',
    status: 'Pending'
  }
}
```### विफलसत्यापन के दौरान एक त्रुटि हुई।```typescript theme={null}
{
  type: 'failed',
  error: {
    type: 'sessionExpired' | 'networkError' | 'cameraAccessDenied' | 'unknown',
    message: 'Your verification session has expired.'
  }
}
```***## स्टेट प्रबंधनआप कस्टम UI के लिए SDK की स्थिति देख सकते हैं:```typescript theme={null}
DiditSdk.shared.onStateChange = (state, error) => {
  switch (state) {
    case 'idle':
      // Ready to start
      break;
    case 'loading':
      // Loading verification iframe
      showLoadingSpinner();
      break;
    case 'ready':
      // Verification in progress
      hideLoadingSpinner();
      break;
    case 'error':
      // Error occurred
      showError(error);
      break;
  }
};

// Check current state
console.log(DiditSdk.shared.state);

// Check if verification is presented
console.log(DiditSdk.shared.isPresented);
```***## API संदर्भ### DiditSdk.sharedसिंगलटन SDK इंस्टेंस।### मेथड| मेथड | विवरण |
| - | - |
| `startVerification(options)` | सत्यापन फ़्लो शुरू करें |
| `submitEvent(options)` | मॉनिटरिंग token के साथ इवेंट मॉनिटरिंग के लिए एक अंतिम उपयोगकर्ता इवेंट कतार में डालें |
| `close()` | सत्यापन मोडल को प्रोग्रामेटिक रूप से बंद करें |
| `destroy()` | SDK इंस्टेंस नष्ट करें और साफ़ करें |### प्रॉपर्टी| प्रॉपर्टी | प्रकार | विवरण |
| - | - | - |
| `state` | `DiditSdkState` | वर्तमान SDK स्थिति |
| `configuration` | `DiditSdkConfiguration \| undefined` | सक्रिय कॉन्फ़िगरेशन (सत्यापन चलने के दौरान सेट रहता है) |
| `isPresented` | `boolean` | क्या सत्यापन मोडल खुला है |
| `errorMessage` | `string \| undefined` | त्रुटि संदेश (जब स्थिति `error` हो तब सेट होता है); विफल लॉन्च के बाद स्थिति तब तक `error` रहती है जब तक आप फिर से शुरू नहीं करते |### कॉलबैक| कॉलबैक | पैरामीटर | विवरण |
| - | - | - |
| `onComplete` | `(result: VerificationResult)` | सत्यापन पूरा होने पर कॉल किया जाता है |
| `onStateChange` | `(state: DiditSdkState, error?: string)` | स्थिति बदलने पर कॉल किया जाता है |
| `onEvent` | `(event: VerificationEvent)` | विस्तृत सत्यापन इवेंट पर कॉल किया जाता है |***## विस्तृत इवेंट`onEvent` कॉलबैक से सत्यापन की प्रगति पर नज़र रखें:```typescript theme={null}
DiditSdk.shared.onEvent = (event) => {
  console.log('Event:', event.type, event.data);
};
```### इवेंट संदर्भ| इवेंट | विवरण | डेटा पेलोड |
| - | - | - |
| `didit:ready` | पेज तैयार है और sessionId उपलब्ध है | `{ sessionId }` |
| `didit:started` | उपयोगकर्ता ने सत्यापन शुरू किया | `{ sessionId? }` |
| `didit:step_started` | एक सत्यापन चरण शुरू हुआ | `{ step, sessionId? }` |
| `didit:step_completed` | एक चरण सफलतापूर्वक पूरा हुआ | `{ step, nextStep?, sessionId? }` |
| `didit:step_changed` | वर्तमान चरण बदला | `{ step, previousStep?, sessionId? }` |
| `didit:media_started` | कैमरा/मीडिया कैप्चर शुरू हुआ | `{ step, mediaType }` |
| `didit:media_captured` | फ़ोटो/वीडियो कैप्चर हुआ | `{ step, isAuto }` |
| `didit:document_selected` | उपयोगकर्ता ने दस्तावेज़ प्रकार और देश चुना | `{ documentType, country }` |
| `didit:verification_submitted` | प्रसंस्करण के लिए डेटा सबमिट किया गया | `{ step, sessionId? }` |
| `didit:code_sent` | OTP कोड भेजा गया | `{ step, channel?, codeSize?, sessionId? }` |
| `didit:code_verified` | OTP कोड सत्यापित हुआ | `{ step, sessionId? }` |
| `didit:status_updated` | सत्र की स्थिति बदली | `{ status, previousStep?, sessionId? }` |
| `didit:completed` | सत्यापन फ़्लो पूरा हुआ | `{ sessionId?, status?, country?, documentType? }` |
| `didit:cancelled` | उपयोगकर्ता ने सत्यापन रद्द किया | `{ sessionId? }` |
| `didit:error` | एक त्रुटि हुई | `{ error: string, step?, sessionId? }` |
| `didit:close_request` | उपयोगकर्ता ने मोडल बंद करने का अनुरोध किया | (कोई डेटा नहीं) |### कनेक्शन टूटनाअगर उपयोगकर्ता का कनेक्शन टूट जाता है, तो सत्यापन पेज किसी चरण को लोड होता छोड़ने के बजाय "No internet connection" स्क्रीन से पूरे फ़्लो को ढक देता है।
यह पृष्ठभूमि में लगातार जाँच करता रहता है और Didit से दोबारा संपर्क होते ही स्क्रीन अपने-आप बंद कर देता है, और उपयोगकर्ता जिस चरण पर था वहीं से आगे बढ़ता है।
SDK के मोडल या iframe के अंदर यह स्क्रीन **Exit Verification** का विकल्प भी देती है: तब पेज `error: "network_error"` के साथ `didit:error` भेजता है, उसके बाद `didit:cancelled` भेजता है, और SDK मोडल बंद करके `type: "cancelled"` के साथ `onComplete` कॉल करता है।संस्करण 0.5.0 से, पेज का `didit:layout` मैसेज मोडल का आकार तय करता है और `onEvent` तक नहीं पहुँचता। अगर आप पेज को अपने iframe में एम्बेड करते हैं, तो [`didit:layout` से iframe का आकार तय करें](https://docs.didit.me/hi/integration/web-sdks/incontext-iframe#diditlayout-से-iframe-का-आकार-तय-करें) देखें।### चरण के मान`step` फ़ील्ड इनमें से कोई एक हो सकता है:- `document_selection` - दस्तावेज़ प्रकार का चयन
- `document_front` - दस्तावेज़ का सामने वाला हिस्सा
- `document_back` - दस्तावेज़ का पीछे वाला हिस्सा
- `face` - चेहरा/लाइवनेस सत्यापन
- `email` - ईमेल सत्यापन
- `phone` - फ़ोन सत्यापन
- `poa` - पते का प्रमाण
- `questionnaire` - प्रश्नावली चरण### चैनल के मान`code_sent` में `channel` फ़ील्ड इनमें से कोई एक हो सकता है:- `email` - कोड ईमेल से भेजा गया
- `sms` - कोड SMS से भेजा गया
- `whatsapp` - कोड WhatsApp से भेजा गया### कोड का आकार`code_sent` में `codeSize` फ़ील्ड OTP कोड की लंबाई बताता है (जैसे 4 या 6 अंक)।***## TypeScript प्रकार```typescript theme={null}
// Configuration types
interface DiditSdkConfiguration {
  /**
   * Enable SDK logging for debugging
   * @default false
   */
  loggingEnabled?: boolean;

  /**
   * Custom container element to mount the modal
   * @default document.body
   */
  containerElement?: HTMLElement;

  /**
   * Z-index for the modal overlay
   * @default 9999
   */
  zIndex?: number;

  /**
   * Show close button on modal
   * @default true
   */
  showCloseButton?: boolean;

  /**
   * Show exit confirmation dialog when closing
   * @default true
   */
  showExitConfirmation?: boolean;

  /**
   * Automatically close modal when verification completes
   * @default false
   */
  closeModalOnComplete?: boolean;

  /**
   * Render verification inline instead of modal overlay
   * @default false
   */
  embedded?: boolean;

  /**
   * Container element ID for embedded mode
   * Required when embedded is true
   */
  embeddedContainerId?: string;

  /**
   * Camera the document capture opens first.
   * @default 'back'
   */
  defaultDocumentCamera?: CameraLens;

  /**
   * Camera the face (liveness) capture opens first.
   * Applies to passive liveness; devices without a rear camera keep the front one.
   * @default 'front'
   */
  defaultLivenessCamera?: CameraLens;

  /**
   * Show the in-capture camera switcher on the document step.
   * false locks the user to defaultDocumentCamera.
   * @default true
   */
  showDocumentCameraSwitchButton?: boolean;

  /**
   * Show the in-capture camera switcher on the liveness step.
   * false locks the user to defaultLivenessCamera.
   * @default true
   */
  showLivenessCameraSwitchButton?: boolean;
}

type CameraLens = 'front' | 'back';

// Session + error types
type VerificationStatus = 'Approved' | 'Pending' | 'Declined';

interface SessionData {
  sessionId: string;
  status: VerificationStatus;
}

type VerificationErrorType =
  | 'sessionExpired'
  | 'networkError'
  | 'cameraAccessDenied'
  | 'unknown';

interface VerificationError {
  type: VerificationErrorType;
  message: string;
}

// Verification result — `session` and `error` are both optional fields
// on every result; which one is populated depends on `type`.
type VerificationResultType = 'completed' | 'cancelled' | 'failed';

interface VerificationResult {
  type: VerificationResultType;
  session?: SessionData;
  error?: VerificationError;
}

// State types
type DiditSdkState = 'idle' | 'loading' | 'ready' | 'error';

// Event types
type VerificationEventType =
  | 'didit:ready'
  | 'didit:started'
  | 'didit:step_started'
  | 'didit:step_completed'
  | 'didit:step_changed'
  | 'didit:media_started'
  | 'didit:media_captured'
  | 'didit:document_selected'
  | 'didit:verification_submitted'
  | 'didit:code_sent'
  | 'didit:code_verified'
  | 'didit:status_updated'
  | 'didit:completed'
  | 'didit:cancelled'
  | 'didit:error'
  | 'didit:close_request';

interface VerificationEventData {
  sessionId?: string;
  status?: string;
  step?: string;
  nextStep?: string;
  previousStep?: string;
  error?: string;
  country?: string;
  documentType?: string;
  isAuto?: boolean;
  mediaType?: string;
  channel?: string;
  codeSize?: number;
  [key: string]: unknown;
}

interface VerificationEvent {
  type: VerificationEventType;
  data?: VerificationEventData;
  timestamp?: number;
}

// Start verification options
interface StartVerificationOptions {
  url: string;
  configuration?: DiditSdkConfiguration;
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.