> ## 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 Verifikasi Identitas Web: JS & Iframe

> SDK KYC, KYB, AML & liveness web Didit: JavaScript, iframe, redirect, atau WebView. Mulai $0.33 per KYC penuh, $10 gratis/bulan, tanpa kontrak.

> [!NOTE]
>
> Panduan ini mencakup Verifikasi identitas. Untuk login pengguna akhir, gunakan [panduan platform Authentication](https://docs.didit.me/id/authentication/overview.md); paket Authentication yang baru bergantung pada rilis.

Integrasikan verifikasi Didit ke dalam aplikasi web Anda. Kami menyediakan tujuh metode integrasi yang sesuai dengan arsitektur dan kebutuhan pengalaman pengguna Anda. Pilih yang sesuai dengan stack Anda.

> [!NOTE]
>
> **Pilih metode integrasi Anda**: Mulai dari iframe no-code yang cepat hingga kontrol pemrograman penuh dengan JavaScript SDK kami, atau plugin siap pakai untuk WordPress, Shopify, dan Salesforce.

***

## Metode Integrasi

| Metode | Waktu Pengaturan | Backend? | Paling Cocok Untuk |
| - | - | - | - |
| [JavaScript SDK](https://docs.didit.me/id/integration/web-sdks/javascript-sdk.md) | 3 menit | Opsional | Kontrol penuh: React/Vue/Angular/Next.js/Nuxt/Svelte/vanilla |
| [InContext (Iframe)](https://docs.didit.me/id/integration/web-sdks/incontext-iframe.md) | \< 1 menit | Opsional | Pengalaman tersemat tanpa pengalihan |
| [Pengalihan](https://docs.didit.me/id/integration/web-sdks/web-redirect.md) | 5 menit | Ya | Kompatibilitas maksimal, alur lintas perangkat |
| [WebView (iOS/Android)](https://docs.didit.me/id/integration/web-sdks/webview-in-ios-android.md) | 15 menit | Ya | Fallback mobile saat tidak ada SDK native yang tersedia |
| [WordPress + WooCommerce](https://docs.didit.me/id/integration/web-sdks/wordpress-woocommerce.md) | 5 menit | Tanpa kode | Situs WordPress, toko WooCommerce |
| [Shopify](https://docs.didit.me/id/integration/web-sdks/shopify.md) | 5 menit | Tanpa kode | Toko Shopify: verifikasi checkout atau akun |
| [Salesforce](https://docs.didit.me/id/integration/web-sdks/salesforce.md) | 10 menit | Tanpa kode | CRM Salesforce: verifikasi rekaman Contact/Lead |

> [!NOTE]
>
> **Rekomendasi**: Untuk aplikasi web produksi, gunakan **JavaScript SDK** untuk UX terbaik dan kontrol pemrograman penuh. Gunakan **InContext iframe** untuk pengaturan tercepat, **Pengalihan** saat verifikasi lintas perangkat diperlukan, dan integrasi khusus **WordPress / Shopify / Salesforce** jika Anda menggunakan platform tersebut.

***

## JavaScript SDK

Didit JavaScript SDK memungkinkan integrasi verifikasi secara terprogram dengan kontrol penuh atas pengalaman pengguna.

**Fitur Utama:**

* Manajemen sesi dan callback untuk event
* Dukungan React, Vue, Angular, NextJS, Nuxt, Svelte, dan vanilla JS
* Dukungan TypeScript penuh
* Mode modal & inline

**Mulai Cepat:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

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'
});
```

→ [**Dokumentasi Lengkap JavaScript SDK**](https://docs.didit.me/id/integration/web-sdks/javascript-sdk.md)

***

## InContext (Iframe)

Sematkan alur verifikasi langsung di dalam aplikasi Anda menggunakan iframe. Pengalaman yang mulus tanpa mengalihkan pengguna dari situs Anda.

**Fitur Utama:**

* UniLink (tanpa backend) - pengaturan dalam \< 1 menit
* API Sesi (dengan backend) - kustomisasi penuh
* Implementasi modal dan inline
* Contoh komponen React

**Mulai Cepat:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>
```

→ [**Dokumentasi Lengkap InContext**](https://docs.didit.me/id/integration/web-sdks/incontext-iframe.md)

***

## Pengalihan

Alihkan pengguna ke halaman verifikasi yang di-hosting Didit. Setelah selesai, pengguna kembali ke URL callback Anda.

**Fitur Utama:**

* Kompatibilitas browser maksimal
* Dukungan verifikasi lintas perangkat
* Integrasi sederhana
* Berfungsi saat akses kamera iframe bermasalah

**Mulai Cepat:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**Dokumentasi Lengkap Pengalihan**](https://docs.didit.me/id/integration/web-sdks/web-redirect.md)

***

## Perbandingan

| Fitur | JavaScript SDK | InContext (Iframe) | Pengalihan |
| - | - | - | - |
| Waktu pengaturan | 3 mnt | \< 1 mnt | 5 mnt |
| Backend diperlukan | Opsional | Opsional | Ya |
| Tetap di domain Anda | Ya | Ya | Tidak |
| Dukungan lintas perangkat | Ya | Ya | Ya |
| Kontrol pemrograman penuh | Ya | Terbatas | Hanya callback |
| Callback event | Waktu nyata | `postMessage` | Hanya callback |
| White Label | Ya | Ya | Ya |
| Kompatibilitas browser | Semua | Semua | Semua |

> [!NOTE]
>
> Ketiga metode mengirimkan hasil akhir yang ditandatangani melalui [webhook](https://docs.didit.me/id/integration/webhooks.md). Perbandingan di atas menjelaskan UX di dalam browser, bukan cara Anda menerima keputusan verifikasi.

***

## Konfigurasi

### Izin Iframe yang Wajib

Untuk integrasi iframe InContext, selalu sertakan izin berikut:

```html theme={null}
allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
```

***

## Repositori Contoh

> [card] [Contoh SDK Web](https://github.com/didit-protocol/sdk-web-examples)
>
> Contoh untuk React, Vue, Angular, Next.js, Nuxt, Svelte, dan vanilla JS

> [card] [Contoh Iframe](https://github.com/didit-protocol/iframe-example)
>
> Contoh iframe UniLink dan API sesi

> [card] [Demo Next.js Lengkap](https://github.com/didit-protocol/didit-full-demo)
>
> Integrasi Next.js dari awal hingga akhir

> [card] [Paket NPM](https://www.npmjs.com/package/@didit-protocol/sdk-web)
>
> `@didit-protocol/sdk-web` di npm

## Terkait

* [Webhook](https://docs.didit.me/id/integration/webhooks.md): terima hasil verifikasi yang ditandatangani di backend Anda
* [Create Session API](https://docs.didit.me/id/sessions-api/create-session.md): endpoint di balik setiap SDK web
* [SDK Native](https://docs.didit.me/id/integration/native-sdks/overview.md): iOS, Android, React Native, Flutter


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