Need help for checkout extension for address validation

Shopify Plus

Topic summary

A developer is building a Shopify checkout extension to validate shipping addresses and prevent customers from using PO Box addresses during checkout.

The goal is to display an error message and block checkout progression when a PO Box is detected in the shipping address fields (address1 or address2).

Technical approach:

  • Using @shopify/ui-extensions/checkout with the Checkout::Dynamic::Render extension point
  • Implementing a regex pattern (/\b[P|p][. ]?[O|o][. ]?[B|b][O|o][X|x]\b/) to detect PO Box variations
  • Listening to checkout state changes to trigger validation
  • Displaying a Banner component with critical status when PO Box is detected

Current issue:
The provided code is not functioning as expected. The code snippet appears corrupted or improperly formatted (contains reversed/garbled text), making it difficult to identify the specific implementation problem.

The developer is seeking assistance to troubleshoot why the validation logic isn’t working and how to properly block checkout when a PO Box address is entered.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello ,
I am working on one addion in checkout using checkout extention . where if customer enter PO box in shipping address during checkout, system show show error and not allow to proceed. here is my code, but its not working. any help wil be apriciated

import { extension, Banner } from "@shopify/ui-extensions/checkout";

export default extension("Checkout::Dynamic::Render", (root, api) => {
  const { checkout, i18n } = api;

  // Function to validate the shipping address
  function validateAddress(checkoutState) {
    const shippingAddress = checkoutState.shippingAddress || {};
    const addressLines = [shippingAddress.address1, shippingAddress.address2];
    const poBoxPattern = /\b[P|p][. ]?[O|o][. ]?[B|b][O|o][X|x]\b/;

    for (let line of addressLines) {
      if (line && poBoxPattern.test(line)) {
        displayErrorMessage();
        break;
      }
    }
  }

  // Function to display an error message
  function displayErrorMessage() {
    const banner = root.createComponent(Banner, {
      status: 'critical',
      title: i18n.translate('errors.poBoxNotAllowed'),
    }, i18n.translate('errors.poBoxNotAllowedMessage'));

    root.appendChild(banner);
    root.mount(); // Ensure to mount the root again to reflect the changes
  }

  // Listen for checkout updates
  checkout.on('change', (newCheckoutState) => {
    validateAddress(newCheckoutState);
  });

  // Initial validation in case the extension loads after an address is already entered
  validateAddress(checkout.getState());
});