← All posts Tutorial

Add Australian address autocomplete to your checkout in 10 minutes

11 July 2026 · 5 min read

Typos, wrong postcodes and failed deliveries often start at the address field. Autocomplete removes most of that. With WattleAddr it does so without routing your customers’ keystrokes through an offshore ad platform.

1. Get your keys

In the console, create a workspace and copy two keys: a publishable key for the browser and a secret key for your backend. Lock the publishable key to your checkout domain so it can’t be used anywhere else.

2. Drop in the widget

Include the script and attach it to your existing address input. That’s the whole integration:

const wa = new WattleAddr('waddr_pk_live_…');
wa.attach('#shipping-address', {
  state: 'NSW',
  onSelect: (addr) => {
    form.suburb.value  = addr.components.locality;
    form.state.value   = addr.components.state;
    form.postcode.value = addr.components.postcode;
  },
});

3. Autofill the rest of the form

When a customer picks a suggestion, you get a structured record: unit, street number, street, locality, state and postcode, so you can populate every field at once and skip three inputs entirely.

Why session billing matters here

Checkout autocomplete fires a request on every keystroke. WattleAddr bills per session. The whole “find one address” interaction counts as a single lookup.

  • Fewer failed deliveries from bad addresses
  • Fewer fields for the customer to fill in
  • No customer data sent overseas

If you would rather not write any JavaScript at all, the one-tag widget does everything in this post from a single script include.

Get an API key Read the docs