Checkout extension to make billing address phone field required

Shopify Plus
, ,
1

I am using checkout extension checkout UI to make the phone field for billing address required. its working with the code below, but the error message only shows on the top of the checkout, not under the phone field. See screenshot below.

This ‘$.cart.billingAddress.phone’ is supposed to target the billing phone field and display the error below it if i understand correct, but dosent seem to work.

Am I missing something?

        errors: [
          {
            message: 'Telefon er påkrevd', // Error message displayed to the user
            target: '$.cart.billingAddress.phone',
          },
        ],

GlennAppsal_0-1739127933635.png
GlennAppsal_0-1739127933635.png944×783 26.3 KB

import {
  reactExtension,
  useBuyerJourneyIntercept,
  useBillingAddress,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.contact.render-after',
  () => <Extension />,
);

function Extension() {
  // Dynamically get the billing address
  const billingAddress = useBillingAddress();

  console.log("? Billing Address Data:", billingAddress); // Debugging log for billingAddress

  useBuyerJourneyIntercept(({ canBlockProgress }) => {
    console.log("? Intercept Triggered: Can Block Progress?", canBlockProgress);

    // Ensure the billing address is available
    if (!billingAddress) {
      console.warn("⚠️ WARNING: Billing address is undefined.");
      return { behavior: 'allow' };
    }

    console.log("? Phone Number Found:", billingAddress.phone);

    // Block checkout if the phone field is missing or empty
    if (canBlockProgress && (!billingAddress.phone || billingAddress.phone.trim() === '')) {
      console.log("? Blocking checkout: Phone number is missing!");

      return {
        behavior: 'block',
        reason: 'Phone number is required for order confirmation.',
        errors: [
          {
            message: 'Telefon er påkrevd', // Error message displayed to the user
            target: '$.cart.billingAddress.phone',
          },
        ],
      };
    }

    console.log("✅ Phone number exists. Allowing checkout.");
    return {
      behavior: 'allow',
    };
  });

  return null;
}