> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# IDV with Review Screen

<Callout icon="star" color="#3DD892" iconType="regular">
  Instead of building your own flow, it's *highly recommended* to fork an existing flow from the public sample codes [found here <Icon icon="arrow-up-right-from-square" size={12} />](https://github.com/FrankieOne/frontend-onesdk-public-sample-codes/)
</Callout>

## Overview of this Example

<CardGroup cols={2}>
  <Card title="Features" icon="list-check">
    * OneSDK eKYC-only flow
    * Country-specific form fields
    * Multi-step verification process
    * Retry handling mechanism
  </Card>

  <Card title="Supported Countries" icon="globe">
    * Philippines (PHL)
    * Australia (AUS)
    * Singapore (SGP)
    * China (CHN)
  </Card>
</CardGroup>

## Implementation Guide

<Steps>
  <Step title="Initialize OneSDK">
    ```javascript theme={null}
    const oneSDKInstance = await OneSdk({
      // Pass session object received from backend for authentication
      session: sessionObjectFromBackend,
      // Set environment mode to production
      mode: "production",
    });
    ```
  </Step>

  <Step title="Set Up Individual Profile">
    ```javascript theme={null}
    const oneSdkIndividual = oneSDKInstance.individual();
    oneSdkIndividual.setProfileType("auto");
    ```
  </Step>

  <Step title="Configure Form Components">
    <AccordionGroup>
      <Accordion title="Creating OneSDK components">
        ```typescript theme={null}
         // Initialize IDV (Identity Verification) flow
        const idv = oneSdkInstance.flow('idv');

          	// create OCR Review Screen component
          const review = oneSdkInstance.component("form", {
            name: "REVIEW",
            mode: "individual",
            type: "ocr",
          });

          	// create Loading component
          	const extract_loading = oneSdkInstance.component("form", {
            	name: "LOADING",
            	title: {label: "Extracting data..."},
            	descriptions: [
            		{
              		label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser."
            		}
            	]
          	});

        // Create result component
          const result = oneSdkInstance.component('form', {
            name: 'RESULT',
            mode: 'individual',
            type: 'manual',
            state: 'SUCCESS',
            title: { label: "Thanks, you're all done" },
            cta: null,
          });
        ```
      </Accordion>

      <Accordion title="Mounting the component and event handling">
        ```typescript theme={null}
        // Listen for loading state changes and update UI accordingly
        idv.on('loading', (l: boolean) => {
          setLoading(l);
          		if (l) {
          			extract_loading.mount('#form');
          		}
        });

        // Handle IDV completion process, to mount Review OCR Screen
        const handleIDVFinished = () => {
          		extract_loading.unmount();
          		review.mount(appContainer);
        }

          	review.on('form:review:ready', async () => {
          	setLoading(true);

          	try {
          	  let res = await oneSdkInstance.individual().submit({ verify: true });
          	} catch(e) {
          			console.error(e);
          	}
          	setLoading(false);

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

        // Listen for IDV results and process completion
        idv.on('results', async () => {
          handleIDVFinished();
        });

        // Handle any IDV errors by showing failure form
        idv.on('error', (e: any) => {
          // handle handle case with your custom logic here
          console.error(e);
        });

        // Mount IDV form to DOM element with id "form"
        idv.mount("#form");
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>