Document

Description

You can use the Manual Document screen to capture ID details manually from end users. With the Document screen, you have the ability to capture one or multiple IDs.

Default Document screen

One ID flow:

Two IDs flow:

Configuration

The configuration of the Document page includes two main items: General and Document.

The document section follows a similar pattern as the other screens to configure and customise input fields, which is explained below.

1- General

Multiple IDs

You can set your manual flows to have the user submit more than one ID document using the numberOfIDs parameter.

After submitting the first document, the flow will go to another document selection screen for the user to select another document type. Once the required number of documents has been submitted, the user will proceed to the next page in the flow.
To customise what ID types to be displayed in the ID Selection screen, you can simply specify a list of IDs:

const form_document = oneSdk.component("form", {
  name: "DOCUMENT",
  type: "manual",
  numberOfIDs: 2,
  documents: [
    {
      type: "DRIVERS_LICENCE"
  	},
    {
      type: "NATIONAL_HEALTH_ID"
  	},
 	 	{
    	type: "PASSPORT"
		}
	]
});

For more details on the Document configuration, read the following section.

2- Documents

Document screen for the manual flow is a combination of an ID selection screen and an ID details screen.

You can configure an array of document types as well as an array of fields for each document type.

When you select a document type in the ID selection screen, it proceeds to the next page and displays a set of fields. For each document type, you can customise the fields, by passing an array of fields, following the below pattern. In the array, only specify the fields you need to configure/customise and skip the rest.

📘

Internationalisation

The configuration explained above is a generic configuration applied to all countries and states, by default. The OneSDK modular form will also allow you to overwrite the configuration for any specific country to meet international requirements. To learn more, please visit International IDs.

Sample code

const form_document = oneSdk.component("form", {
  name: "DOCUMENT",
  type: "manual",
  numberOfIDs: 2,
  title: {label: "Choose Your ID"}
  documents: [
    {
      type: "DRIVERS_LICENCE",
      label: "DL",
      countries: {
        default: {
          default: {
            fields: [
              {
                fieldType: 'select',
                hide: false,
                dataType: 'text',
                label: `Driver's Licence State or Territory`,
                name: 'region',
                rules: {
                  required: {
                    value: true,
                    message: `Please enter your driver's licence number`,
                  },
                  minLength: {
                    value: 1,
                    message: `Licence number must be at least 1 digits`,
                 	},
                  maxLength: {
                    value: 15,
                    message: `Licence number must not exceed 15 characters`,
                  },
                  pattern: { ... }
                }
              },
           		{
              	fieldType: 'input',
                hide: false,
               	dataType: 'text',
                label: 'Licence Number',
                name: 'idNumber',
                rules: {
                    ...
                },
              },
              {
                fieldType: 'input',
                hide: false,
                dataType: 'text',
                label: 'Card Number',
                name: 'extraData.document_number',
                rules: {
                    ...
                },
              },
            ]
          }
   			}
    	}
  },
  {
    type: "PASSPORT",
    countries: {
        default: {
          default: {
            fields: [
              ....
            ]
          }
        }
    }
  }
]
});

Events

Styling customisation

You can use the following classes to customise the styling for different elements of the page. These CSS classes applies to the common elements across all the screens. If you want to specifically customise a specific page, you can use the above configuration to overwrite it.

The following code shows you how to style a specific element on the page, in this example the button's background color will be green, instead of the default blue.

<style> 
    #<you_div_container> .ff-button {
      background-color: green;
    }
 </style>