Checkout UI Extension - Billing Req. Block Progress

Extensions
1

I am attempting to require all Billing Address Phone Numbers.

The Checkout UI Extension I made blocks the progress when it is not filled out but the error message happens at the top of the page.

The ideal solution is to simply ensure there is an attribute change to the Billing Address Phone to be required or at least show the error message directly below the input field.

I have tried numerous ways to do this but none of which work:

This is the working code which shows the alert error at the top of the checkout:

function App() {
  const canBlockProgress = useExtensionCapability("block_progress");
  const billingAddress = useBillingAddress();

  useBuyerJourneyIntercept(({ canBlockProgress: canBlock }) => {
    if (canBlock && !billingAddress?.phone) {
      return {
        behavior: "block",
        reason: "Billing phone number is required",
        errors: [
          {
            message: "Please enter your billing phone number to continue.",
          },
        ],
      };
    }

    return {
      behavior: "allow",
      perform: () => {},
    };
  });

  return null;
}

I have tried the following to target the Billing Address Phone but the extension timesout:

Using field

errors: [{
     message: "Please enter your billing phone number to continue.",
     field: "billingAddress.phone",
},],

Using target

errors: [{
     message: "Please enter your billing phone number to continue.",
     target: "billingAddress.phone",
},],

errors: [{
     message: "Please enter your billing phone number to continue.",
     target: "$.cart.billingAddress.phone",
},],

errors: [{
     message: "Please enter your billing phone number to continue.",
     target: "$.cart.localizedField.billingAddress.phone",
},],

Using perform with useApplyAttributeChange

perform: (result) => {
            if (result.behavior === "block") {
              useApplyAttributeChange({
                attribute: "billingAddress.phone",
                value: "",
                validation: {
                  required: true,
                  errorMessage: "Please enter your billing phone number to continue.",
                },
              });
            }
          }

Does anyone have any insight into these Checkout UI fields and their error messaging for Billing?

2

According to useBuyerJourneyIntercept doc, you can show error message to input field of deliveryAddress only. Showing error message to input field of billingAddress is not supported.

image
image562×519 43 KB

3

@Stats_Marketing Please use the Cart and checkout validation function API.

Use the appropriate target from the list to show the error message:

4

@AMaL as mentioned by @Tomoyuki_Kashiro it appears as though we still cannot target the specific field I need which is the BillingAddress.Phone (The Billing Phone number).