useShippingAddress react hook not show zip for Australian postcodes

Retired Boards Appdev Custom Storefronts
1

Hi There, I am trying to collect the suburb, state and postcode in the checkout UI extension to be able to build shipping validation. However, everything populates except the zip (postal code).

It is a really simple code and should work:

import React from "react";
import {
  reactExtension,
  Banner,
  useShippingAddress
} from "@shopify/ui-extensions-react/checkout";

const checkoutBlock = reactExtension("purchase.checkout.block.render", () => <App />);
export { checkoutBlock };

function App() {
const address = useShippingAddress()
  return (
    <Banner>
      {address?.city}, {address?.provinceCode}, {address?.zip} 
    </Banner>
  );
}

Screenshot 2023-09-08 at 1.15.41 pm.png
Screenshot 2023-09-08 at 1.15.41 pm.png1165×756 49.6 KB

2

This seems like a correct way to use the useShippingAddress Hook to access the shipping address information.

Here are a couple of things you can check:

  1. Data availability: Ensure that the zip code is actually available in the shipping address. You can do this by logging the entire address object to the console and checking its properties.
console.log(address);

  1. Shipping address completion: The hook might not return the zip code if it’s not yet filled in by the user. Make sure the checkout process is at a stage where the shipping address, including the zip code, is already provided.

  2. API version: Ensure that the version of the @Shopify_77 /ui-extensions-react/checkoutpackage you are using supports the zip property. You can check the package documentation or update to the latest version.

  3. Property name: Ensure that you’re using the correct property name. While zip is commonly used, some APIs might use other names like postalCode.

Hope this helps,

3

Hey Liam,

I am also trying to use the useShippingAddress() and the address for mine would also be rendered as undefined even when the address is valid.