Help | Checkout Extension | To Block Postcode

Help | Checkout Extension | To Block Postcode

Kit_
Shopify Partner
36 1 6

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

Replies 0 (0)