AddressValidation container

The AddressValidation container displays a suggested shipping address (from a third-party verification service) alongside the entered address, allowing shoppers to choose between them.

Typically invoked from a modal during address creation after calling your address verification service.

AddressValidation configurations

The AddressValidation container provides the following configuration options:

Option	Type	Req?	Description
originalAddress	CustomerAddressesModel | null	Yes	Original address set by the user.
suggestedAddress	Partial<CustomerAddressesModel> | null	Yes	Address suggestion to present to the user.
selectedAddress	'suggested' | 'original' | null	No	Controls which address is pre-selected when the container renders. Defaults to null (no pre-selection).
handleSelectedAddress	function	No	Async callback fired when the shopper selects an address. Receives the selection and the chosen address.

AddressValidationProps interface

The AddressValidation container receives an object that implements the following interface:

interface AddressValidationProps {
  selectedAddress?: 'suggested' | 'original' | null;
  suggestedAddress: Partial<CustomerAddressesModel> | null;
  originalAddress: CustomerAddressesModel | null;
  handleSelectedAddress?: (payload: {
    selection: 'suggested' | 'original';
    address: CustomerAddressesModel | null | undefined;
  }) => void;
}

CustomerAddressesModel type

The CustomerAddressesModel type has this shape:

interface CustomerAddressesModel {
  city?: string;
  countryCode?: string;
  region?: { region: string; regionCode: string; regionId: string | number };
  postcode?: string;
  street?: string;
}

Normalization

Transform your address verification service output to CustomerAddressesModel format (with fields like street, city, region, countryCode, postcode) before passing it to the container. Missing properties default to the original address values.

Example

For a complete walkthrough, see the Validate address tutorial.