E2E Sample Code

In the following sample codes, we put everything together to run an E2E Manual flow using Modular forms to showcase different use cases.

📘
Initialisation
Make sure to follow Getting started and Form recipe configuration to initialise OneSDK properly, before using the following sample codes.

1- Two IDs flow with Driver Licence and Passport:

<html lang="en">
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>oneSdk onboarding</title>
   <script src="https://assets.frankiefinancial.io/one-sdk/v1/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.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",
                    "reference": //"<YOUR_UNIQUE_CUSTOMER_REF>"
                }
            })
        });

    const tokenResult = await tokenResultRaw.json();

    const sessionObjectFromBackend = tokenResult;

    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');

    const welcome = oneSdk.component("form", {
      name: "WELCOME",
      type: "manual",
      /*descriptions: [
              { label: 'This is a sample dynamic page.', style: {} },
              { label: 'It can contain multiple paragraphs.', style: {} },
            ], */
      //cta: {style: {'ff-button':{backgroundColor: "red"}}}
    });
    const consent = oneSdk.component("form", {name: "CONSENT"});

    const personal = oneSdk.component("form", {
      name: "PERSONAL",
      type: "manual",
      personal: {
        countries:{
          default:{
            default:{
              fields:[
                {
                  fieldType: 'date',
                  dataType: 'text',
                  name: 'dateOfBirth',
                  hide: false,
                  calendarConfig: {
                    age: {
                      min: 20,
                      max: 65,
                      message: "The age must be between 20 and 65"
                    }
                  }
                }
              ]
            }
          }
        }
      }
    });

    const document = oneSdk.component("form", {
      name: "DOCUMENT",
      type: "manual",
      numberOfIDs: 2,
      documents: [
        {
          type: "DRIVERS_LICENCE",
          countries: {
            default: {
              default: {
                fields: [
                  {
                    fieldType: 'select',
                    name: 'country',
                    options: [
                      {
                        label: "Australia",
                        value: "AUS"
                      },
                      {
                        label: "New Zealand",
                        value: "NZL"
                      }
                    ],
                  }
                ]
              }
            }
          }
        },
        {
          type: "PASSPORT",
          countries: {
            default: {
              default: {
                fields: [
                  {
                    fieldType: 'select',
                    name: 'country',
                    options: [
                      {
                        label: "Australia",
                        value: "AUS"
                      },
                      {
                        label: "New Zealand",
                        value: "NZL"
                      }
                    ],
                  }
                ]
              }
            }
          }
        }
      ]
    });

    const review = oneSdk.component("form", {
      name: "REVIEW",
      type: "manual",
      verify: true
    });

    const retry = oneSdk.component("form", {
      name: "RETRY",
      type: "manual",
    });

    const result_fail = oneSdk.component("form", {
      name: "RESULT",
      type: "manual",
      state: 'FAIL',
      title: {label:'Max attempt reached'},
      descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
      cta:{label: 'Close'}
    });

    welcome.mount("#form-container");
    welcome.on("form:welcome:ready", () => {
      consent.mount("#form-container");
    });

    consent.on("form:consent:ready", async () => {
      personal.mount("#form-container");
    });

    welcome.on("form:welcome:failed", () => {
      // display error message
    });

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

    personal.on("form:personal:ready", async () => {
      document.mount("#form-container");
    });

    document.on("form:document:back", async ({inputInfo}) => {
      personal.mount("#form-container");
    });


    document.on("form:document:ready", async ({inputInfo}) => {
      review.mount("#form-container");
    });

    let count = 0;
    review.on("form:result:partial", async () => {
      if (count < 2)
      {
        retry.mount("#form-container");
        count+=1;
      }
      else
      {
        result_fail.mount("#form-container");
      }

    });

  }

</script>

<style>
  
</style>

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

2- One ID flow with default Australian Documents

<html lang="en">
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>oneSdk onboarding</title>
   <script src="https://assets.frankiefinancial.io/one-sdk/v1/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.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",
                    "reference": //"<YOUR_UNIQUE_CUSTOMER_REF>"
                }
            })
        });

    const tokenResult = await tokenResultRaw.json();

    const sessionObjectFromBackend = tokenResult;

    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');

    const welcome = oneSdk.component("form", {
      name: "WELCOME",
      type: "manual",
      /*descriptions: [
              { label: 'This is a sample dynamic page.', style: {} },
              { label: 'It can contain multiple paragraphs.', style: {} },
            ], */
      //cta: {style: {'ff-button':{backgroundColor: "red"}}}
    });
    const consent = oneSdk.component("form", {name: "CONSENT"});

    const personal = oneSdk.component("form", {
      name: "PERSONAL",
      type: "manual",
      personal: {
        countries:{
          default:{
            default:{
              fields:[
                {
                  fieldType: 'date',
                  dataType: 'text',
                  name: 'dateOfBirth',
                  hide: false,
                  calendarConfig: {
                    age: {
                      min: 20,
                      max: 65,
                      message: "The age must be between 20 and 65"
                    }
                  }
                }
              ]
            }
          }
        }
      }
    });

    const document = oneSdk.component("form", {
      name: "DOCUMENT",
      type: "manual",
      numberOfIDs: 1,
    });

    const review = oneSdk.component("form", {
      name: "REVIEW",
      type: "manual",
      verify: true
    });

    const retry = oneSdk.component("form", {
      name: "RETRY",
      type: "manual",
    });

    const result_fail = oneSdk.component("form", {
      name: "RESULT",
      type: "manual",
      state: 'FAIL',
      title: {label:'Max attempt reached'},
      descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
      cta:{label: 'Close'}
    });

    welcome.mount("#form-container");
    welcome.on("form:welcome:ready", () => {
      consent.mount("#form-container");
    });

    consent.on("form:consent:ready", async () => {
      personal.mount("#form-container");
    });

    welcome.on("form:welcome:failed", () => {
      // display error message
    });

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

    personal.on("form:personal:ready", async () => {
      document.mount("#form-container");
    });

    document.on("form:document:back", async ({inputInfo}) => {
      personal.mount("#form-container");
    });


    document.on("form:document:ready", async ({inputInfo}) => {
      review.mount("#form-container");
    });

    let count = 0;
    review.on("form:result:partial", async () => {
      if (count < 2)
      {
        retry.mount("#form-container");
        count+=1;
      }
      else
      {
        result_fail.mount("#form-container");
      }

    });

  }

</script>

<style>
  
</style>

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

3- Personal only without document

<html lang="en">
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>oneSdk onboarding</title>
   <script src="https://assets.frankiefinancial.io/one-sdk/v1/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.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",
                    "reference": //"<YOUR_UNIQUE_CUSTOMER_REF>"
                }
            })
        });

    const tokenResult = await tokenResultRaw.json();

    const sessionObjectFromBackend = tokenResult;

    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');

    const welcome = oneSdk.component("form", {
      name: "WELCOME",
      type: "manual",
      /*descriptions: [
              { label: 'This is a sample dynamic page.', style: {} },
              { label: 'It can contain multiple paragraphs.', style: {} },
            ], */
      //cta: {style: {'ff-button':{backgroundColor: "red"}}}
    });
    const consent = oneSdk.component("form", {name: "CONSENT"});

    const personal = oneSdk.component("form", {
      name: "PERSONAL",
      type: "manual",
      personal: {
        countries:{
          default:{
            default:{
              fields:[
                {
                  fieldType: 'date',
                  dataType: 'text',
                  name: 'dateOfBirth',
                  hide: false,
                  calendarConfig: {
                    age: {
                      min: 20,
                      max: 65,
                      message: "The age must be between 20 and 65"
                    }
                  }
                }
              ]
            }
          }
        }
      }
    });

    const review = oneSdk.component("form", {
      name: "REVIEW",
      type: "manual",
      verify: true
    });

    const retry = oneSdk.component("form", {
      name: "RETRY",
      type: "manual",
    });

    const result_fail = oneSdk.component("form", {
      name: "RESULT",
      type: "manual",
      state: 'FAIL',
      title: {label:'Max attempt reached'},
      descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
      cta:{label: 'Close'}
    });

    welcome.mount("#form-container");
    welcome.on("form:welcome:ready", () => {
      consent.mount("#form-container");
    });

    consent.on("form:consent:ready", async () => {
      personal.mount("#form-container");
    });

    welcome.on("form:welcome:failed", () => {
      // display error message
    });

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

    personal.on("form:personal:ready", async () => {
      review.mount("#form-container");
    });

    let count = 0;
    review.on("form:result:partial", async () => {
      if (count < 2)
      {
        retry.mount("#form-container");
        count+=1;
      }
      else
      {
        result_fail.mount("#form-container");
      }

    });

  }

</script>

<style>
  
</style>

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

📘Initialisation

1- Two IDs flow with Driver Licence and Passport:

2- One ID flow with default Australian Documents

3- Personal only without document

📘
Initialisation