Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

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 checkout after calling your address verification service.

AddressValidation configurations

The AddressValidation container provides the following configuration options:

Option Type Req? Description
suggestedAddressCartAddressInput | nullNo Address suggestion to present to the shopper.
handleSelectedAddressfunctionNo 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 {
suggestedAddress: Partial<CartAddressInput> | null;
handleSelectedAddress?: (payload: {
selection: 'suggested' | 'original';
address: CartAddressInput | null | undefined;
}) => void;
}
  • suggestedAddress - The normalized address to propose to the shopper.
  • handleSelectedAddress - Called when the shopper selects an address. Use this to persist the selection or continue checkout.

CartAddressInput type

The CartAddressInput type has this shape:

interface CartAddressInput {
city: string;
countryCode: string;
postcode: string;
region: string;
street: string[];
}

Example

For a complete walkthrough, see the Validate shipping address tutorial.