Tutorial: Pre-create inquiries for Embedded Flow
Tutorial: Pre-create inquiries for Embedded Flow
Tutorial: Pre-create inquiries for Embedded Flow
An Embedded Flow embeds Persona’s verification UI directly into your website as an iframe.
There are two ways to use Embedded Flow:
This guide walks you through the second method: pre-creating inquiries via API. This is the method we recommend you use in production.
You will:
The sample code in this guide illustrates an approach that we recommend in production.
However, for demonstration purposes, the code itself is simplified and not production-ready. For example, it does not include:
Pre-creating inquiries (the method shown in this guide) is recommended for production use. However, if you’re looking for the fastest way to test Embedded Flow, see Tutorial: Embedded Flow with Inquiry Template.
You’ll need:
Before you start, you should:
A user named Alexander Sample just joined your dog walking app as a dog walker. You want to verify his identity to ensure the safety of users on your service.
Alexander’s user ID in your app is “usr_ABC123”. During account signup in your app, he stated his birthdate is August 31, 1977.
Every inquiry is created from an inquiry template, which defines details like the specific verification logic and UI text and branding of that inquiry. You can think of inquiry templates as a mold that lets you create many inquiries.
Persona offers a suite of solutions that include preconfigured inquiry templates. In this tutorial, use the “KYC” solution to verify your dog walkers.
Follow these instructions to add the “KYC” solution to your Sandbox environment.
Find the ID of the newly-created inquiry template.
In the Persona dashboard, navigate to Inquiries > Templates. Find the “KYC” template in the list of inquiry templates, and note the value in the ID field. The value should begin with itmpl_.
Create the web page that will display the Embedded Flow. This page shows the user onboarding flow that Alexander Sample is completing in your dog walking app.
Create a new directory called embedded-flow-precreate-demo/. Then create a subdirectory called frontend/.
Inside frontend/, create a file called onboarding.html with the following code:
X.Y.Z with the latest SDK versionenv_XXXXXXXXXXXXX with your Sandbox environment ID. Here’s how to find it.Keep this terminal window open.
http://localhost:8001/onboarding.html in your browser to view the page.You should see the onboarding flow for our newly-registered dog walker:
Right now, the “Start Verifying” button doesn’t work. Notably, we haven’t yet built the backend API that it hits.
The UI and styling here are identical to the code in the Embedded Flow with Inquiry Template tutorial.
The key difference is in the JavaScript:
Our backend determines if an inquiry exists or needs to be created. If an inquiry exists and it needs to be resumed, the backend also returns a session token that lets the client resume that inquiry.
inquiryId instead of templateId:This approach is more secure because users can’t change the reference ID or prefilled fields.
Now, create a backend server with one endpoint that returns an inquiry for the current logged-in user. If the user has an in-progress inquiry, the backend will return that inquiry’s ID. Otherwise, the backend will create a new inquiry and return its ID.
Create the embedded-flow-precreate-demo/backend/ subdirectory.
Create the file backend/server.py with the following code:
In this code, replace:
itmpl_XXXXXXXXXXXXX with your inquiry template ID from Step 2backend/requirements.txt file:You should see:
Keep this terminal window open.
This backend implements three key features:
In a production app, you may want to handle additional inquiry statuses beyond “created” and “pending”. For example, if a user has any finished inquiry (“completed” or “approved”), you may not want that user to create a new inquiry.
See this guide for a list of other statuses you might want to handle.
3. Securely prefill data in new inquiries: All new inquiries are created on the backend, so user data is set where users can’t modify it.
You can receive notifications when any inquiry’s state changes. For example, you can be alerted when any inquiry is started by a user, or when any inquiry is completed. See the full list of inquiry events you can be alerted about.
To receive automatic notifications:
inquiry.started, inquiry.completed, inquiry.approved, inquiry.declined, and inquiry.failedFor this tutorial, you can skip webhooks and view results in the dashboard.
Test the inquiry creation and resumption logic with different scenarios. When doing these manual tests:
Scenario 1: Create new inquiry
No incomplete inquiry found, creating new oneScenario 2: Resume created inquiry
Found existing inquiry inq_XXXXXXXXXXXXX with status: createdInquiry is created, continuing without session tokenScenario 3: Resume pending inquiry
Found existing inquiry inq_XXXXXXXXXXXXX with status: pendingInquiry is pending, generating session token to resumeScenario 4: Create new inquiry after completion
No incomplete inquiry found, creating new oneIf you set up the webhook in Step 5, check your server logs. You should see events from inquiry.started, inquiry.completed, and inquiry.approved.
Note: If you want to receive the inquiry.failed event, you can reload the page and click “Start Verifying” again. Then click through the verification flow, this time with the “Pass verifications” toggle disabled.
In the Persona dashboard:
usr_ABC123)You should see two inquiries if you tested all four scenarios above. Click on each to see their status and details. Note that because this inquiry was created in Sandbox, some of the data shown will be demo data.
You can also retrieve inquiry details via API. You’ll need the inquiry ID you see printed in the “Debug info” section of the UI. See Retrieve an Inquiry.
Now that you’re creating inquiries server side, you can block client-side inquiry creation completely. This ensures users can’t create inquiries using the template ID approach.
To disable client-side inquiry creation for your “KYC” inquiry template:
In this tutorial, you built an Embedded Flow integration that:
You also:
This is a complete example of how you can pre-create inquiries for Embedded Flow.
Enhance this integration:
Explore further:
completed to approved.