The Manual Document screen enables secure ID capture from your users. You can configure it to collect one or multiple forms of identification, with full customization options.

Manual Document Screen

The Manual Document screen enables secure ID capture from your users. You can configure it to collect one or multiple forms of identification, with full customization options.

Quick Implementation

1<div id="form"></div>

Configuration Options

1const document = oneSdk.component('form', {
2 // Set component name to identify this as document collection screen
3 name: "DOCUMENT",
4 // Use manual input mode rather than OCR scanning
5 type: "manual",
6 // Require user to submit two forms of identification
7 numberOfIDs: 2,
8 // Configure the main heading
9 title: {
10 label: "Choose Your Identification"
11 },
12 // Add explanatory text below the heading
13 descriptions: [
14 {label: 'We need two forms of ID to verify your identity'}
15 ]
16});

Customization Guide

Number of IDs

Configure how many ID documents users must submit:

1numberOfIDs: 2 // Requires two forms of ID

Users will be guided through submitting each required document sequentially.

Page Title

Customize the page header:

1title: {
2 label: "Identity Verification",
3 style: "custom-title-class" // Optional
4}

Add descriptive text to guide users:

1descriptions: [
2 {
3 label: 'Please provide a valid government-issued ID',
4 style: 'ff-description' // Optional styling
5 },
6 {
7 label: 'Accepted formats: passport, driver's license, or national ID',
8 style: 'ff-description'
9 }
10]

Event Handling

Lifecycle Events
  • form:document:loaded (Screen mounted successfully)
  • form:document:ready (User completed document submission)
  • form:document:failed (Screen encountered an error)
Navigation Events
  • form:document:back - User clicked back button
  • form:document:navigate - Navigation occurred

Event Listening Example

Event Handlers
1document.on('form:document:loaded', () => {
2 console.log('Document screen loaded successfully');
3});
4
5document.on('form:document:ready', (data) => {
6// Handle successful document submission
7console.log('Documents submitted:', data);
8});
9
10document.on('form:document:failed', (error) => {
11console.error('Document submission failed:', error);
12});
Best Practice

Always implement error handling for the form:document:failed event to provide a smooth user experience when issues occur.

Implementation Steps

1

Add Container Element

Add a container div to your HTML:

1<div id="form"></div>
2

Initialize Component

Create and configure the document component:

1const document = oneSdk.component("form", {
2 name: "DOCUMENT",
3 numberOfIDs: 1,
4 title: { label: "Choose Your ID" },
5 type: "manual",
6 documents: [
7 {
8 type: 'DRIVERS_LICENCE',
9 countries: {
10 default: {
11 default: {
12 fields: [
13 {
14 name: 'country',
15 options: [
16 {
17 label: 'Australia',
18 value: 'AUS',
19 },
20 {
21 label: 'Singapore',
22 value: 'SGP',
23 },
24 ],
25 },
26 ],
27 },
28 },
29 AUS: {
30 default: {
31 fields: [
32 {
33 name: 'country',
34 options: [
35 {
36 label: 'Australia',
37 value: 'AUS',
38 },
39 ],
40 },
41 ],
42 },
43 },
44 },
45 },
46 {type: "PASSPORT"}
47 ]
48});
3

Mount Component

Mount the component to your container:

1document.mount("#form");
4

Set Up Event Listeners

Add necessary event listeners for your use case:

1document.on("form:document:ready", handleSubmission);

Ensure your HTML element has the correct viewport meta tags for proper mobile rendering:

1<meta
2 name="viewport"
3 content="width=device-width, initial-scale=1.0"
4 charset="UTF-8"
5/>
Built with