Vue

<script setup>
import { onMounted, ref } from 'vue'
import OneSdk from '@frankieone/one-sdk'

// Configuration references
const CUSTOMER_ID = import.meta.env.VITE_CUSTOMER_ID
const CUSTOMER_CHILD_ID = import.meta.env.VITE_CUSTOMER_CHILD_ID
const API_KEY = import.meta.env.VITE_API_KEY

const session = ref(null)
const tokenResult = ref(null)

onMounted(async () => {
// Initialize session
const tokenResult = await initializeSession()

// Configure OneSDK
const oneSdk = await setupOneSdk(tokenResult)

// Setup individual verification
const individual = setupIndividual(oneSdk)

// Initialize IDV flow
setupIDVFlow(oneSdk)
})

// Session initialization
async function initializeSession() {
const response = 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": `demo-${new Date().toISOString()}`
}
})
})
return await response.json()
}

// OneSDK configuration
async function setupOneSdk(tokenResult) {
const sdk = await OneSdk({
session: tokenResult.session,
mode: "development",
recipe: {
form: {
provider: {
name: 'react',
googleApiKey: 'YOUR_GOOGLE_API_KEY'
},
}
}
})

sdk.on('\*', console.log)
return sdk
}

// Individual verification setup
function setupIndividual(sdk) {
const individual = sdk.individual()
individual.addConsent("general")
individual.addConsent("docs")
individual.addConsent("creditheader")
return individual.submit()
}

// IDV flow setup
function setupIDVFlow(sdk) {
const idv = sdk.flow("idv")
const components = {
loading1: sdk.component("form", {
name: "LOADING",
title: { label: "Loading..." },
descriptions: [{ label: "" }]
}),
loading2: sdk.component("form", {
name: "LOADING",
title: { label: "Processing results..." },
descriptions: [{
label: "Hold tight, this can take up to 30 seconds. Please don't refresh this page."
}]
}),
review: sdk.component("form", {
name: "REVIEW",
type: "ocr"
})
}

setupIDVEventHandlers(idv, components)
idv.mount("#e2e-idv-container")
}

// Event handlers setup
function setupIDVEventHandlers(idv, components) {
let isInitialLoading = true

idv.on("loading", (display) => handleLoading(display, components, isInitialLoading))
idv.on("results", (data) => handleResults(data, components))
idv.on("error", handleError)
idv.on("detection_complete", handleDetectionComplete)

components.review.on("form:review:ready", handleReviewReady)
}

</script>

<template>
  <div class="onesdk-container">
    <div id="e2e-idv-container" class="idv-container"></div>
    <div id="e2e-idv-loading1"></div>
    <div id="e2e-idv-loading2"></div>
  </div>
</template>

<style scoped>
.onesdk-container {
  width: 100%;
  height: 85vh;
}

.idv-container {
  width: 100%;
  height: 100%;
}
</style>