> ## 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.

# 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.

<Callout icon="thumbtack" color="#1A6CFF" iconType="regular">
  ##### Initialisation

  Make sure to follow [Getting started](/docs/v1/introduction/getting-started/welcome-to-frankie) and [Form recipe configuration](/docs/v1/introduction/getting-started/welcome-to-frankie) and [Form recipe configuration](/docs/v1/onesdk/oneSDK/implementation-guide/module/ekyc) to initialise OneSDK properly, before using the following sample codes.
</Callout>

## 1- Two IDs flow with Driver Licence and Passport:

```html theme={null}
<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 theme={null}
<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 theme={null}
<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>
```
