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

# SDK JavaScript de verificació d'identitat: KYC web

> SDK JavaScript de Didit per a KYC, KYB, AML i prova de vida. Integració incrustada, redirecció o iframe. Des de $0.33 per KYC, $10 gratis al mes.



Prompt d'integració del SDK de JavaScript
        Copia el prompt al porta-retalls



      
      

\<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>



      
      

Enganxa a

El SDK de JavaScript de Didit ofereix una manera programàtica d'integrar la verificació a la teva aplicació web, amb control total sobre l'experiència de l'usuari.***## Funcionalitats- **API simple** - Patró singleton amb mètodes fàcils d'utilitzar
- **Integració flexible** - Usa directament l'URL d'UniLink o crea sessions des del backend
- **Adaptable** - Funciona en navegadors d'escriptori i mòbils
- **Personalitzable** - Opcions de configuració per a l'estil i el comportament
- **Múltiples formats** - Compilacions ESM, CommonJS i UMD
- **Suport de TypeScript** - Definicions de tipus completes incloses
- **Modes modal i en línia** - Tria entre una superposició modal o una integració en línia
- **Callbacks d'esdeveniments** - Esdeveniments en temps real del progrés de la verificació (iniciada, pas completat, finalitzada)
- **Gestió d'estat** - Observa l'estat del SDK per a una interfície personalitzada***## Instal·lació### 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]
>
> La versió publicada més recent a npm és `0.5.1`.
> `0.5.0` va afegir `DiditSdk.shared.submitEvent()` (vegeu [Enviament d'esdeveniments](#enviament-d’esdeveniments)), i `0.5.1` permet que el flux allotjat demani a una cartera d'identitat digital l'ID de l'usuari dins del SDK, i manté un inici fallit en l'estat `error` amb el seu `errorMessage`.
> `0.4.0` va afegir les opcions de càmera que ja ofereixen els SDK natius, incloent `defaultLivenessCamera`, que obre la captura facial amb la càmera posterior (vegeu [Opcions de la càmera](#opcions-de-càmera)).### Comprova la versió instal·ladaEl teu gestor de paquets continua sent la font d'autoritat per determinar la versió instal·lada:```bash theme={null}
npm list @didit-protocol/sdk-web
npm view @didit-protocol/sdk-web version
```També pots inspeccionar l'exportació en temps d'execució:```typescript theme={null}
const { SDK_VERSION } = await import('@didit-protocol/sdk-web');

console.log(SDK_VERSION);
```A partir de `0.3.1`, aquesta exportació es genera a partir de la versió del paquet en tots els formats JavaScript (ESM, CommonJS, UMD, UMD minificat) i en la declaració de TypeScript, de manera que sempre coincideix amb la versió instal·lada.`0.3.0` i anteriors informen de `0.2.1` des d'aquesta exportació, independentment de la versió instal·lada. En aquestes versions, usa `npm list` o el teu fitxer de bloqueig.***## JavaScript pur### Mòduls ES / 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'
});
```### Etiqueta script (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>
```***## Exemples de frameworks> [card] [Exemples del SDK web](https://github.com/didit-protocol/sdk-web-examples)
>
> React, Angular, Svelte, Next.js, Nuxt, Vue i més, amb exemples i documentació per a cada framework.***## Mètodes d'integracióHi ha dues maneres d'integrar el SDK:### Mètode 1: URL de UniLink (la més senzilla)Usa directament l'URL d'UniLink del teu flux des de la Didit Console. No cal backend.```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'
});
```Obtén la teva URL de UniLink des de la [Didit Console](https://business.didit.me) → El teu flux → Copia l'enllaç.**El session\_id generat t'arribarà en un esdeveniment.**
**[Consulta aquí la referència d'esdeveniments](#referència-d’esdeveniments)**### Mètode 2: sessió des del backend (recomanat per a producció)El teu backend crea una sessió mitjançant l'API de Didit i retorna la URL de verificació allotjada. Això et dona control sobre `vendor_data`, `callback` per sessió i `metadata`, i et permet crear sessions abans que l'usuari arribi al frontend.Llegeix més a la [referència de l'API Create Session](https://docs.didit.me/ca/sessions-api/create-session.md).**Backend (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 });
});
```**Frontend**```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]
>
> El camp de resposta en crear la sessió es diu `url` (vegeu l'[esquema OpenAPI de Create Session](https://docs.didit.me/ca/sessions-api/create-session.md)). Passa'l directament a `startVerification({ url })`.***## Configuració| Opció | Tipus | Per defecte | Descripció |
| - | - | - | - |
| `loggingEnabled` | `boolean` | `false` | Activa el registre del SDK per a depurar |
| `containerElement` | `HTMLElement` | `document.body` | Element contenidor personalitzat on muntar el modal |
| `zIndex` | `number` | `9999` | Z-index de la superposició modal |
| `showCloseButton` | `boolean` | `true` | Mostra el botó de tancar al modal |
| `showExitConfirmation` | `boolean` | `true` | Mostra el diàleg de confirmació de sortida en tancar |
| `closeModalOnComplete` | `boolean` | `false` | Tanca automàticament el modal quan la verificació es completa |
| `embedded` | `boolean` | `false` | Mostra la verificació en línia en lloc de la superposició modal |
| `embeddedContainerId` | `string` | — | ID de l'element contenidor per al mode integrat (obligatori quan `embedded` és `true`) |
| `defaultDocumentCamera` | `'front' \| 'back'` | `'back'` | Càmera que s'obre per defecte en capturar el document. Vegeu [Opcions de la càmera](#opcions-de-càmera) |
| `defaultLivenessCamera` | `'front' \| 'back'` | `'front'` | Càmera que s'obre per defecte en capturar la cara (prova de vida). Vegeu [Opcions de la càmera](#opcions-de-càmera) |
| `showDocumentCameraSwitchButton` | `boolean` | `true` | Mostra el selector de càmera durant la captura al pas de document |
| `showLivenessCameraSwitchButton` | `boolean` | `true` | Mostra el selector de càmera durant la captura al pas de prova de vida |> [!TIP]
>
> Consulta les [definicions completes de tipus de TypeScript](#tipus-de-typescript) més avall per a la interfície completa `DiditSdkConfiguration`.***## Opcions de càmera> [!NOTE]
>
> Les opcions de càmera requereixen `@didit-protocol/sdk-web`**0.4.0** o posterior.L'SDK web exposa les mateixes quatre opcions de càmera que els [SDK nadius](https://docs.didit.me/ca/integration/native-sdks/overview.md). Per defecte, la captura del document obre la càmera posterior i la captura facial (prova de vida) obre la càmera frontal (selfie), i tots dos passos ofereixen un selector de càmera dins de la captura en els dispositius amb més d'una càmera. Estableix `defaultLivenessCamera: 'back'` per obrir la captura facial amb la càmera posterior, per exemple en un quiosc o quan un operador sosté el dispositiu i l'apunta cap a la persona que es verifica.| Opció | Tipus | Per defecte | Descripció |
| - | - | - | - |
| `defaultDocumentCamera` | `'front' \| 'back'` | `'back'` | Objectiu que s'utilitza en entrar per primera vegada a la pantalla de captura del document |
| `defaultLivenessCamera` | `'front' \| 'back'` | `'front'` | Objectiu que s'utilitza en entrar per primera vegada a la pantalla de captura de prova de vida (facial passiva) |
| `showDocumentCameraSwitchButton` | `boolean` | `true` | Mostra el selector de càmera dins de la captura a la pantalla del document; `false` bloqueja l'usuari a `defaultDocumentCamera` |
| `showLivenessCameraSwitchButton` | `boolean` | `true` | Mostra el selector de càmera dins de la captura a la pantalla de prova de vida; `false` bloqueja l'usuari a `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
  }
});
```- Els valors d'objectiu acceptats són `'front'` i `'back'`. Qualsevol altre valor s'ignora, igual que un indicador del selector que no sigui booleà.
- Si un dispositiu no té la càmera sol·licitada, conserva la que té: un portàtil al qual se li demana `'back'` continuarà utilitzant la seva webcam. El selector s'amaga en els dispositius amb una sola càmera, independentment dels indicadors.
- Les opcions de prova de vida s'apliquen a la comprovació de prova de vida passiva. La prova de vida activa no es veu afectada.
- L'SDK reenvia les opcions a la pàgina de verificació com a paràmetres de consulta de la URL de verificació: `document_camera`, `liveness_camera`, `document_camera_switch` i `liveness_camera_switch`. Si obres la URL de verificació directament en lloc de fer-ho a través de l'SDK, configura-les tu mateix: afegeix `?liveness_camera=back` a una URL sense cadena de consulta, `&liveness_camera=back` a una que ja tingui paràmetres, o estableix-les amb l'API `URL` perquè es cobreixin tots dos casos:```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());
```***## Enviament d'esdeveniments`DiditSdk.shared.submitEvent()` posa en cua esdeveniments d'usuari final (registre, inici de sessió, inici de sessió fallit, tancament de sessió, restabliment de contrasenya, MFA, canvi de dispositiu) per al monitoratge d'esdeveniments de Didit.
El teu backend genera un token de monitoratge per a la persona, i l'SDK envia els esdeveniments per lots juntament amb l'empremta digital del dispositiu.
Mai enviïs una clau d'API al navegador.```typescript theme={null}
DiditSdk.shared.submitEvent({
  monitoringToken, // minted by your backend for this person
  event: { category: "auth", actionType: "login", payload: { method: "password" } },
});
```Consulta [l'enviament d'esdeveniments de l'SDK](https://docs.didit.me/ca/transaction-monitoring/sdk-event-submission.md) per al token, els camps dels esdeveniments i el comportament de lliurament.***## Mida i desplaçament del modal> [!NOTE]
>
> El comportament de mida que es descriu a continuació requereix la versió **0.3.1** o posterior. Les versions **0.3.0** i anteriors poden retallar el flux de verificació en pantalles d'escriptori i en orientació horitzontal d'alçada reduïda.El mode modal utilitza una amplada màxima de 500px i una alçada màxima de 700px. En pantalles d'escriptori i en orientació horitzontal d'alçada reduïda, l'iframe ocupa el 90% de la finestra visible. El flux de verificació es desplaça dins de l'iframe, de manera que tots els passos continuen sent accessibles mentre la pàgina que hi ha darrere del modal roman bloquejada.L'SDK utilitza `dvh` en els navegadors que admeten unitats de finestra gràfica dinàmiques i recorre a `vh` en els navegadors compatibles més antics. Amb amplades de 540px o menys, el modal ocupa tota la finestra visible. El botó de tancament i la confirmació de sortida romanen dins del modal.### Flux de verificació redissenyat> [!NOTE]
>
> Tot el que apareix en aquesta secció s'aplica des de la versió **0.5.0**, que encara no està publicada. Fins que actualitzis, el modal conserva la mida descrita anteriorment.Des de la versió 0.5.0, el modal s'ajusta per si mateix al flux de verificació redissenyat una vegada que la pàgina informa del seu disseny mitjançant un [missatge `didit:layout`](https://docs.didit.me/ca/integration/web-sdks/incontext-iframe#ajusta-la-mida-de-l’iframe-amb-diditlayout):| Amplada de la finestra | Modal (des de la versió 0.5.0) |
| - | - |
| 1024px o més | 960px per 660px en tots els passos, com a màxim el 90% de l'amplada i l'alçada de la finestra |
| De 541px a 1023px | 500px d'amplada i tan alt com el contingut de la pàgina, com a màxim el 90% de l'alçada de la finestra |
| 540px o menys | Pantalla completa |- **Mida inicial, des de la versió 0.5.0:** fins que la pàgina informi del seu disseny, i per a les pàgines que mai ho facin, el modal conserva la mida màxima existent de 500px per 700px. Continua ajustant-se a les finestres curtes i ocupa tota la pantalla a 540px o menys.
- **Botó de tancament, des de la versió 0.5.0:** un cercle de 44px sobre la barra superior de la pàgina. Segueix el tema clar o fosc de la pàgina i es mou a l'esquerra en els idiomes d'escriptura de dreta a esquerra.
- **Mode incrustat, des de la versió 0.5.0:** continua ocupant el seu element amfitrió, com abans (consulta [Mode incrustat](#mode-incrustat)).
- **URL de verificació, des de la versió 0.5.0:** l'SDK afegeix `sdk_presentation` (`modal` o `embedded`) i, en un modal, `sdk_close_button` (`true` o `false`, segons `showCloseButton`), perquè la pàgina sàpiga com es mostra.
- **Esdeveniments, des de la versió 0.5.0:** l'SDK gestiona `didit:layout` per si mateix i no el passa a `onEvent`.No hi ha res a configurar, i totes les opcions existents continuen funcionant.***## Mode incrustatEl mode incrustat no utilitza el límit de 500px per 700px del modal. L'SDK ocupa el contingut de caixa de l'element amfitrió, així que assigna a aquest element una alçada explícita o resolta d'una altra manera:```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'
  }
});
```Si l'amfitrió no té una alçada resolta, l'iframe incrustat tampoc tindrà una alçada utilitzable. Canvia la mida de l'amfitrió quan canviï el teu disseny; l'SDK continuarà omplint-lo automàticament.***## Resultats de la verificacióL'SDK retorna tres tipus de resultats:### CompletatEl flux de verificació ha finalitzat (aprovada, pendent o rebutjada).```typescript theme={null}
{
  type: 'completed',
  session: {
    sessionId: 'session-uuid',
    status: 'Approved' | 'Pending' | 'Declined'
  }
}
```> [!NOTE]
>
> El tipus TypeScript declara `'Approved' | 'Pending' | 'Declined'`, però el valor es passa tal com el retorna l'estat de la sessió del flux allotjat. També pots rebre altres estats, com ara `In Review`. `Pending` és el valor de reserva de l'SDK quan el flux no ha informat cap estat. Tracta `status` com una pista i fes servir el [webhook](https://docs.didit.me/ca/integration/webhooks.md) com a decisió canònica.### Cancel·latL'usuari ha tancat la modal de verificació. `session` s'inclou quan ja es coneixia un `sessionId` (pot ser `undefined` si l'usuari ha cancel·lat abans que l'iframe n'informés cap).```typescript theme={null}
{
  type: 'cancelled',
  session: {
    sessionId: 'session-uuid',
    status: 'Pending'
  }
}
```### FallatS'ha produït un error durant la verificació.```typescript theme={null}
{
  type: 'failed',
  error: {
    type: 'sessionExpired' | 'networkError' | 'cameraAccessDenied' | 'unknown',
    message: 'Your verification session has expired.'
  }
}
```***## Gestió de l'estatPots observar l'estat de l'SDK per a una interfície personalitzada:```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);
```***## Referència de l'API### DiditSdk.sharedLa instància única de l'SDK.### Mètodes| Mètode | Descripció |
| - | - |
| `startVerification(options)` | Inicia el flux de verificació |
| `submitEvent(options)` | Posa en cua un esdeveniment d'usuari final per al monitoratge d'esdeveniments amb un token de monitoratge |
| `close()` | Tanca programàticament la modal de verificació |
| `destroy()` | Destrueix la instància de l'SDK i neteja els recursos |### Propietats| Propietat | Tipus | Descripció |
| - | - | - |
| `state` | `DiditSdkState` | Estat actual de l'SDK |
| `configuration` | `DiditSdkConfiguration \| undefined` | Configuració activa (s'estableix mentre hi ha una verificació en curs) |
| `isPresented` | `boolean` | Indica si la modal de verificació és oberta |
| `errorMessage` | `string \| undefined` | Missatge d'error (s'estableix quan l'estat és `error`); un llançament fallit es manté a `error` fins que tornis a iniciar |### Callbacks| Callback | Paràmetres | Descripció |
| - | - | - |
| `onComplete` | `(result: VerificationResult)` | Es crida quan finalitza la verificació |
| `onStateChange` | `(state: DiditSdkState, error?: string)` | Es crida en cada canvi d'estat |
| `onEvent` | `(event: VerificationEvent)` | Es crida en els esdeveniments de verificació detallats |***## Esdeveniments granularsFes el seguiment del progrés de la verificació amb el callback `onEvent`:```typescript theme={null}
DiditSdk.shared.onEvent = (event) => {
  console.log('Event:', event.type, event.data);
};
```### Referència d'esdeveniments| Esdeveniment | Descripció | Payload de dades |
| - | - | - |
| `didit:ready` | La pàgina és a punt i el sessionId està disponible | `{ sessionId }` |
| `didit:started` | L'usuari ha començat la verificació | `{ sessionId? }` |
| `didit:step_started` | Ha començat un pas de la verificació | `{ step, sessionId? }` |
| `didit:step_completed` | Un pas s'ha completat correctament | `{ step, nextStep?, sessionId? }` |
| `didit:step_changed` | Ha canviat el pas actual | `{ step, previousStep?, sessionId? }` |
| `didit:media_started` | Ha començat la captura de càmera o de mitjans | `{ step, mediaType }` |
| `didit:media_captured` | S'ha capturat una foto o un vídeo | `{ step, isAuto }` |
| `didit:document_selected` | L'usuari ha seleccionat el tipus de document i el país | `{ documentType, country }` |
| `didit:verification_submitted` | Les dades s'han enviat per al seu processament | `{ step, sessionId? }` |
| `didit:code_sent` | S'ha enviat el codi d'un sol ús | `{ step, channel?, codeSize?, sessionId? }` |
| `didit:code_verified` | S'ha verificat el codi d'un sol ús | `{ step, sessionId? }` |
| `didit:status_updated` | Ha canviat l'estat de la sessió | `{ status, previousStep?, sessionId? }` |
| `didit:completed` | El flux de verificació s'ha completat | `{ sessionId?, status?, country?, documentType? }` |
| `didit:cancelled` | L'usuari ha cancel·lat la verificació | `{ sessionId? }` |
| `didit:error` | S'ha produït un error | `{ error: string, step?, sessionId? }` |
| `didit:close_request` | L'usuari ha demanat tancar el modal | (sense dades) |### Connexió perdudaSi la connexió de l'usuari es perd, la pàgina de verificació cobreix el flux amb una pantalla «Sense connexió a internet» en lloc de deixar un pas carregant.
Continua comprovant-ho en segon pla i tanca la pantalla automàticament tan aviat com Didit torni a ser accessible, i l'usuari continua des del pas on era.
Dins del modal del SDK o d'un iframe, la pantalla també ofereix **Exit Verification**: la pàgina envia aleshores `didit:error` amb `error: "network_error"`, seguit de `didit:cancelled`, i el SDK tanca el modal i crida `onComplete` amb `type: "cancelled"`.A partir de la versió 0.5.0, el missatge `didit:layout` de la pàgina dimensiona el modal i no arriba a `onEvent`. Si en canvi incrustes la pàgina amb el teu propi iframe, consulta [Dimensiona l'iframe amb `didit:layout`](https://docs.didit.me/ca/integration/web-sdks/incontext-iframe#ajusta-la-mida-de-l’iframe-amb-diditlayout).### Valors de pasEl camp `step` pot ser un dels següents:- `document_selection` - Selecció del tipus de document
- `document_front` - Cara frontal del document
- `document_back` - Cara posterior del document
- `face` - Verificació facial/prova de vida
- `email` - Verificació de correu electrònic
- `phone` - Verificació de telèfon
- `poa` - Comprovant de domicili
- `questionnaire` - Pas de qüestionari### Valors de canalEl camp `channel` de `code_sent` pot ser:- `email` - Codi enviat per correu electrònic
- `sms` - Codi enviat per SMS
- `whatsapp` - Codi enviat per WhatsApp### Mida del codiEl camp `codeSize` de `code_sent` indica la longitud del codi d'un sol ús (per exemple, 4 o 6 dígits).***## Tipus de 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.