Address autocomplete/suggestions reduce typing

Typing a full address on mobile is the single slowest part of checkout. Without autocomplete, shoppers hunt-and-peck through street, city, state, and zip on a cramped keyboard, with every typo risking a shipping failure downstream. Browser-level autocomplete attributes alone let the OS fill saved addresses in one tap — skipping them is a pure self-own. Richer autocomplete via Google Places or Smarty cuts typing by roughly 20% and catches undeliverable addresses before the order is submitted.

At minimum, add correct autocomplete attributes to every address field in src/components/AddressForm.tsx — the browser already has the data, you just have to let it fill. For richer UX, integrate Google Places or a comparable API behind a debounced input.

<input autoComplete="address-line1" />
<input autoComplete="address-level2" />
<input autoComplete="address-level1" />
<input autoComplete="postal-code" />
<select autoComplete="country" />

• ID: ecommerce-cart-ux.address-forms.autocomplete

• Severity: high

• What to look for: Count all address input fields in the checkout flow (street, city, state, zip/postal, country). For the primary address field (street line 1), check for autocomplete integration by searching for: Google Places API, Mapbox, Smarty (SmartyStreets), PostalCodes API, or HTML autocomplete attributes. List all address-related API keys or SDK imports found. Count how many address fields auto-populate when a suggestion is selected (at least 3 of 5 fields should populate: street, city, state, zip, country).

• Pass criteria: At least 1 address suggestion mechanism is present — either an autocomplete API integration or proper HTML autocomplete attributes on at least 3 of 5 address fields. Selecting a suggestion populates at least 3 address fields automatically. Report: "Address form has X fields, Y have autocomplete attributes. API integration: Z."

• Fail criteria: All address fields are plain text inputs with no autocomplete HTML attribute and no third-party suggestion API.

• Skip (N/A) when: Address is not collected in checkout (e.g., digital-only products, no physical shipping).

• Detail on fail: Example: "Found 5 address fields in src/components/AddressForm.tsx. 0 of 5 have HTML autocomplete attributes. No Google Places or similar API integration found. Users must type full address manually."

• Cross-reference: For international address format handling, see the international-support check below. For API key security of address suggestion services, the Security Headers audit covers environment variable handling.

• Remediation: Add autocomplete integration in your address form at src/components/AddressForm.tsx. At minimum, add HTML autocomplete attributes:

  // src/components/AddressForm.tsx — minimum: HTML autocomplete attributes
  <input name="street" autoComplete="address-line1" />
  <input name="city" autoComplete="address-level2" />
  <input name="state" autoComplete="address-level1" />
  <input name="zip" autoComplete="postal-code" />
  <select name="country" autoComplete="country" />
  

  For a richer experience, integrate Google Places API:

  // src/components/AddressAutocomplete.tsx
  import usePlacesAutocomplete, { getGeocode } from 'use-places-autocomplete'
  
  function AddressAutocomplete({ onSelect }) {
    const { suggestions, setValue } = usePlacesAutocomplete()
    // ... render suggestions dropdown
  }