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?