In this guide, you'll learn how to enable the storefront's built-in DaData address autocomplete for checkout, or add a provider of your own for another country or service.

Address input on the checkout's address step is a pluggable provider, not a fixed set of fields. The storefront ships one real provider, DaData for Russian addresses, plus a plain address field as the fallback and a manual entry mode the buyer can switch to at any point.

AddressAutocomplete reads the active provider from an environment variable and switches on it:

src/modules/common/components/address-autocomplete/index.tsx
1const renderAutocomplete = () => {
2  switch (true) {
3    case isDaData(addressAutocompleteProvider):
4      return <DaDataAddressInput {...props} />
5    default:
6      return <PlainAddressInput {...props} />
7  }
8}

addressAutocompleteProvider and isDaData both come from src/lib/constants.tsx. Any value other than dadata, including an unset variable, falls through to PlainAddressInput (providers/plain.tsx), which renders a single address field with no autocomplete at all.

Set two environment variables in apps/storefront/.env.local:

apps/storefront/.env.local
1NEXT_PUBLIC_ADDRESS_AUTOCOMPLETE_PROVIDER=dadata
2NEXT_PUBLIC_ADDRESS_AUTOCOMPLETE_PROVIDER_API_KEY=

Get the API key from your DaData account. DaDataAddressInput (src/modules/common/components/address-autocomplete/providers/dadata.tsx) passes it directly to react-dadata's AddressSuggestions component, which only suggests Russian addresses.

Every provider component takes the same props, AddressFields in, AddressFields out:

src/modules/common/components/address-autocomplete/types.ts
1export type AddressFields = {
2  address_1: string
3  postal_code: string
4  city: string
5  province: string
6}
7
8export type AddressAutocompleteProps = {
9  values: AddressFields
10  onChange: (fields: AddressFields) => void
11  required?: boolean
12}

To add a provider for another country or service:

1. Create a file under providers/, implementing AddressAutocompleteProps, that calls onChange with an AddressFields object whenever the visitor picks a suggestion.
2. Add a case for it in the renderAutocomplete switch shown above, alongside a small isYourProvider(provider?: string) helper next to isDaData in src/lib/constants.tsx.
3. Point NEXT_PUBLIC_ADDRESS_AUTOCOMPLETE_PROVIDER at the id your case and helper check for.

You can model a new provider's props and onChange calls on PlainAddressInput, a working, minimal example. It doesn't call any external API itself.