Billing form with Google Address Autocomplete

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.

Previous requirements

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.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      -73.9654415,
      40.8054491
    ]
  },
  "properties": {
    "geocoding": {
      "type": "house",
      "housenumber": "2880",
      "street": "Broadway",
      "city": "New York",
      "county": "New York County",
      "state": "New York",
      "country": "United States",
      "postcode": "10025"
    }
  }
}

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.

‍Haven’t you tried Arengu yet? Sign up free or book a demo with our team to check how we can help you improve your forms and flows.