Skip to main content

Checkout Fields and Validation

Billing and shipping address forms are authored components, but their field rules come from WooCommerce.

Field Schema

CheckoutFieldSchema::build() produces:

Schema keyMeaning
billing.countriesAllowed billing countries.
shipping.countriesAllowed shipping countries.
billing.fieldsWoo billing field rules normalized without the billing_ prefix.
shipping.fieldsWoo shipping field rules normalized without the shipping_ prefix.
localesCountry-specific label, required, hidden, type, validation, priority, and autocomplete overrides.
statesState/province options by country.
defaultsBase billing country/state and shipping defaults.

The runtime normalizes this schema before applying it, so missing or malformed schema data becomes empty field lists rather than runtime crashes.

Address Form Props

Both address forms use the shared address property builder.

Prop groupMeaning
content.legend and content.show_legendFieldset legend text and visibility.
Per-field use_woo_defaultsWhen true, Woo field copy and validation copy win.
Per-field custom copyLabel, field hint text, and local validation message used only when Woo defaults are disabled.
accessibility.aria_labelAccessible name for the fieldset.
preview.stateBuilder preview state for fields.

Billing fields include first name, last name, company, address lines, city, state, postcode, country, email, and phone. Shipping fields include the same address fields except email and phone.

Country and State Controls

Country and state are UIChoice-backed controls with hidden transport inputs. Runtime behavior:

  1. Render country options from the schema.
  2. Select a default from the current value or Woo defaults.
  3. Render state as a select when the selected country has predefined states.
  4. Render state as a text input when the country requires free text.
  5. Hide state when Woo marks it hidden.
  6. Re-apply field labels, priorities, hidden flags, required flags, input types, and autocomplete tokens after country changes.

E2E covers changing billing country from US to PL and verifies that state switches from ready to hidden with an empty value.

Different Shipping Address

ShippingAddressForm includes a different-shipping toggle. Runtime hides or shows the shipping fields based on that checkbox.

Checkout serialization follows the toggle:

Toggle statePayload behavior
UncheckedBilling address is copied to shipping.
CheckedRendered shipping fields are serialized separately.

Local Validation

CheckoutForm validates rendered fields before sending Store API requests.

ValidationBehavior
Required fieldsChecked on submit; required checks can be overridden by rendered data-ome-required.
EmailBilling email must match the local email pattern.
CountryCountry value must exist in schema options.
StateState value must exist when the selected country has predefined states.
Hidden fieldsHidden Woo fields are not validated.
Rendered field scopeOnly fields present in the authored checkout scope are validated.

On local validation failure, no Store API checkout request is sent. E2E verifies invalid email blocks before /wc/store/v1/checkout.

Store API Field Errors

If Woo returns checkout errors, the runtime maps them to fields when possible:

  • It reads data.params field keys from Store API errors.
  • It falls back to known Woo error codes such as missing email, first name, last name, address, country, postcode, phone, city, and state.
  • It marks matching inputs with aria-invalid, updates field error text, and links fields to error messages with aria-describedby.

Terms and Notices

TermsCheckbox tells the checkout store whether terms are required and accepted. If required terms are unchecked, the checkout store emits a local terms_required error and CheckoutNotices renders the message.

CheckoutNotices renders text-only checkout notices from local validation and Store API errors. E2E verifies the terms-blocked flow and that notice contents are safe text.