Documentation

Pick and Embed screens

Suggest Edits

With OneSDK modular forms, you have the flexibility to pick and embed the screens into your onboarding application to optimise your UX and increase pass rates. On this page, we will cover some of the common use cases of optimising the UX with modular forms.

For more details on how to use OneSDK in general, please visit the following pages:

Preload OCR Review form on an existing entity

OCR extraction is not 100% accurate and it is important to give users a chance to review and update the OCR details before running a verification check, to increase the pass rate.

If you have an existing entity, you can load the OneSDK OCR review form on the entity so that user can review and update the details. The OCR Review form will automatically preload existing entity data.

If you don't have an entity but have captured OCR details on your end, you can simply create an entity with the OCR data, and then use OneSDK OCR review form.

In the following sample code, we demonstrate how to load the OCR review form then run a verification check and show a success or failure result screen in OneSDK.

Step 1: Create an entity

Create an entity via FrankieOne API with all the previously extracted/ captured details including name, dob, address, id number, etc. You just need to simply pass the details in the body request when you create an entity.

{
  "addresses": [
    {
      "addressType": "RESIDENTIAL1",
      "country": "AUS",
      "longForm": "42a Test Eagle Road, Testville, TST 123-TST, Testalia",
      "postalCode": "123-TST",
      "region": "Test County",
      "state": "TS",
      "streetName": "Test Eagle West",
      "streetNumber": "42a",
      "streetType": "Road",
      "suburb": "Testburb",
      "unitNumber": "Suite 1006",
    }
  ],
  "dateOfBirth": {
    "dateOfBirth": "1978-11-12",
  },
  "entityProfile": "auto",
  "entityType": "INDIVIDUAL",
  "identityDocs": [
    {
      "country": "AUS",
      "idExpiry": "2020-02-01",
      "idIssued": "1972-11-04",
      "idNumber": "123456789",
      "idType": "DRIVERS_LICENCE",
      "region": "VIC",
      "extraData": [
        {
          "kvpKey": "document_number",
          "kvpType": "general.string",
          "kvpValue": "P5678941"
        }
      ]
    }
  ],
  "name": {
    "displayName": "Jane Cecily Smith",
    "familyName": "Smith",
    "givenName": "Jane",
    "middleName": "Cecily"
  },
}

Step 2: Replace entityId

Grab the entityId from step 1 and replace it in the sample html code at the bottom of the page.

📘

Using external reference

Instead of using the entity id, you can associate a customer_reference key-value pair with the entity and retrieve the entity information based on the reference. See customer reference setting for details.

Step 3: Replace your API Credentials

Replace your Customer ID, Customer child ID, and API key in the code. If you don't have a Customer child ID, simply remove it from the code.

Step 4 (Optional): Google Map API key

If you have a Google Map API key, replace it in the code, so that users can use auto-search in the address field. If you don't set any key, auto search doesn't work but users will still be able to enter an address manually.

Step 5 (Optional): Set an entity profile

If you have set up a specific recipe in your account, set it in the code for the verification check.

🚧

API Credentials

Do not publish your credentials in your front-end application for security reasons. The following sample HTML codes are for illustration only. You need to create a session token from your server side and only pass the token to your front-end applicattion.

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"/>
  <title>oneSdk onboarding</title>
  <script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>

  <script type="module">
    (async function startOneSdk() {
      
      // Set your credentials
      const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
      const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

      const ENTITY_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"; // Replace your entityId here

      const tokenResultRaw = await fetch('https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session', {
        method: 'POST',
        headers: {
          authorization: 'machine ' + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          permissions: {
            preset: 'one-sdk',
            entityId: ENTITY_ID // alternatively can use reference key with customer_reference value
          },
        }),
      });

      const sessionObjectFromBackend = await tokenResultRaw.json();

      const oneSdk = await OneSdk({
            session: sessionObjectFromBackend,
            mode: "development",
            recipe: {
              form: {
                provider: {
                  name: 'react',
                 // googleApiKey: "YOUR_GOOGLE_API_KEY"
                },
              }
            }
          });
      oneSdk.on('*', console.log);

      const oneSdkIndividual = oneSdk.individual();
      oneSdkIndividual.setProfileType('auto'); // Set entity Profile for verification check
      
      const review = oneSdk.component("form", {
        name: "REVIEW",
        type: "ocr",
      });
      
      const loading = oneSdk.component("form", {
        name: "LOADING", 
        title: {label: "Verifying..."}, 
        descriptions: [{label: "This can take up to a few seconds. Please do not close this page."}]
      });
      
      const success = oneSdk.component("form", {
          name: "RESULT",
          type: "manual",
          state: 'SUCCESS',
          title: {label:'Complete'},
          descriptions: [
            {label:'You are all done. You can close the page'}
          ],
          cta:{label: 'Close'}
        });
      
      const fail = oneSdk.component("form", {
        name: "RESULT",
        type: "manual",
        state: 'FAIL',
        title: {label:'Ooops. Something went wrong'},
        descriptions: [
          {label:'We were not able to verify your details'}
        ],
        cta:{label: 'Contact us'}
      });

      review.mount("#form-container");
      
      review.on("form:review:ready", async () => {
        loading.mount("#form-container");
        
        const checkResults = await oneSdkIndividual.submit({
          verify: true
        });
        
        loading.unmount();
        
        if (checkResults.status.type == "passed") {
          success.mount("#form-container");
        }
        else
        {
          fail.mount("#form-container");
        }
      });
      
      success.on("form:result:success", async () => {
        // Proceed with the next step in your application
      });
      
      fail.on("form:result:failed", async () => {
        // Do the next step, either re-try again, or ask user to contact you
      });

    })()
  </script>
</head>
<body style="background-color: white">
  <div id="form-container" style="top: 0;left: 0; width: 100%; height: 100%;"></div>
</body>
</html>

Updated 5 months ago