Skip to content
geolith

Solution

Address autocomplete for checkout forms

geolith autocomplete fills a checkout address from a few keystrokes: call GET https://api.geolith.app/v1/autocomplete from the browser with a publishable key that only works on your site’s origins, and fill street, city, postal code and country from the chosen result. In the India benchmark (20 Oct 2026) the first suggestion was right for 82.5% of queries. Pricing is per request on flat monthly plans, with no per-session fees.

Get a free API keyRead the guides

What is checkout address autocomplete?

Checkout address autocomplete fills a shopper’s delivery address from a few keystrokes: the shopper picks a suggestion and the form fills street, city, postal code and country from it. It cuts typing errors that cause failed deliveries.

Detail

Fill the form from one result

Each suggestion carries the parts of the address in properties: name, street, neighbourhood, locality, region, postalcode, country and country_code. Map them to your form fields when the shopper picks a suggestion.

JavaScript (fetch)
async function suggest(text, signal) {
  const url = new URL('https://api.geolith.app/v1/autocomplete');
  url.searchParams.set('text', text);
  url.searchParams.set('size', '5');
  url.searchParams.set('api_key', 'YOUR_PUBLISHABLE_KEY'); // gc_pk_...
  const res = await fetch(url, { signal });
  if (!res.ok) return [];
  const { features } = await res.json();
  return features.map((f) => ({
    id: f.properties.gid,
    label: f.properties.label,
    lon: f.geometry.coordinates[0],
    lat: f.geometry.coordinates[1],
  }));
}

Detail

Keep the key safe

Create a publishable key (gc_pk_…) and list your shop’s origins on it. Requests from any other origin get HTTP 403 origin_not_allowed. Keep secret keys for your server.

Guides

See it in code

How to add address autocomplete to a React appA complete React component that suggests addresses as the user types, using the geolith autocomplete API with a browser-safe publishable key, debouncing, request cancelling and keyboard support.Read →How to add address autocomplete to a Vue or Nuxt appA Vue 3 composable and component for address autocomplete with the geolith API, plus the Nuxt runtime config to keep the publishable key out of your source.Read →

Questions

Checkout address autocomplete: questions

Is it safe to put the API key in front-end code?
Yes, if it is a publishable key with allowed origins. It only answers requests from those origins.
Which countries can the checkout cover?
Every country: the hosted API answers from a worldwide index of 678,043,458 places. Set boundary.country to the countries you ship to.

Geocode your first address in a minute.

100,000 requests a month free. Commercial use with attribution. No card.

Get a free API keyTry the live demoSee pricing