FunnelKit Documentation
Get unstuck with our helpful reference material

Checkout Pages

How to Enable Google Address Autocomplete

It is often tedious for users to type in their address on the checkout, especially on mobile.

The small screen size and frequent mistypes lead to costly failed deliveries and hampers the customer-buyer relationship.

Google Address Autocomplete is a solution to this problem.

checkout page optimization - google address autocomplete

When users enter the first few characters of their address on the checkout form, Google shows potential address suggestions to them in a drop-down.

Users can simply choose the one and the rest of the addresses will be automatically filled up.

The FunnelKit Checkouts lets you enable Google Address Complete to make the checkout process faster and friction-free for the prospects.

Broadly there are 2 steps to set this up in Checkout:

  • Purchasing a Google Maps API Key/ Getting the API Key
  • Linking the purchased API key with the Checkout

Follow the steps mentioned below. Please note that the UI may change.

Step 1: Enable Google Maps Platform

Navigate to the Google Maps Platform and click on the 'Get Started' button in the top right corner of the site.

Google Maps Platform

Select the Maps, Routes and Places checkboxes and press continue.

Step 2: Select a Project

If this is your first time creating an API key, you will have to create a Project first.

Select a project
  • Give your Project a name.
  • Click the next button at the bottom-right of the window.

Step 3: Set up your billing

Wait for the billing prompt and select 'Create Billing Account'.

Select your country and accept Terms of Service. Click Continue.

Set up a billing account

Enter your customer info (details) and card information.

Select 'START MY FREE TRIAL'.

Please note that you get a 12-month or $300 credit-free trial. When this free trial ends, you will get up to 28,000 map requests per month and 40,000 direction calls per month, free of charge. You will only be billed when your usage exceeds your monthly $200 credit limit.

For more information about the free trial, please refer to Google’s documentation.

Once your billing has been set up, you can move on to creating your API Key.

Getting the Google Maps API Key

If you already have an active Google Maps Platform account and want to know your API key then follow these steps:

Step 1: Go to the Google Cloud Platform Console

Click here to go to the Google Cloud Platform Console.

Next, click on the Project drop-down and select the specific project for which you want to add an API key.

Of course, you can create a new project, depending on your requirements.

Step 2: Go to Menu and select the 'APIs & Services' option

Navigate to APIs & Services - Enable APIs & Services.

navigate to enable API services

On the Maps tab, enable the relevant APIs by opening each API in a new tab and then enabling it manually.

enable necessary APIS

Step 3: Click on 'Create credentials' > API Key

Once done, go to the Credentials section and click on the API key to generate the key.

click on create API

When you do so, a popup appears.

Here you'll get to see your new API key:

copy API key

Now copy this API key and paste it into your clipboard or use it anywhere you want.

There you go! That's how you can get your new API Key.

Linking the purchased API key with your Checkout

Return to your WordPress site and navigate to the Checkout Global Settings.

Step 1: Click on Settings in the FunnelKit Funnel Builder

You'll land on the global settings page of Checkout.

Go to global settings in FunnelKit

Next, scroll down to the Google Maps section.

Step 2: Insert the purchased Google Maps API Key here

Paste the Google Map API key here

Once done, hit the 'Save' button.

Step 3: Go to the Checkout Page and click on the Optimizations tab

In the Optimizations tab, you'll find that the first option is Google Address Autocompletion.

Hit the toggle and enable it.

enable google address autocompletion

That's it, you've now enabled Google Address Autocomplete for the selected Checkout page.

Additionally, you can choose to disallow some countries where you think that it might not be accurate.

For that, you can select the countries for which you want to disable this feature.

Disallow countries

Once done, click on Save Changes.

Restrict Access to your API Key

After pasting the API Key to your WordPress site and saving the settings, return to the Google API Manager.

You will want to restrict access to your API Key to avoid having it “hijacked” and going over your quota.

For that, click the API Console link on the Enable Google Maps Platform window as shown.

Select 'HTTP referrers (web sites)' and enter the following domains under 'Accept requests from these HTTP referrers (web sites)', replacing yourdomain.com with your domain name.

*yourdomain.com/*

Please note that the Google Maps API is very specific about how this field is formatted – so use exactly this format.

Click the 'Save' button to save your key restrictions.

Now you need to enable the required API functions for your project.

Click the Library link in the API Manager sidebar menu.

Next, press the Google Maps JavaScript API panel.

The JavaScript API will probably already be enabled as shown in the screenshot below.

If the JavaScript API is not enabled, then click Enable on the Google Maps Javascript API window.

Google Maps Javascript API enabled

That's it, now you're good to go!

You can also check out our post on Google Address Autocomplete here.

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down