Identity Verification App
One of the example apps we’ve built to demonstrate the business problems Buttonize can solve is an app for our identity verification team.
If you work in FinTech, it’s quite common to have users submit documents for identity verification. If your business handles reviewing these documents in-house, this is the perfect time to help out your compliance team and use Buttonize!
Resulting app
The Example on GitHub
The code for this example can be found in our examples repo. Please check it out and get acquainted.
One import thing to note is that in order to use the local development tooling with Buttonize, you must export your CDK app, as can be seen here.
If you don’t plan to use the local development features, then this step is optional.
This guide is very similar to our guide for our example Customer Support App. Reading only one of two is necessary.
IdentityVerificationStack
In this guide, we’ll skip some of the general concepts already covered in the Help Request Form Guide. If you’re new to building apps with Buttonize or haven’t read that guide yet, we recommend doing so.
Anyways, here’s a high level overview of what our identity verification app with all its pages looks like:
Within each page’s body
prop, we then layout what our app should look like and which actions certain components should take
when interacted with.
LoadUserPage (the first page)
In our first page, we provide a form for our compliance team to load the user they’re trying to help into the app. This page is fairly straightforward:
We simply need an Input.text
field where our colleague can enter the user id, and an Input.button
component.
In order to get the components to display side-by-side, we’re using Input.grid
. If we wanted them stacked vertically,
we could also just do it like:
Also note our use of the kind
and intent
props in order to style the button. Your intellisense should make it
clear which values are available for this buttons, and you’ll be able to give them the colors and styles you want.
When the button is pressed, it’ll invoke a lamba to fetch the user data. Once it’s done, we’ll be sent to the next page in order to present the data.
Since this is just an example, you can see we’re only returning some hardcoded data, but your lambda could fetch the data from anywhere! Anything you can do within a lambda, you can kick off from Buttonize.
Once this lambda returns, we invoke Action.buttonize.app.changePage
via the onClickFinished
prop of the button
and move on to the specified page.
DocumentVerificationPage (the second page)
On this page, we display all the info we have on the user, present their documentation, and give the compliance team the ability to approve or reject the document.
The main thing to take note of is that the user data is accessed through the loadUserPayload
variable, which
is from the Runtime State, which was populated on the first page via our lamba action.
After the lambda returned, it extracted the data from the response and inserted it into loadUserPayload
. Now
we can use that data in order to meaningful context to our page.
One thing of note is our use of the Display.code
component. In this example, it demonstrates presenting some raw json
data we haven’t gotten around to building a UI for. However, such data can still be useful, so why not show it?
Moving on to the interactability, notice how each action invokes a lambda, accessing some data from the Runtime State in order to populate the payload.
Each lambda is just an example, but it should be clear that it’s here where you would insert your business logic.
Notice how userId
is the variable we provided in the payload of our action.
Once this lambda returns, the onClickFinished
callback is invoked and the flow continues.
ConfirmationPage (the third page)
The code for this is simple since it just displays text, confirming that we approved or rejected this particular user’s documents.
Notice we’re just using userId
, which was actually set in the first page.
In this example, while each button invokes its own lambda, we redirect to the same page via the onClickFinished
callback,
but, if desired, you could instead redirect to a discrete confirmation page for each action.
Wrapping Up
That’s about it for this example app. If you’re already familiar with the lambda invoke Action and the change page Action, this should be pretty straightforward.
Hopefully you found this example useful. Now go build something!