Review | FrankieOne | Documentation

The Review Module provides two distinct review screens:

Manual Flow Review: Allows users to review entered details before verification
OCR Review: Enables review and correction of OCR-extracted information

Manual Flow Review

Overview

The Manual Flow Review screen presents two main sections:

Personal Details: Name, date of birth, and address
Document Details: Information for each captured ID

Users can edit information by clicking the respective “Edit” buttons to return to the corresponding input screens.

Implementation Guide

Initialize the Component

1 const manualReview = oneSdk.component('form', {
2   name: "REVIEW",
3   type: "manual"
4 });

Mount the Component

1 manualReview.mount("#form");

Add HTML Container

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

Configuration Options

Basic Configuration

1 {
2   name: "REVIEW",    // Screen name
3   type: "manual"     // Flow type
4 }

Advanced Configuration

By default, the Review screen only shows submitted form details. To display specific details before submission, pass personal or documents configurations. These settings affect both review and edit screens.

The personal and documents configs follow the same structure as their respective modules. See the Personal Details and Document Upload module documentation for details.

title='Passing Personal and Documents Config'

1 {
2   name: "REVIEW",
3   type: "manual",
4   personal: { /* Personal details config — see Personal Details module */ },
5   documents: { /* Document details config — see Document Upload module */ }
6 }

Details can also be hidden or made read-only

title='Hide or Make Read Only'

1 {
2   name: "REVIEW",
3   type: "manual",
4   readOnlyForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID'],
5   hiddenForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID']
6 }

Verification Flow

![Verification Flow](/home/runner/work/config-api-documentation/config-api-documentation/fern/pages/v2.0.0/OneSDK V2/implementation-guide/module/onesdk-ekyc-form/attachments/image-20241016-015259.png)

Verification Process

When verify: true:

User details are saved
Verification check runs automatically
Loading screen appears during check
Result screen displays based on check outcome

To customize the result screen, set customResult: true to prevent default screens from mounting. Then handle these events to show your own screens:

form:review:success
form:review:failed
form:review:partial
form:review:pending

Custom Result Handling

1 // Initialize review component with custom result handling enabled
2 const review = oneSdk.component("form", {
3   name: "REVIEW",
4   type: "manual",
5   customResult: true // Prevents default result screens from mounting
6   verify: true // Custom result only applies for verify: true
7 });
8 
9 // Create success screen component to show after successful verification
10 const success = oneSdk.component("form", {
11   name: "RESULT",
12   state: "SUCCESS",
13   title: { label: "Complete" },
14   descriptions: [{ label: "Process is now complete. You can close the page" }],
15   creditHeaderIssueTitle: {
16     label: "Customized Credit Header Issue Title for Success",
17     style: {
18       "ff-note-title": {
19         // Add style for credit header title
20       },
21     },
22   },
23   creditHeaderIssueDescriptions: [
24     {
25       label:
26         "Customized Credit Header Issue Descriptions Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Aliquam Eget Diam Eu Arcu",
27     },
28   ],
29   style: {
30     "ff-note-description": {
31       // Add style for credit header description
32     },
33   },
34 });
35 
36 // Create fail screen component to show after failed verification
37 const failed = oneSdk.component("form", {
38   name: "RESULT",
39   state: "FAILED",
40   title: { label: "Failed" },
41   descriptions: [{ label: "Process is failed. Please try again." }],
42   creditHeaderIssueTitle: {
43     label: "Customized Credit Header Issue Title for Failure",
44   },
45   creditHeaderIssueDescriptions: [
46     {
47       label:
48         "Customized Credit Header Issue Descriptions Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Aliquam Eget Diam Eu Arcu",
49     },
50     { label: "Another row of text here" },
51   ],
52 });
53 
54 // Create partial screen component to show after partially failed verification
55 const partial = oneSdk.component("form", {
56   name: "RESULT",
57   state: "PARTIAL",
58   title: { label: "Unable to Verify" },
59   descriptions: [{ label: "Please check the information that you’ve entered and try again." }],
60   creditHeaderIssueTitle: {
61     label: "Customized Credit Header Issue Title for Partial Failure",
62   },
63   creditHeaderIssueDescriptions: [
64     {
65       label:
66         "Customized Credit Header Issue Descriptions Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Aliquam Eget Diam Eu Arcu",
67     },
68     { label: "Another row of text here" },
69   ],
70 });
71 
72 // Listen for successful verification and mount success screen
73 review.on('form:review:success', () => {
74   success.mount("#form"); // Mount success component in place of review screen
75 });
76 
77 // Listen for failed verification and mount failed screen
78 review.on('form:review:failed', () => {
79   failed.mount("#form"); // Mount failed component in place of review screen
80 });
81 
82 // Listen for partial verification and mount partial screen
83 review.on('form:review:partial', () => {
84   partial.mount("#form"); // Mount partial component in place of review screen
85 });

Event Handling

form:review:loaded

Emitted when Review screen initializes

form:review:partial

Triggers when some checks succeed but others fail

form:review:ready

Fires when submit button is clicked

OCR Review

Overview

The OCR Review screen allows users to verify and correct information extracted through OCR or IDV modules.

Implementation Guide

With IDV Flow

With OCR Flow

1 const idv = oneSdkInstance.flow('idv');
2 const review = oneSdkInstance.component("form", {
3   name: "REVIEW",
4   type: "ocr"
5 });
6 
7 idv.mount("#form");
8 
9 idv.on('results', () => {
10   review.mount("#form");
11 });
12 
13 review.on('form:review:ready', async () => {
14   try {
15     let res = await oneSdkInstance.individual().submit({ verify: true });
16   } catch(e) {
17 			  onsole.error(e);
18   }
19   setLoading(false);
20 
21   result.mount('#form');
22 });

Document Field Configuration

Configuration Structure

Document fields are configured per document type, with country-specific configurations available.

Document Configuration Example

1 documents: [
2   {
3     type: 'DRIVERS_LICENCE',
4     countries: {
5       default: {
6         default: {
7           fields: [
8             {
9               fieldType: 'select',
10               name: 'region',
11               label: `Driver's Licence State/Territory`,
12               rules: {
13                 required: {
14                   value: true,
15                   message: 'Please select a state/territory'
16                 }
17               }
18             },
19             // Additional fields...
20           ]
21         }
22       }
23     }
24   }
25 ]

Field Configuration Reference

Available Field Types

Driver's License

State/Territory: select
License Number: input
Card Number: input

Medicare Card

Card Color: select
Card Number: input
Position: input
Expiry: date

Field Properties

Property	Description
fieldType	Input type (`select`, `input`, `date`)
dataType	Data format (typically `text`)
label	Display label
name	Field identifier
hide	Toggle field visibility
helperText	Additional guidance text
placeholder	Input placeholder text

Validation Rules

1 rules: {
2   required: {
3     value: true,
4     message: "Field is required"
5   },
6   minLength: {
7     value: 1,
8     message: "Minimum 1 character"
9   },
10   maxLength: {
11     value: 15,
12     message: "Maximum 15 characters"
13   },
14   pattern: {
15     value: /^[a-zA-Z]+$/,
16     message: "Letters only"
17   }
18 }

Confirmation and button

Styling

confirmation-submit-button To change checkbox text and button, we can override instruction and cta properties, for example:

1     const reviewOcr = oneSdk.component('form', {
2       name: 'REVIEW',
3       type: 'ocr',
4       verify: true,
5       instruction: {
6         content: [
7           {
8             label: 'I confirm that all provided information is accurate. The button is green now'
9           }
10         ]
11       },
12       cta: {
13         label: 'Looks good with a new color!',
14         style: {
15           "ff-button": {
16             "backgroundColor": "green"
17           }
18         }
19       }
20     });

will override the default rules and render overridden checkbox text and button

Handling Network Issues during submission

To handle network failures during review screen submission, OneSDK gives the opportunity to retry submissions up to three times, with clear error messages guiding them through network issues, ensuring a smoother and more transparent user experience.

To change properties of retry mechanism, you can override cta property by:

1     const retryOcr = oneSdk.component('form', {
2       name: 'REVIEW',
3       type: 'ocr',
4       cta: {
5         retryAmount: RETRY_AMOUNT,
6         timeoutRetryMiliseconds: RETRY_COUNT_IN_MS,  
7         retryAttemptString: RETRY_ATTEMPT_STRING,
8         maxRetryAttemptedString:  MAX_RETRY_ATTEMPTED_STRING     
9       }
10     });

where:

retryAmount: number of retry user can have, default is 3

timeoutRetryMiliseconds: number of miliseconds until retry button is clickable again, default is 3000

retryAttemptString: a string shown under Submit button to guide your user to retry, default is “Error submitting form. Give it a moment to retry.”

maxRetryAttemptedString: a string shown under Submit button where user has tried more than retryAmount, default is “Something went wrong, please contact customer service or try again in a few moments.”