Help | Checkout Extension | To Block Postcode

Partner Discussions
1

Hi Developer,

I am trying to create a checkout extension function that would block the postcode in the checkout page.

Below is my extension code to block postcode 2022, however, it is not working/blocking.

I would really appreciate your help and information:

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

export default reactExtension(
  "purchase.checkout.shipping-option-list.render-after",
  () => <ZipCodeValidator />
);

function ZipCodeValidator() {
  const shippingAddress = useShippingAddress();

  useBuyerJourneyIntercept(({ canBlockProgress }) => {
    const zip = shippingAddress?.zip;

    if (canBlockProgress && zip === "2022") {
      return {
        behavior: "block",
        reason: "Invalid ZIP Code.",
        errors: [
          {
            message: "We do not ship to ZIP code 2022. Please enter a different ZIP code.",
          },
        ],
      };
    }

    return { behavior: "allow" };
  });

  return (
    <BlockStack>
      <Banner status="critical">
        We do not ship to ZIP code 2022. Please provide a different ZIP code.
      </Banner>
    </BlockStack>
  );
}

Many thanks

2

Hi @Ankit_Khand,

Do you have the right permissions in your checkout extension to access useShippingAddress?

If not, you can take a look at this doc Work with protected customer data.

Screenshot 2024-12-20 at 16.13.08
Screenshot 2024-12-20 at 16.13.081194×408 25.7 KB

1 Like
3

Hi @Ismail_Namdar,

Thank you for your response, I manage to fix this by below code:

        errors: [{
          message: "We do not ship to PO Box. Please provide a physical address.",
          target: '$.cart.deliveryGroups[0].deliveryAddress.address1'
        }]

Many thanks

1 Like
4

Glad you figured this out Ankit - thanks for updating here :slight_smile:

1 Like