# ID Capture

ID Capture is a core onboarding step. It collects high-quality images of a user’s government-issued ID. For two-sided IDs, both the front and back are captured. The module also extracts data using optical character recognition (OCR) and runs authenticity checks.

<Image align="center" border={false} src="https://files.readme.io/acde0126969e9307483f874d9ab62d61f8eb67e36fb102b82c9c1dece620a4b6-ScreenRecording2025-11-17at15.04.40-ezgif.com-video-to-gif-converter.gif" />

***

## Where it fits in the flow

In an onboarding flow or workflow, **ID Capture** usually appears immediately after consent and document type selection and before Selfie Capture and final submission.

Once the user provides valid images, the flow continues to data extraction, document liveness/authenticity checks, and any downstream logic (such as Face Match with later selfie).

***

## User experience flow

The experience guides users from preparation to a successful ID capture. After granting camera permission, users see a short tutorial. During capture, the system evaluates framing, glare, blur, and edge alignment in real time. When requirements are met, the ID is auto-captured. If auto-capture doesn’t trigger in time, manual capture is available. In this case, images are then uploaded for quality checks with retry options on failure.

<br />

<Image align="center" border={false} src="https://files.readme.io/d955fbcd4e3d7efa4d3a759e586db5698cb47d2436a39015d782868398fb1813-User_Flow.png" />

<br />

***

## Full Flow Map

This diagram shows all **ID Capture** screens, from tutorial and permissions through front/back auto/manual capture, uploading, and feedback (success/error).

<Image align="center" border={false} src="https://files.readme.io/9badfd5e534289a7a73032982530041e989b15dd0a9f24423df8de30644c58b1-full-flow-map.png" />

<br />

***

## Happy Path (Light & Dark)

The ideal user journey occurs when the ID is captured successfully with no interruptions.

The happy path represents the smoothest version of the experience:

* The user grants camera access
* The user follows the tutorial
* The system detects proper alignment and lighting
* The ID is captured automatically without requiring retries or manual intervention.

In these images, both light and dark mode previews are included so teams can validate visual consistency across themes.

<Image align="center" border={false} caption="Light mode" src="https://files.readme.io/258f1b735b6ee7eff1ae2b8442003cacc39e431bb2a63e301114933613a60c3f-happy-path-light.png" />

<Image align="center" border={false} caption="Dark mode" src="https://files.readme.io/dd306cc1947356b844397bf8d7f849b505b230db0066b6a262ac501a36126cdd-happy-path-dark.png" />

<br />

***

## Best practices for design and implementation

**✅ Do**

* Keep instructions short and actionable (for example, “Place your ID on a flat surface. Avoid glare”).
* Use a high-contrast, uncluttered background. Ensure text remains readable.
* Guide with real-time feedback, like, “Move closer,” “Avoid glare,” or “Show all corners.”
* Provide retry options and clear error messages (for example, “Wrong document side”).
* Respect accessibility with voiceover labels, adequate tap targets, and captions.

**❌ Don’t**

* Don’t reduce overlay opacity so much that the capturing frame edges become hard to see
* Don’t rely solely on color for status. Add icons/text.
* Don’t skip critical error states like glare, blur, or cut-off).
* Don’t let UI elements obstruct the camera area.
