WhatsApp API allows you to send messages to any user that has a WhatsApp number. This opens up endless possibilities to send different types of notifications or verify phone numbers.
In this tutorial, we will show you how to build an OTP flow that verifies phone numbers using WhatsApp as sender provider.
The structure of the flow will be:
If you don’t have one, you need to create an app in your Facebook Business Manager choosing the “Business” type:
Once it’s created, go under WhatsApp > Getting started:
Here you will have your temporary access token that we will use in the next sections and your testing phone number. You can add your own phone number if you go under WhatsApp > Configuration > Manage phone numbers.
You can send free text messages using the WhatsApp API but, in this case, we’re going to create a template:
Once you click “Create Message Template”, pick the “One-Time Password” option, name it “otp” and fill out the template:
Notice we use “{{1}}” as a variable, this is the syntax that WhatsApp API uses to dynamically replace those variables with the values we pass to the API.
Note you will use the name of this template to call the WhatsApp API in the next sections.
Before moving to a production environment, remember to generate a permanent access token, otherwise, the temporary one will expire in 24 hours.
To generate the permanent token go under Users > System users in your Business Manager settings, click “Add”, name it as you want, and choose “Admin” user role.
Now, click “Generate new token” and make sure you enable the “whatsapp_business_management”, “whatsapp_business_messaging” and “business_management” permission:
Then, copy the generated access token, as we will use it to configure the WhatsApp API:
Let’s start adding a first form step with a “Phone” field:
In the second step, let’s add a “Number” field:
You can also add a “Rich text” block to add some descriptions and guide the user. Note you can click the plus icon to use field values from previous steps like in the above example:
“Please enter the 4-digit verification code that was sent to {{fields.phone}}. The code is valid for 30 minutes.”
And last, place some text as a thank you message in the ending screen settings:
Go to the flows tab, and let’s create the first flow that we will execute between the step 1 and step 2:
Let’s start adding the “Generate one-time password” action:
As second action, add an “HTTP Request” that we will use to call the WhatsApp API:
Note the following about the payload:
Add an “If/then condition”:
And last, close this flow adding two more actions:
For this last flow, we will start adding a “Verify one-time-password” action:
Then, add an “If/then condition” action that will evaluate the output of the OTP verification:
Close this flow with two more actions:
That’s all! Now you have a verification flow that sends an OTP via WhatsApp and verifies the phone number. Remember you can download this scenario to easily test this use case.
Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.