Smart UI (legacy)
Smart UI is our legacy onboarding widget for manual onboarding flow, and it's currently available within OneSDK. Using Smart UI within OneSDK, you will have the flexibility of using other IDV modules as well.
With the form module, you will be able to use the same SmartUI configuration as before.
Initialise OneSDK
To set up and initialise OneSDK, please read the Getting started section.
In summary, when you initialise OneSDK, you need to pass a recipe configuration. The following sample provides the code when including the form module in a recipe:
const oneSdk = await OneSdk({
session: sessionObjectFromBackend,
mode: "development",
recipe: {
form: {
provider: {
name: 'legacy',
version: 'v4'
},
}
}
});
There is also an additional configuration you need to include in the recipe, which is the same SmartUI configuration with some minor changes. Refer to Configuration parameters for more details.
recipe: {
form: {
provider: {
name: 'legacy',
version: 'v4',
config:{
...
}
},
}
}
Alternatively, you can pass the configuration when you create the form component in OneSDK in the next section.
Create the form component
form componentOnce you initialised OneSDK, then you will need to create a form component.
When creating a form component, you can pass along a configuration object, which overwrites the recipe configuration. Having this option, you can create another instance of the form component if you need to change the configuration without initialising OneSDK again. If you don't pass any config object, the default config in the recipe will be used.
const form = oneSdk.component("form", ff_config_object);
To use pre-existing user information and pre-fill the forms, learn more about pre-filling applicant data.
Configuration sample
Here is a sample code for the configuration:
let ff_config_object = {
"mode": "production",
ageRange: [18, 125],
organisationName: "BobBank",
"checkProfile": "auto",
"phrases": phrases_v2,
"welcomeScreen": true,
"maxAttemptCount": 3,
"documentTypes": [
{
"icon": "driving-licence",
"label": "document.type_drivers_licence.label",
"subtitle": "document.type_drivers_licence.subtitle",
"type": "DRIVERS_LICENCE"
},
{
"idExpiry": true,
"icon": "passport",
"label": "document.type_passport.label",
"subtitle": "",
"type": "PASSPORT",
"acceptedCountries": [
"AUS"
]
}
],
"successScreen": {
"ctaUrl": null,
"ctaText": "Continue to My Account"
},
"failureScreen": true,
"progressBar": true,
"googleAPIKey": "xxxxxxxxxxxxxxxxxxxx",
"acceptedCountries": [
"AUS"
],
"organisationName": "Organisation",
"dateOfBirth": {
"type": "gregorian"
},
"pendingScreen": {
"htmlContent": null,
"ctaActions": []
},
//"consentText": "help",
"requestAddress": {
"acceptedCountries": [
"AUS"
]
},
"documentUploads": false,
"lazyIDCheck": false,
"requestID": true,
"disableThirdPartyAnalytics": false,
"saveOnly": false
};
Obtain the results
Once you load Smart UI in OneSDK and capture the user details successfully, you will receive a results event. For more information on the equivalent mapping of SmartUI events in OneSDK, please refer to Events
Full 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.4-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',
//entityId: ENTITY_ID,
reference: "ramin-test-form"
},
}),
});
const sessionObjectFromBackend = await tokenResultRaw.json();
let ff_phrases_object =
{
"common": {
"next_button_cta": "Next",
"confirm_button_cta": "Yes, that's correct",
"save_button_cta": "Save",
"edit_button_cta": "Edit",
"cancel_button_cta": "Cancel",
"mandatory_field": "*"
},
"applicant": {
"name": "Name",
"english_name": "English Name",
"native_name": "Native Name",
"date_of_birth": "Date of Birth",
"date_of_birth_buddhist": "Buddhist Date of Birth",
"current_address": "Current Residential Address",
"previous_address": "Previous Residential Address",
"gender": "Gender",
"marital_status": "Marital status"
},
"document": {
"number": "Number",
"type_passport": {
"label": "Passport",
"subtitle": "",
"number": "Passport Number",
"country": "Country of Issue",
"expiry": "Date of Expiry"
},
"type_drivers_licence": {
"heading": "Driver's licence",
"label": "Driver's Licence",
"subtitle": "(recommended)",
"state": "State or Territory of Issue",
"licence_number": "Licence Number",
"card_number": "Card Number",
"country": "Country of Issue",
"version_number": "Version Number",
"digital_consent": "This is a digital licence and I don't have my physical licence with me.",
"digital_notification_banner": "A physical licence is required to open an account. You may complete the application however you may need to provide additional information."
},
"type_medicare": {
"label": "Medicare Card",
"subtitle": "",
"number": "Number",
"colour": "Colour",
"position": "Position",
"expiry": "Expiry Date",
"name": "Name as shown on card"
},
"type_national_id": {
"label": "National ID",
"subtitle": "(Citizen / Permanent resident)",
"laser_code": "Laser Code",
"country": "Country of Citizenship",
"identification_number": "Identification Number",
"name": "Name as shown on card",
"nationality": "Nationality"
}
},
"document_select": {
"title": "Choose your ID",
"title_extra": "Looks like you need to try a different ID",
"subtitle": "We'll need at least one of the following documents to verify your identity.",
"hint_message": "Choose which ID you'd like to provide.",
"footer_text": "Your ID must be valid and not expired"
},
"document_uploads": {
"title": "Upload your document",
"guide_text": "Please choose and upload one of the following documents to complete your verification.",
"select_placeholder": "Select document type",
"upload_cta": "Upload",
"upload_success": "Successfully uploaded",
"generic_error": "There was a problem uploading your file",
"summary_title": "Documents uploaded",
"unsupported_file_type": "Uploaded file is of invalid type"
},
"name_input_screen": {
"title": "Your name",
"dual_name_english_title": "Your English name",
"dual_name_native_title": "Your Native name",
"title_loop": "Check your name",
"dual_name_english_title_loop": "Check your English name",
"dual_name_native_title_loop": "Check your Native name",
"subtitle": "What is your full legal name as it is shown exactly on your ID.",
"honorific_title_label": "Title",
"given_name_label": "Given Name",
"given_name_confirmation_label": "(as shown on ID)",
"middle_name_label": "Middle Name or Initial",
"middle_name_confirmation_label": "(only include if shown on ID)",
"family_name_label": "Surname",
"family_name_confirmation_label": "(as shown on ID)",
"medicare_middle_name_label": "How is your middle name displayed on your Medicare Card?"
},
"passport_input_screen": {
"title": "Your passport details",
"title_loop": "Check your passport details",
"expiry_date_placeholder": "DD/MM/YYYY",
"australian_passport_number_invalid_message": "This passport number is invalid"
},
"current_address_screen": {
"title": "Your current residential address",
"title_loop": "Check your current residential address"
},
"previous_address_screen": {
"title_first_time": "What is your previous residential address?",
"title": "Your previous residential address",
"title_loop": "Check your current residential address",
"question_has_previous_address": "Have you been at your address for less than 6 months?"
},
"date_of_birth_input_screen": {
"title": "Your date of birth",
"title_loop": "Check your date of birth",
"full_date_label": "Day / Month / Year",
"full_date_label_buddhist": "Day / Month / Year (Day and month are optional)",
"day_label": "DD",
"month_label": "MM",
"year_label": "YYYY",
"message_label": "Your birthday is the {0}, making you {1} years old",
"minimum_age_error_label": "You must be over {0} years old to open an account",
"error_message_label": "Oops, looks like there might have been a mistake, try again",
"buddhist": "Buddhist",
"gregorian": "Gregorian"
},
"medicare_input_screen": {
"title": "Your Medicare card details",
"title_loop": "Check your Medicare card details"
},
"drivers_licence_input_screen": {
"title": "Your driver's licence details",
"title_loop": "Check your driver's licence details",
"state_screen_title": "What state was your driver's licence issued?",
"licence_number": {
"placeholder": {
"AUS": {
"ACT": "e.g. 1234567890",
"NSW": "e.g. 1234567890",
"NT": "e.g. 1234567",
"QLD": "e.g. 123456789",
"SA": "e.g. W12345",
"TAS": "e.g. 1234567",
"VIC": "e.g. 1234567890",
"WA": "e.g. 1234567"
}
},
"error": "This licence number is invalid"
},
"document_number": {
"placeholder": {
"AUS": {
"ACT": "e.g. A123456789",
"NSW": "e.g. 1234567890",
"NT": "e.g. 12345678",
"QLD": "e.g. FCC1234567",
"SA": "e.g. D12345678",
"TAS": "e.g. D12345678",
"VIC": "e.g. P1234567",
"WA": "e.g. L123456789"
}
},
"hint": {
"AUS": {
"ACT": "The card number is located on the front of your card, running vertically alongside your photo.",
"NSW": "The card number is located on the front of your card, in the top right corner above your photo.",
"NT": "The card number is located on the back of your card, either in the bottom left corner or bottom middle.",
"QLD": "The card number is located in the bottom middle on the front, or the bottom right of the back of your card.",
"SA": "The card number is located on the back of your card, in the top right corner.",
"TAS": "The card number is located on the back of your card, in the top right corner.",
"VIC": "The card number is located on the back of your card, either in the top right corner or middle right.",
"WA": "The card number is located on the back of your card, in the middle of the right side."
}
},
"error": "This card number is invalid"
}
},
"national_id_input_screen": {
"title": "Your national ID details",
"title_loop": "Check your National ID details"
},
"address_manual_input_screen": {
"unit_label": "Unit Number",
"street_number_label": "Street Number",
"street_name_label": "Street Name",
"country_placeholder": "Country",
"suburb_label": "Suburb",
"town_label": "Suburb / Town",
"state_label": "State",
"postcode_label": "Postcode",
"country_label": "Country",
"full_address_label": "Full address",
"unit_placeholder": "Unit",
"street_number_placeholder": "Street Number",
"street_name_placeholder": "Street Name",
"suburb_placeholder": "Suburb",
"town_placeholder": "Suburb / Town",
"state_placeholder": "State",
"postcode_placeholder": "Postcode",
"full_address_placeholder": "Full address"
},
"address_autocomplete_input_screen": {
"switch_to_manual": "Enter address manually",
"autocomplete_label": "Cannot be a PO Box",
"autocomplete_placeholder": "Start typing your address...",
"autocomplete_no_match_message": "No results found. Click here to add address manually."
},
"review_details_screen": {
"title": "Are these details correct?",
"personal_info_label": "Your Personal Info",
"submit_button_idle": "Verifying",
"submit_button_cta": "Looks good, verify my identity",
"edit_title_name": "Edit your name",
"edit_title_dual_name_english": "Edit your English name",
"edit_title_dual_name_native": "Edit your native name",
"edit_title_dob": "Edit your date of birth",
"edit_title_current_address": "Edit your current residential address",
"edit_title_previous_address": "Edit your previous residential address",
"edit_title_passport": "Edit your passport details",
"edit_title_drivers_licence": "Edit your driver's licence details",
"edit_title_national_health_id": "Edit your Medicare details",
"edit_title_national_id": "Edit your national ID details",
"loading_verification": "<h1>Verifying your identity...</h1><p>Please do not close or refresh this page.</p>"
},
"success_screen": {
"title": "Woohoo!",
"title_credit_header": "Your identity has been verified",
"subtitle": "Your identity has been verified.",
"credit_header_title": "Please Note:",
"credit_header_description_p_1": "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian).",
"credit_header_description_p_2": "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity.",
"credit_header_description_p_3": "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team."
},
"failure_screen": {
"title": "Oh no!",
"subtitle": "Unfortunately we couldn't verify your identity at this time.",
"failure_hint": "Please contact our customer support team who will be happy to help you open your account.",
"credit_header_title": "Please Note:",
"credit_header_description_p_1": "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian).",
"credit_header_description_p_2": "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity.",
"credit_header_description_p_3": "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team."
},
"pending_screen": {
"title": "You're all done...",
"innner_p_1": "There are still a couple of things we need to check before opening your account.",
"innner_p_2": "We'll let you know once it's complete.",
"credit_header_title": "Please Note:",
"credit_header_description_p_1": "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian).",
"credit_header_description_p_2": "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity.",
"credit_header_description_p_3": "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team."
},
"partial_match_screen": {
"title": "We couldn't verify your identity",
"subtitle": " Most of the time it's just a typo, let's check your details have been entered correctly.",
"credit_header_title": "Please Note:",
"credit_header_description_p_1": "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian).",
"credit_header_description_p_2": "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity.",
"credit_header_description_p_3": "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team.",
"cta_text": "Check your ID information"
},
"no_match_screen": {
"title": "We're having trouble verifying your identity",
"subtitle": " Most of the time it's just a typo, let's check your details have been entered correctly.",
"credit_header_title": "Please Note:",
"credit_header_description_p_1": "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian).",
"credit_header_description_p_2": "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity.",
"credit_header_description_p_3": "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team."
},
"credit_header_failure_screen": {
"title": "Before we proceed...",
"credit_header_description_p_1": "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian).",
"credit_header_description_p_2": "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity.",
"credit_header_description_p_3": "Please contact our customer support team who will be happy to help.",
"cta_text": "Proceed"
},
"unauthorize_error_screen": {
"title": "This link has expired.",
"sub_titlte_p_1": "You will need to get a new link to proceed.",
"sub_titlte_p_2": "Links last 2 hours."
},
"error_label": {
"missing": "{fieldName} is required",
"invalid": "{fieldName} is invalid",
"incomplete": "{fieldName} is incomplete",
"expired": "{documentName} is expired"
},
"errors": {
"default": {
"text": "Something went wrong.",
"explanation": "Please try refreshing or contact our support team.",
"cta": "Refresh",
"url": ""
},
"400": {
"text": "Token is not authorised",
"explanation": "Please re-initialise with a different token"
},
"1023 - 404": {
"text": "Can't retrieve original document",
"explanation": "Contact help desk"
}
}
};
var phrases_v2 = {
"failure_screen": {
"title": "Oh no!",
"subtitle": "Unfortunately we couldn't verify your identity at this time.",
"failure_hint": "Please contact our customer support team who will be happy to help you open your account."
}
}
let ff_config_object = {
"mode": "production",
ageRange: [18, 125],
organisationName: "BobBank",
"checkProfile": "auto",
"phrases": phrases_v2,
"welcomeScreen": true,
"maxAttemptCount": 3,
"documentTypes": [
{
"icon": "driving-licence",
"label": "document.type_drivers_licence.label",
"subtitle": "document.type_drivers_licence.subtitle",
"type": "DRIVERS_LICENCE"
},
{
"idExpiry": true,
"icon": "passport",
"label": "document.type_passport.label",
"subtitle": "",
"type": "PASSPORT",
"acceptedCountries": [
"AUS"
]
}
],
"successScreen": {
"ctaUrl": null,
"ctaText": "Continue to My Account"
},
"failureScreen": true,
"progressBar": true,
"googleAPIKey": "AIzaSyA2cGPxLCgNhxLoJJtQmOoMAQPoP_MtVE0",
"acceptedCountries": [
"AUS"
],
"organisationName": "Organisation",
"dateOfBirth": {
"type": "gregorian"
},
"pendingScreen": {
"htmlContent": null,
"ctaActions": []
},
//"consentText": "help",
"requestAddress": {
"acceptedCountries": [
"AUS"
]
},
"documentUploads": false,
"lazyIDCheck": false,
"requestID": true,
"disableThirdPartyAnalytics": false,
"saveOnly": false
};
const oneSdk = await OneSdk({
session: sessionObjectFromBackend,
//isPreloaded: false,
mode: "development",
recipe: {
form: {
provider: {
name: 'legacy',
version: 'v4',
},
}
}
});
oneSdk.on('*', console.log);
const form = oneSdk.component("form", ff_config_object);
form.on("*", (message) => {
console.log(message);
});
form.on('results', async (applicant, documents, entityId) => {
console.log(applicant);
console.log(documents);
console.log(entityId);
const entity = oneSdkIndividual.access("entityId").getValue();
console.log(entity);
//await oneSdkIndividual.search();
/*const checkResults = oneSdkIndividual.submit({
verify: true
});
console.log(checkResults);*/
});
form.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 6 days ago