E2E Sample Code - frankieone

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

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

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

        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

1- Two IDs flow with Driver Licence and Passport:

2- One ID flow with default Australian Documents

3- Personal only without document