Using Smart UI within OneSDK

Suggest Edits

In OneSDK for KYC, we described how you can work with the individual object to update the user details and submit a KYC check. To capture data points from users, such as name, DOB, address, and GovID, there's an option in OneSDK to load a UI screen for manual capture input. OneSDK is using our legacy onboarding widget, Smart UI for manual capture inputs.

📘

Beta release

Smart UI is currently available within OneSDK and is in the beta release. Using OneSDK, you will have the flexibility of using other modules for as well and you don't need to integrate with Smart UI separately.

In this release, the SmartUI will be loaded with a pre-defined configuration, which is only AU with all the accepted ID types including Driver's License, Passport, and Medicare.

For the general release (coming soon), we will add the full configurations and customisations of Smart UI into OneSDK config, so you can apply your own options and styling.

Obtain the results and submit a KYC check

Once you load Smart UI in OneSDK and capture the user details successfully, you will receive a results event. Upon receiving the results event, you can then submit and verify the individual for the KYC check.

Sample code

<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.2-beta/oneSdk.umd.js"></script>
  <script>
    async function startOneSdk() {
      const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
   	  const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

      const tokenResultRaw = await fetch('https://backend.latest.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',
            reference: "<UNIQUE_CUSTOMER_REFERENCE>"
          },
        }),
      });

      const sessionObjectFromBackend = await tokenResultRaw.json();

      const oneSdk = await OneSdk({
            session: sessionObjectFromBackend,
            mode: "development",
            recipe: {
              form: {
                provider: {
                  name: 'legacy',
                  version: 'v4'
                },
              }
            }
          });
      oneSdk.on('*', console.log);

      const oneSdkIndividual = oneSdk.individual();
      oneSdkIndividual.on('*', console.log);
    
      const smartUI = oneSdk.component("form");

      smartUI.on("*", (message) => {
        console.log(message);
      });

      smartUI.on('results', ({applicant, documents, entityId}) => {
        console.log(applicant);
        console.log(documents);
        console.log(entityId);

        const entity = oneSdkIndividual.access("entityId").getValue();
        console.log(entity);
        
        const checkResults = oneSdkIndividual.submit({
          verify: true
        });
        console.log(checkResults);
      });

      smartUI.mount("#smartui-container");
    }
  </script>
</head>
<body style="background-color: white" onload="startOneSdk()">
  <div id="smartui-container" style="top: 0;left: 0; width: 100%; height: 100%;"></div>
</body>
</html>

Updated 17 days ago