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 field a 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.
Add the Stripe payment field
To allow the user to pay, drag and drop the ‘Payment’ field and click to open its settings. You can set this field for both one-time and recurring payments. To configure this field:
- Keys: paste the Publishable and Secret keys from your Stripe account. You will find them under the Developers > API keys menu.
- Payment type: select the option you need, charge or subscription. Check this guide to see in detail how to configure each payment type.
Get the Google Places API key
To get the Places API key you will need:
- A Google Maps Platform project with a billing account. If you don't have one, you can create a new project on the Credentials page.
- The project API key. Once the project is created, just open it and copy the API key. If the project doesn't have one yet, click on ‘Create credentials’ to generate a new one.
- The Places API and the Maps JavaScrip API enabled. You will find them under the APIs section, on the left menu.
Preview, test and embed
Once everything is set up, click on the ‘Preview’ button to test the form. Now you can embed it in any tech stack by getting the corresponding code in the ‘Embed’ tab.