Need to create a custom KYC verification flow? Save time and resources by building and iterating it, add automations and custom logic at any stage, and easily adapt it to your brand guidelines with the form and flow editor.
In this guide we will show you the key steps to build a completely custom KYC form, using Passbase for ID verification, although you can totally adapt it to your needs.
1. Create a multi-step form
First, go to the form editor and create a new form. You can select and edit one of the templates or start from scratch. In this case, we will opt for the latter.
Add the steps you need by clicking the green plus button, and give each one a descriptive name in the right column.
2. Ask for the necessary personal data
Distribute the fields you need in the steps you have created. Remember to keep it simple and not overload them with too many questions. Just drag and drop the fields from the menu on the left, and click on them to open their settings.
To configure these fields settings is as easy as:
- ID: simplify them to make each field easier to identify and reference.
- Required: enable this checkbox to make them mandatory.
As KYC documents vary by country, we need this information. We have added the Google Address Autocomplete widget to allow users to easily fill in the address and validate it with Google Maps. This will also allow us to know the country without asking the user.
To configure the widget is also as easy as:
- Required: enable this checkbox to make the field mandatory.
- API key: paste the key of your Google Address API account. You can check the Places API docs and the key instructions.
If you don't need the user's address, instead of using Google Address Autocomplete, you can include a country field to ask the user directly.
3. Add an ID verification widget
Next, add the ID verification service of your choice. In this case, we have used Passbase and its native widget, but you can embed other services using the 'Custom field' feature.
To configure the Passbase widget:
- Required: enable this option to make it mandatory.
- Auto forward: enable this option to display the next step of the form, once the verification has been completed, without the need to click any button.
- Publishable & Secret key: copy and paste them from your Passbase account.
- Button text: it will display the provided text by default, but you can modify it.
- Email: reference the {{fields.email}} variable from the previous step of the form. You can get it from the autocomplete menu by clicking on the plus button.
- Country: reference the {{fields.country}} variable of the field you added or from the Google Address autocomplete widget with the proper syntax.
Note that the Passbase widget uses the 2 character ISO code (ES, US, GB, etc.), so just remember to send the data in that format.
4. Request other KYC documents
If you need to request more documents, we recommend that you do it once the user has been verified. Passbase will request and verify the ID card, but you should check which KYC documents are requested in each country.
You can make fields display dynamically using conditional logic or JavaScript rules, depending on your coding skills. If you need it, you can request a demo of these features.
Finally, add your Terms & Conditions. Just drag and drop the field and add the corresponding link. Rich text is supported in this field, so you can format the text.
If you want to make them more understandable and accessible, you can divide them into two or three sections with an explanatory text, in the style of N26.
5. Add logic to the form
To add logic to your form, click on the 'Flows' tab in the light gray menu. You can add flows with custom logic at any step of the form and also after it is submitted.
You can use step flows to create a dynamic form, whose steps change based on user responses, or to get data from external services like Clearbit or your own APIs.
After-submission flows are used to send data to external services and trigger notifications. For example, you can send form data to your CRM and notify a specific salesperson or channel in Slack. Then add an ‘If/then condition’ action to trigger different behaviors on each of the branches.
6. Configure the ending screen
Finally, configure the ending screen, which is displayed after form submission. Here you can define a thank you message, set the redirection URL, and run custom JS scripts.
None of these operations is mandatory, simply activate the ones you need by clicking the ON/OFF button. You can check all the details on the ending screen docs.
7. Preview, test and embed it
Once everything is ready, click on the ‘Preview’ button to test the form and the flows. You can see if everything has worked correctly in the ‘Submissions’ tab.
Thanks to our JS SDK, Arengu forms can be embedded in every frontend framework with two simple lines of code. Check all the possibilities and methods in the embed docs.
Bonus tip: Adapt it to your brand guidelines
There are 2 ways to change the look and feel of your form, depending on your coding skills and how you want to edit it.
Easily modify fonts, colors and buttons, by clicking on the ‘Design’ tab of the form editor.
If you have coding skills, you can fully customize the form using all these CSS variables.
Haven’t you tried Arengu yet? Feeling like this use case is what you need but don't know where to start? Sign up free or book a demo with us. We’ll be happy to help you!
