Help Needed: Address Field 1 and Address Field 2 Returning Undefined in Checkout UI Extension

Extensions
1

Hi everyone,

I’m working on adding a character limit for the Address Field 1 in the checkout using a Checkout UI Extension. However, when I try to fetch the values of Address Field 1 and Address Field 2, both are returning undefined.

Has anyone else faced this issue or know how to handle it? Any guidance or code examples would be greatly appreciated!

Thanks in advance!

here is my code:

import { extension } from "@shopify/ui-extensions/checkout";
 
export default extension("purchase.checkout.block.render", (root, { buyerJourney, shippingAddress }) => {
  // Listen for updates to the shippingAddress object
  shippingAddress.subscribe((updatedAddress) => {
    console.log("Shipping Address Updated:", updatedAddress);
 
    // Check if address1 is now populated
    if (!updatedAddress.address1 || updatedAddress.address1.trim() === "") {
      console.warn("Address Line 1 is still missing.");
    } else {
      console.log("Address Line 1 is populated:", updatedAddress.address1);
    }
  });
 
  // Intercept the buyer journey to validate before proceeding
  buyerJourney.intercept(() => {
    const currentAddress = shippingAddress.current || {};
    console.log("Intercept triggered. Current Address:", currentAddress);
 
    if (!currentAddress.address1 || currentAddress.address1.trim() === "") {
      return {
        behavior: "block",
        reason: "Address Line 1 is required.",
        errors: [{ message: "Please provide a valid shipping address." }],
      };
    }
 
    return { behavior: "allow" };
  });
});
2

Hi Priyanka,

Does your app have access to protected customer data? That may be why you are always receiving undefined values.

1 Like