Configure Address Autocomplete for Your B2C Commerce PWA Kit Storefronts

Address autocomplete streamlines checkout in your B2C Commerce Progressive Web App (PWA) Kit storefronts on First Party data centers. During checkout, shoppers can enter the first three characters of their shipping or billing address to instantly receive Google-powered recommendations. When a shopper selects an address from the list of recommendations, Google completes the remaining fields.

Address autocomplete shipping and billing address

If you want to test address autocomplete in a sandbox, staging, or development instance, set up your own Google Cloud Platform (GCP) project and billing, and your own API Key for the Google Maps Platform. Then, input the API Key as a new GOOGLE_CLOUD_API_KEY environment variable in your Managed Runtime (MRT) project. See Getting started with Google Maps Platform and Environment Variables. You can also configure a custom API Key in sandbox, staging, development, and production instances.

  1. If your PWA Kit isn’t version 3.15 or later, Upgrade to v3.

  2. (Required only for production instances) To allow the Google API key to become available in your PWA Kit storefront, update the hostnames in your alias file.

    a. In Business Manager, click App Launcher, and then select Merchant Tools | Site | SEO | Aliases.

    b. Specify your hostnames in the alias file and save your changes.

    See Hostname Aliases, Configure a Hostname Alias, and Configure MRT Routing Rules in Business Manager.

  3. Add the sfcc.shopper-configurations security scope to the Shopper Configurations API for your PWA Kit SLAS client.

    The Shopper Configuration API retrieves the configuration that PWA Kit uses to enable address autocomplete. See Authorization for Shopper APIs and Authorization Scopes Catalog.