Skip to main content

purchase.address-autocomplete.format-suggestion
Target

Requires access to protected customer data for some properties.

An extension target that formats the selected address suggestion provided by a purchase.address-autocomplete.suggest target. This formatted address is used to auto-populate the fields of the address form.

It must return a formattedAddress.

Caution

This extension target is only necessary if the corresponding purchase.address-autocomplete.suggest target does not provide a formattedAddress for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called.

If the purchase.address-autocomplete.suggest target is not implemented, then this target will not work.

Note

  • This target does not support rendering UI components.
  • This extension can only be developed as a JavaScript extension using the ui-extensions library.
  • The app extension configuration shopify.extension.toml file is shared between this extension target and purchase.address-autocomplete.suggest. This includes extension settings specified in the configuration file.

Anchor to addressautocompleteformatsuggestionapiAddressAutocompleteFormatSuggestionApi

The API object provided to the purchase.address-autocomplete.format-suggestion extension target.

required

The autocomplete suggestion that the buyer selected during checkout.

Requires access to protected customer data.

Was this section helpful?

Anchor to addressautocompleteformatsuggestionoutputAddressAutocompleteFormatSuggestionOutput

The object expected to be returned by the purchase.address-autocomplete.format-suggestion extension target.

required

The formatted address that will be used to populate the native address fields.

Was this section helpful?

Anchor to addressautocompletestandardapiAddressAutocompleteStandardApi

The base API object provided to this and other purchase.address-autocomplete extension targets.

required

The methods for interacting with Web Pixels, such as emitting an event.

[]
required

The metafields requested in the shopify.extension.toml file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.

App owned metafields are supported and are returned using the $app format. The fully qualified reserved namespace format such as app--{your-app-id}[--{optional-namespace}] is not supported. See app owned metafields for more information.

Requires access to protected customer data.

Tip

> Cart metafields are only available on carts created via the Storefront API version 2023-04 or later.*

[] | undefined
required

The custom attributes left by the customer to the merchant, either in their cart or during checkout.

| undefined
required

A stable ID that represents the current checkout.

Matches the token field in the WebPixel checkout payload and the checkout_token field in the REST Admin API Order resource.

<Target>
required

The meta information about the extension.

required

Utilities for translating content and formatting values according to the current localization Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.

Refer to localization examples for more information.

required

The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the i18n object instead.

[]
required

The metafields that apply to the current checkout.

Metafields are stored locally on the client and are applied to the order object after the checkout completes. They are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout.

Once the order is created, you can query these metafields using the GraphQL Admin API

<Data = unknown, Variables = Record<string, unknown>>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>
required

The method used to query the Storefront GraphQL API with a prefetched token.

Refer to Storefront API access examples for more information.

required

The session token providing a set of claims as a signed JSON Web Token (JWT).

The token has a TTL of 5 minutes.

If the previous token expires, this value will reflect a new session token with a new signature and expiry.

Refer to session token examples for more information.

required

The settings matching the settings definition written in the shopify.extension.toml file.

Refer to settings examples for more information.

Note

The settings are empty when an extension is being installed in the checkout editor.

required

The shop where the checkout is taking place.

required

The key-value storage for the extension.

It uses localStorage and should persist across the customer's current checkout session.

Caution

Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.

Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier, each activated extension target had its own storage.

required

The runner version being used for the extension.

| undefined

The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke.

Requires access to protected customer data.

| undefined

The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke.

Note

An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.

Requires access to protected customer data.

Was this section helpful?

purchase.address-autocomplete.format-suggestion

JavaScript

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
'purchase.address-autocomplete.format-suggestion',
async ({target}) => {
// 1. Use the suggestion the buyer selected
const {selectedSuggestion} = target;

// 2. Fetch the address parts to format the address
const {
address1,
address2,
city,
zip,
provinceCode,
countryCode,
} = await fetch(
`https://myapp.com/api/fetch-address?id=${selectedSuggestion.id}`,
);

// 3. Return a formatted address
return {
formattedAddress: {
address1,
address2,
city,
zip,
provinceCode,
countryCode,
},
};
},
);