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

Basic Setup

Advanced Options

1 const 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

General Settings

Number of IDs

Configure how many ID documents users must submit:

1 numberOfIDs: 2  // Requires two forms of ID

Users will be guided through submitting each required document sequentially.

Page Title

Customize the page header:

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

Description Customization

Add descriptive text to guide users:

1 descriptions: [
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

1 document.on('form:document:loaded', () => {
2   console.log('Document screen loaded successfully');
3 });
4 
5 document.on('form:document:ready', (data) => {
6 // Handle successful document submission
7 console.log('Documents submitted:', data);
8 });
9 
10 document.on('form:document:failed', (error) => {
11 console.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

Add Container Element

Add a container div to your HTML:

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

Initialize Component

Create and configure the document component:

1 const 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 });

Mount Component

Mount the component to your container:

1 document.mount("#form");

Set Up Event Listeners

Add necessary event listeners for your use case:

1 document.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 />

1	const 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	});

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

1	descriptions: [
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	]

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

1	const 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	});

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