Need to reduce friction in your billing forms? Automatically complete and validate addresses with Google Maps thanks to a native widget.
Allow users to easily and quickly fill in addresses, plus avoid human errors, by adding the Google Address Autocomplete widget to your forms. Let’s see an example.
To build this use case you will need:
An Arengu account, to build the form and integrate other services.
A Google Maps Platform account, to autocomplete the address.
A Stripe account, to configure the payment field.
Create a form with 2 steps
First, go to the form editor and create a form with two steps. In the first one, ask for the data you need for the invoice. For example, we will add:
A ‘Text’ field to ask for the user name and last name.
An ‘Email’ field to ask for an email address.
To configure these fields, click on them to open their settings:
ID: give each fielda simple ID that is easy to recognize and reference, like ‘email’ or ‘name’, in case you want to use them in your flows.
Required: enable this checkbox to make them mandatory.
Add the Google Address Autocomplete widget
Then, add the Google Address widget to the same form step and configure it as follows:
Required: enable this checkbox to make it mandatory.
API key: paste the key of your Google Address API account. To get it, you can check the Places API docs, but below you can see the key instructions on how to do it.
Once the user inputs the address and submits the step of the form, it will generate an object with the location data in standard GeoJSON format. You can use in the flows linked to the form to trigger custom automations.
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.