I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are:
Filling out a credit card form
Filling out shipping and billing address forms
Maybe I’m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my 12-digit credit card number for every new e-commerce site I visit, nor have to save my credit card details with them.
For the second, the only time-saving option given by most shopping websites is to save your shipping address, but you still have to fill the form (arrghh!). This is where the challenge is. I’ve had most of my orders returned because my address (which I thought was the right address) could not be located or confirmed by the app for one reason or another.
Address inputs are challenging
Getting a user’s address through an input form is a clean solution but can also be a herculean task to the user. Here’s why:
If the user is new in a particular city, they might not know their full address
If the user wants to ship to a new address which isn’t saved (e.g shipping to a workplace or a friend’s address instead of the saved home address)
If the user resides in a city with very difficult address systems
If the user is plain lazy like me
A potential solution: get the address automatically
Getting the user’s address by the tap/click of a button. Yup, that’s easy! The UX is great as it saves the user both the time and effort of filling out some form. It will also save the store owner time, effort, and even money in some cases, as there’ll likely be a reduction in the number of incorrectly placed orders or shipments.
Get the HTML button and listen for a click event
Get the user’s location (latitude and longitude) on a button click
Show the user’s location on a Google map
Pass the latitude and longitude to the Google Maps Geocode API URL
Display the returned address (or list of addresses) on the UI for the user to select one
Listen for map events and repeat steps 4 and 5
Pre-fill the form with the address data the user selects
Getting started and setting up
We’re also going to use the Google Maps API for displaying the map and getting the user’s human-readable address. We’ll need an API key to do this. Here’s how to get one:
Sign in to your Google Developer’s Console Account
Create a new project or select an existing one
Click on “Enable APIs and Services”
Click “Enable” on the new page that comes up. Go back to the previous page and do a search for “Geocoding API,” click on it and enable it as well
Then, on the right nav of the page, click on Credentials, copy the API key on the page and save it to a file
Now, let’s update our document to show the map and let the user know it can be used to get their current location as the address. Also, we will add a form that’s pre-filled with the address the user selects.
You can click the button below to use your current location as your shipping address