feat(checkout): CHECKOUT-10026 Connect new Google Places API behind feature flag by bc-maxy · Pull Request #3142 · bigcommerce/checkout-js

bc-maxy · 2026-07-06T23:45:05Z

What/Why?

This is part II of this change: #3135, where I actually wire up this new Places API service to production, but hide new functionality behind a feature flag.

When the CHECKOUT-10026.new_google_places_api experiment is on, address autocomplete uses Google's new Places API (session-token based, AutocompleteSuggestion/Place classes) instead of the legacy API service. If the new API is denied due to permissions error (gRPC PERMISSION_DENIED), we assume that the service is not enabled for the store and silently fall back to the legacy API for the rest of the session. No visible errors for users and no visible change between old and new service - this is an infrastructure swap behind a feature flag.

NOTE: when the flag is off, there will be no change for end users, However, the code won't be byte-to-byte identical: we initialize newGooglePlacesApiServiceRef.current with new NewGooglePlacesApiService(apiKey) unconditionally on mount, even when the flag is off. It has no side effects though (no network call, no script load - the script loader inside of it is lazy), so this is just a trivial extra allocation without any functional change for end users.

CHECKOUT-10026.new_google_places_api is currently set to true in integration and staging and false for everyone in production.

Rollout/Rollback

Set CHECKOUT-10026.new_google_places_api experiment to false if the store where we rolled out the feature is affected. For issues with other stores revert the PR.

Testing

New CI tests + manual testing.

If you want to test yourself you can use these API keys in https://console.cloud.google.com/apis/credentials?project=bc-hackathon-env:

Google Maps API Key test - our old API key that still has access to old Places API and has no access to new Places API. Represents old users.
Maxs Places API Key Test - our new API key that has access to new Places API and no access to old Places API. Represents new users.

My tests are below:

With experiment set to false (same as current production)

Existing customers with old API keys:

Screen.Recording.2026-06-30.at.3.16.03.PM.mov

New customers with new API keys (doesn't work):

Screen.Recording.2026-06-30.at.3.18.15.PM.mov

With experiment set to true

Existing customers with old API keys (Initial 403, then fallback to the old service. Billing step will remember that we fallback and skips new api):

Screen.Recording.2026-06-30.at.3.30.18.PM.mov

New customers with new API keys (just works):

Screen.Recording.2026-06-30.at.3.24.12.PM.mov

Note

Medium Risk
Touches checkout address entry and external Google APIs with session-wide fallback behavior; mitigated by default-off production flag and extensive tests, but wrong fallback could break autocomplete for some API keys.

Overview
Checkout address line 1 autocomplete can use Google's new Places API when LaunchDarkly flag CHECKOUT-10026.new_google_places_api is on. AddressForm reads the experiment and passes isNewPlacesApiEnabled through GoogleAutocompleteFormField into GoogleAutocomplete.

Autocomplete logic moves into useGoogleAutocomplete, which prefers the new API for suggestions and place details and keeps the legacy GoogleAutocompleteService as fallback. On gRPC permission denied, a session-scoped latch marks the new API unavailable and subsequent requests use legacy only; other errors clear suggestions (suggestions) or skip onSelect (details) without latching. With the flag off, only legacy runs. Legacy shares the new API's script loader when the flag is on so Maps JS is not loaded twice.

GoogleAutocomplete is thinned to UI wiring; legacy prediction mapping lives in utils.toAutocompleteItems. GoogleAutocomplete.test.tsx covers happy path, permission fallback, transient retries, and flag-off behavior.

^{Reviewed by Cursor Bugbot for commit 52cbcd8. Bugbot is set up for automated code reviews on this repo. Configure here.}

bc-maxy · 2026-07-07T01:26:51Z

cursor review

bc-maxy · 2026-07-07T02:16:52Z

cursor review

bc-maxy · 2026-07-07T02:24:45Z

cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit c05b09f. Configure here.}

bc-peng · 2026-07-08T06:46:32Z

-    const onSelectHandler = (item: AutocompleteItem) => {
+    const isUsingLegacyApi = () => !isNewPlacesApiEnabled || newGooglePlacesApiState.isUnavailable;
+
+    const finalizeSelection = (


It looks like many lines are added to this file.
Is it possible to move them out as separate file(s) to keep this file small?

The rest of the PR looks good.

Thanks for checking it @bc-peng 🙏 I made changes here: 33ca5c2. Is this what you had in mind?

…ate hook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 33ca5c2. Configure here.}

…as well

richapatel1510 · 2026-07-09T07:26:03Z

+    const fetchSuggestionsWithLegacyApi = (input: string): void => {
+        const service = googleAutocompleteServiceRef.current;
+
+        if (!service) return;
+
+        service.getAutocompleteService().then((autocompleteService) => {
+            autocompleteService.getPlacePredictions(
+                { input, types: types || ['geocode'], componentRestrictions },
+                (results) => {
+                    setItems(toAutocompleteItems(results ?? undefined));
+                },
+            );
+        });
+    };
+
+    const fetchSuggestionsWithNewApi = (input: string): void => {
+        const service = newGooglePlacesApiServiceRef.current;


Not blocking, just a thought. Does it makes sense to have 2 classes or similar for old and new aPI and then based on the isUsingLegacyApi we use the correct class in the hook to avoid naming such as fetchSuggestionsWithNewApi/fetchSuggestionsWithLegacyApi

Thanks for checking @richapatel1510 🙏 I like this idea. However, I tried it as two classes and initialization and updates ended up more verbose (constructors, and passing render-scoped values like types/fields in on every call) without a real readability gain. Instead, I grouped the existing functions into two objects (legacyApi/newApi), which in my mind gets us the similar naming clarity you were after, without the class overhead. What do you think about that?

bc-maxy added 2 commits July 7, 2026 09:44

feat(checkout): CHECKOUT-10026 Wire up new Google Places API

c5a0e9f

chore(checkout): CHECKOUT-10026 Rename test mocks for easier read

e2b9ac4

cursor Bot reviewed Jul 7, 2026

View reviewed changes

Comment thread packages/core/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx Outdated

Comment thread packages/core/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx Outdated

fix(checkout): CHECKOUT-10026 Resolve cursor comments

ee5e992

cursor Bot reviewed Jul 7, 2026

View reviewed changes

Comment thread packages/core/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx Outdated

fix(checkout): CHECKOUT-10026 Fix closure issues

c05b09f

cursor Bot reviewed Jul 7, 2026

View reviewed changes

bc-maxy marked this pull request as ready for review July 7, 2026 02:34

bc-maxy requested a review from a team as a code owner July 7, 2026 02:34

bc-maxy mentioned this pull request Jul 7, 2026

fix(checkout): CHECKOUT-10026 Add new Places API support for Google Autocomplete with legacy fallback #3110

Closed

bc-peng reviewed Jul 8, 2026

View reviewed changes

fix(checkout): CHECKOUT-10026 Move service selection logic to a separ…

33ca5c2

…ate hook

cursor Bot reviewed Jul 9, 2026

View reviewed changes

Comment thread packages/core/src/app/address/googleAutocomplete/useGoogleAutocomplete.ts Outdated

fix(checkout): CHECKOUT-10026 Add latest input guard for catch block …

d23c96d

…as well

richapatel1510 reviewed Jul 9, 2026

View reviewed changes

chore(checkout): CHECKOUT-10026 A lil refactor of autocomplete hook

52cbcd8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(checkout): CHECKOUT-10026 Connect new Google Places API behind feature flag#3142

feat(checkout): CHECKOUT-10026 Connect new Google Places API behind feature flag#3142
bc-maxy wants to merge 7 commits into
masterfrom
checkout-10026-wiring

bc-maxy commented Jul 6, 2026 •

edited by cursor Bot

Loading

Uh oh!

bc-maxy commented Jul 7, 2026

Uh oh!

Uh oh!

Uh oh!

bc-maxy commented Jul 7, 2026

Uh oh!

Uh oh!

bc-maxy commented Jul 7, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

bc-peng Jul 8, 2026

Uh oh!

bc-peng Jul 8, 2026

Uh oh!

bc-maxy Jul 9, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

richapatel1510 Jul 9, 2026

Uh oh!

bc-maxy Jul 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

bc-maxy commented Jul 6, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What/Why?

Rollout/Rollback

Testing

With experiment set to false (same as current production)

With experiment set to true

Uh oh!

bc-maxy commented Jul 7, 2026

Uh oh!

Uh oh!

Uh oh!

bc-maxy commented Jul 7, 2026

Uh oh!

Uh oh!

bc-maxy commented Jul 7, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

bc-peng Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

bc-peng Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

bc-maxy Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

richapatel1510 Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

bc-maxy Jul 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bc-maxy commented Jul 6, 2026 •

edited by cursor Bot

Loading