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.
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 (formerly WooFunnels) Checkouts let 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.
Purchasing a Google Maps API Key
This will be the first step. Here you'll get to know where and how you need to purchase an API Key.
Watch this video:
Follow the steps below:
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.
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.
- 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.
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 onto creating your API Key.
Step 4: Generate Your API Key
You will now receive your API Key.
Copy the API key to your clipboard.
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 'Credentials' option
Select 'APIs & Services' from the list of options.
Step 3: Click on 'Create credentials' > API Key
On clicking the '+Create Credentials' button, a drop-down appears.
Select 'API Key' here:
When you do so, a popup appears.
Here you'll get to see your new API key:
Now copy this API key and paste it into your clipboard or use it anywhere you want.
You'll see this new API key listed on the Credentials page under 'API Key':
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 from FunnelKit (formerly WooFunnels)
You'll land on the global settings page of Checkout.
Next, click on the Address Autocomplete tab.
Step 2: Insert the purchased Google Maps API Key here
Once done, hit the 'Save Changes' button.
Step 3: Go to the Optimizations tab and enable Google Address Autocomplete
In the Optimizations tab, you'll find that the first option is Google Address Autocompletion.
Hit the toggle and enable it.
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.
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.
That's it, now you're good to go!