Skip to main content
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

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.
Manual Review Screen

​
Implementation Guide

1

Initialize the Component

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

Mount the Component

manualReview.mount("#form");
3

Add HTML Container

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

​
Configuration Options

{
  name: "REVIEW",    // Screen name
  type: "manual"     // Flow type
}
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.
Passing Personal and Documents Config
{
  name: "REVIEW",
  type: "manual",
  personal: { /* Personal details config — see Personal Details module */ },
  documents: { /* Document details config — see Document Upload module */ }
}
Details can also be hidden or made read-only
Hide or Make Read Only
{
  name: "REVIEW",
  type: "manual",
  readOnlyForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID'],
  hiddenForms: ['personal', 'DRIVERS_LICENCE', 'PASSPORT', 'NATIONAL_HEALTH_ID']
}
Verification Flow
When verify: true:
  1. User details are saved
  2. Verification check runs automatically
  3. Loading screen appears during check
  4. 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
// Initialize review component with custom result handling enabled
const review = oneSdk.component("form", {
  name: "REVIEW",
  type: "manual",
  customResult: true // Prevents default result screens from mounting
  verify: true // Custom result only applies for verify: true
});

// Create success screen component to show after successful verification
const success = oneSdk.component("form", {
  name: "RESULT",
  state: "SUCCESS",
  title: { label: "Complete" },
  descriptions: [{ label: "Process is now complete. You can close the page" }],
  creditHeaderIssueTitle: {
    label: "Customized Credit Header Issue Title for Success",
    style: {
      "ff-note-title": {
        // Add style for credit header title
      },
    },
  },
  creditHeaderIssueDescriptions: [
    {
      label:
        "Customized Credit Header Issue Descriptions Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Aliquam Eget Diam Eu Arcu",
    },
  ],
  style: {
    "ff-note-description": {
      // Add style for credit header description
    },
  },
});

// Create fail screen component to show after failed verification
const failed = oneSdk.component("form", {
  name: "RESULT",
  state: "FAILED",
  title: { label: "Failed" },
  descriptions: [{ label: "Process is failed. Please try again." }],
  creditHeaderIssueTitle: {
    label: "Customized Credit Header Issue Title for Failure",
  },
  creditHeaderIssueDescriptions: [
    {
      label:
        "Customized Credit Header Issue Descriptions Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Aliquam Eget Diam Eu Arcu",
    },
    { label: "Another row of text here" },
  ],
});

// Create partial screen component to show after partially failed verification
const partial = oneSdk.component("form", {
  name: "RESULT",
  state: "PARTIAL",
  title: { label: "Unable to Verify" },
  descriptions: [{ label: "Please check the information that you've entered and try again." }],
  creditHeaderIssueTitle: {
    label: "Customized Credit Header Issue Title for Partial Failure",
  },
  creditHeaderIssueDescriptions: [
    {
      label:
        "Customized Credit Header Issue Descriptions Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Aliquam Eget Diam Eu Arcu",
    },
    { label: "Another row of text here" },
  ],
});

// Listen for successful verification and mount success screen
review.on('form:review:success', () => {
  success.mount("#form"); // Mount success component in place of review screen
});

// Listen for failed verification and mount failed screen
review.on('form:review:failed', () => {
  failed.mount("#form"); // Mount failed component in place of review screen
});

// Listen for partial verification and mount partial screen
review.on('form:review:partial', () => {
  partial.mount("#form"); // Mount partial component in place of review screen
});

​
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

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

​
Implementation Guide

const idv = oneSdkInstance.flow('idv');
const review = oneSdkInstance.component("form", {
  name: "REVIEW",
  type: "ocr"
});

idv.mount("#form");

idv.on('results', () => {
  review.mount("#form");
});

review.on('form:review:ready', async () => {
  try {
    let res = await oneSdkInstance.individual().submit({ verify: true });
  } catch(e) {
			  onsole.error(e);
  }
  setLoading(false);

  result.mount('#form');
});

​
Document Field Configuration

Configuration Structure
Document fields are configured per document type, with country-specific configurations available.
documents: [
  {
    type: 'DRIVERS_LICENCE',
    countries: {
      default: {
        default: {
          fields: [
            {
              fieldType: 'select',
              name: 'region',
              label: `Driver's Licence State/Territory`,
              rules: {
                required: {
                  value: true,
                  message: 'Please select a state/territory'
                }
              }
            },
            // Additional fields...
          ]
        }
      }
    }
  }
]

​
Field Configuration Reference

Driver's License

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

Medicare Card

  • Card Color: select
  • Card Number: input
  • Position: input
  • Expiry: date
PropertyDescription
fieldTypeInput type (select, input, date)
dataTypeData format (typically text)
labelDisplay label
nameField identifier
hideToggle field visibility
helperTextAdditional guidance text
placeholderInput placeholder text
rules: {
  required: {
    value: true,
    message: "Field is required"
  },
  minLength: {
    value: 1,
    message: "Minimum 1 character"
  },
  maxLength: {
    value: 15,
    message: "Maximum 15 characters"
  },
  pattern: {
    value: /^[a-zA-Z]+$/,
    message: "Letters only"
  }
}

​
Confirmation and button

​
Styling

confirmation-submit-button To change checkbox text and button, we can override instruction and cta properties, for example: 
    const reviewOcr = oneSdk.component('form', {
      name: 'REVIEW',
      type: 'ocr',
      verify: true,
      instruction: {
        content: [
          {
            label: 'I confirm that all provided information is accurate. The button is green now'
          }
        ]
      },
      cta: {
        label: 'Looks good with a new color!',
        style: {
          "ff-button": {
            "backgroundColor": "green"
          }
        }
      }
    });
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: 
    const retryOcr = oneSdk.component('form', {
      name: 'REVIEW',
      type: 'ocr',
      cta: {
        retryAmount: RETRY_AMOUNT,
        timeoutRetryMiliseconds: RETRY_COUNT_IN_MS,  
        retryAttemptString: RETRY_ATTEMPT_STRING,
        maxRetryAttemptedString:  MAX_RETRY_ATTEMPTED_STRING     
      }
    });
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.”