Verification UI: Getting Started
This guide will help you understand how to use the Autohost SDK to build your own Verification UI, instead of sending your users or guests to our Guest Portal. We suggest you review the Guest Portal section of our Knowledge Base, to orient yourself on what the various available steps are.
Building your own Verification UI consists of:
- Sending Autohost data for steps of your the Verification flow that only require basic inputs from the user, using the save method. Examples would include the Personal Info Screen.
- Mounting Client Components for verification steps that require a more complete solution, such as ID Verification. You can learn more about these components, how to use them, and what components are available, in the Embeddable Client Components page.
- Capturing data used for the Fraud Telemetry analysis from the user's browser.
Basic Example
In this example, our users will need to complete the Personal Info, ID Verification, and About You screens.
Initialization
First, we will need to initialize the SDK. When this returns, we will have access to the Autohost Reservation object. This is useful if we want to see what screens may be enabled based on Autohost's initial risk score, and your specific business rules as set in the Screening Assistant:
const client = await AutohostSDK.init({
reservationId: RESERVATION_ID,
});
const reservation = client.reservation.get();
Personal Info Screen
We show our users a simple form for the Personal Info step. In this example implementation, we only need to capture their email address, full name, and date of birth. When the user submits the form, we send the data to Autohost.
<form id="userForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required /><br /><br />
<label for="full_name">Full Name:</label>
<input type="text" id="full_name" name="full_name" required /><br /><br />
<label for="birth_date">Birth Date:</label>
<input type="date" id="birth_date" name="birth_date" required /><br /><br />
<button type="submit">Submit</button>
</form>
<script>
document
.getElementById("userForm")
.addEventListener("submit", async function (event) {
event.preventDefault(); // Prevent the default form submission
// Capture the values of the form fields
const email = document.getElementById("email").value;
const full_name = document.getElementById("full_name").value;
const birth_date = document.getElementById("birth_date").value;
try {
// Call the save method with the captured values
await client.verification.save({
step: "PersonalInfo",
data: {
email,
full_name,
birth_date,
},
});
// Navigate the user to the ID Verification step
} catch (error) {
// Display an appropriate error message to the user
}
});
</script>
ID Verification Screen
For ID Verification, we provide a complete UI flow that provides mutliple ways to capture the user's ID Document. This component handles capturing the ID images, the user's selfie, submits the images to our backend, and displays feedback to the user in case the verification fails.
All we need to do is mount the component, and provide a function to the onIDVComplete callback to navigate the user to the next step.
<div id="target">
<script>
client
.component("IDV", {
callbacks: {
onIDVComplete: () => {
// Navigate user to the About You step.
},
},
})
.mount("#target");
</script>
</div>
About You Screen
As this will be the last step in our custom Verification UI, we need to pass the complete boolean flag to the save method. This tells Autohost that we have sent all the Verificaiton data, and the Screening AI can run it's analysis.
<form id="userForm">
<label for="email">About me:</label>
<textarea id="bio" name="bio" required /><br /><br />
<button type="submit">Submit</button>
</form>
<script>
document
.getElementById("userForm")
.addEventListener("submit", async function (event) {
event.preventDefault(); // Prevent the default form submission
// Capture the values of the form fields
const bio = document.getElementById("bio").value;
try {
// Call the save method with the captured values
await client.verification.save({
step: "AboutYou",
data: {
bio,
},
complete: true,
});
// Show the user a success screen: We're done!
} catch (error) {
// Display an appropriate error message to the user
}
});
</script>
Single Page
In some cases, you may need a guest to complete only a single step, rather than your entire Verification flow. This may be if you need additional information after they have completed your flow, or if they need to make a correction. To ensure this is correctly recorded in the Autohost activity log, pass the property isSinglePage: true when initializing a UI component, or when submitting data with the save method.
client
.component("IDV", {
isSinglePage: true,
callbacks: {
onIDVComplete: () => {
// Navigate user to the About You step.
},
},
})
.mount("#target");
await client.verification.save({
step: "AboutYou",
isSinglePage: true
data: {
bio,
},
complete: true,
});
