Adding address autocomplete to the fast checkout
When you're using WooCommerce Fast Cart, you can speed up the customer journey even further by enabling address autocomplete. This is powered by Google Maps and is an excellent way to save your customers time by tapping into their huge address database. The customer starts typing their address and can then select the remaining details from a list of matching addresses.
Enabling address auto-complete
Enable address autocomplete on the plugin settings page at WooCommerce → Settings → Fast Cart. Once enabled, a 'Google API key' field appears underneath.
Follow the instructions below to get an API key - this is essential for the autocomplete to work. If you do not enter an API key then autofill will not be enabled, and customers will have to enter their full address manually.
How to get a Google API key
Since the address autocomplete is powered by Google, you must enter an API key in order to use it. While the process can seem daunting, it is easy if you follow these instructions exactly:
- Log into your Google account.
- Go to the Google Cloud Platform page, and follow the form to agree to Terms of Service if you haven't already setup Google APIs in the past.
- Create a new project by clicking 'Select a project' button on the upper left of your dashboard......then click "New Project" on the upper right of the popup that will appear.
- The next step will ask you to enter a project name and possibly some additional details if your Google account is part of a Workspace organization. In the project name, you can enter whatever you would like, just make sure it is something you will remember. When you are done, click the big 'Create' button.
- After the project is created, it may take a few moments for your project to be created. When it's ready, a notification will appear on the welcome page. Click the "Select Project" button.
If for some reason you miss the notification, you can also select the project by clicking the "Select a project" dropdown on the upper left, and clicking on your project name.
- At this point you should get a notification at the bottom of your browser window that says something like, Now viewing project "My Project", and you will see your project name in the upper left corner where it used to say "Select a project".
- In the search bar next to the project dropdown, type "maps javascript api" and select "Maps JavaScript API" from the MARKETPLACE section of the dropdown.
- Now you should be on the Maps JavaScript API product page. Click the blue "ENABLE" button.
- After a moment, if this is your first time setting up a Google API, you will be taken through a setup process which adds billing information to your account. Follow the prompts to enter your credit card information and then fill out a required survey. Even if you never use beyond the $200/month free credit, Google still requires that a credit card is added to the account.
- Once all the setup is complete, you should see a dialog which provides the API key you need. Make sure the first option, "Enable all Google Maps APIs for this project" is checked, and we also recommend checking the second option so that your API key does not ever charge your credit card.
You can copy your key now, or retrieve it later. Either way, please ensure you follow the remaining steps as your key won't be ready to use yet. Click the blue "Go to Google Maps Platform" button to proceed through the setup.
- The next dialog which appears should be titled "Protect your API key". We strongly recommend completing this step, as it will prevent your API key from being used on websites beside your own.
From the "Select restriction type" dropdown, select "HTTP referrers (web sites)", then enter the URL of your website not including the "https://" part. If your website address uses a "www", make sure to enter it here also.
Click the blue "Restrict Key" button when you're done.
- You should now be ready to use your new API key with Fast Cart! You can copy the key at any time by returning to the Google Cloud console, opening your project, clicking "Keys & Credentials", and "SHOW KEY" next to your project. Or click on this direct link to the credentials page: Google API Keys & Credentials.
Adding your Google API key to Fast Cart
Once your API Key has been generated and setup, you can add it to Fast Cart. Open the 'Fast Cart' tab from your WooCommerce settings, and scroll down. Make sure "Allow customers to check out in the fast cart popup" and "Auto-fill the customer's address details in the fast checkout" are checked, and paste your API key into the box. If setup was successful, it will say "Valid key" next to the Google API key field.
Click the "Save Changes" button at the bottom of the settings page after the key has been validated, and Autocomplete should now be active in your checkout.
Important note: To keep your API secure and prevent unauthorized usage, we recommend restricting it so that it can only be used on your domain name or IP address. You can also set budget alerts and maximum usage quotas to avoid running up unexpected costs.