Checkout Shell

The checkout shell owns checkout scope, form serialization, notices, and order submission.

When To Use This Family

Use this family for the main checkout surface. It provides the checkout state scope, owns checkout form submission, renders checkout notices, and provides the submit button.

Quick Start

Checkout provider and form

<OmeWooCheckoutProvider>
{#slot default}
  <OmeWooCheckoutForm>
    {#slot default}
      <OmeWooBillingAddressForm />
      <OmeWooShippingAddressForm />
      <OmeWooPaymentMethodSelector />
      <OmeWooTermsCheckbox />
      <OmeWooCheckoutNotices />
      <OmeWooPlaceOrderButton />
    {/slot}
  </OmeWooCheckoutForm>
{/slot}
</OmeWooCheckoutProvider>

Components

Component key	Role
OmeWooCheckoutProvider	Layout and state scope for checkout components. It does not submit data.
OmeWooCheckoutForm	Real checkout form shell. Serializes authored checkout fields and submits Store API checkout.
OmeWooCheckoutNotices	Checkout notice region.
OmeWooPlaceOrderButton	Submit button for the checkout form.

Authoring Structure

CheckoutProvider
  CheckoutForm
    BillingAddressForm
    ShippingAddressForm
    ShippingMethodSelector
    PaymentMethodSelector
    TermsCheckbox
    CheckoutNotices
    PlaceOrderButton
  OrderSummary

OrderSummary can sit inside the provider but does not have to be inside the <form>.

CheckoutProvider

CheckoutProvider provides a stable checkout root and state scope. It is the preferred wrapper for full checkout layouts because CheckoutForm uses the closest provider as its serialization scope.

CheckoutForm

CheckoutForm:

• Serializes all [data-ome-woo-checkout-field] controls inside the provider or form scope.
• Copies billing to shipping when the different-shipping toggle is unchecked.
• Runs local validation before submit.
• Persists field changes with Store API update requests.
• Submits checkout through Store API.
• Dispatches checkout lifecycle events.
• Redirects when the Store API payment result returns a redirect URL.

Form state is mirrored as data-ome-state: idle, loading, updating, processing, success, or error.

Checkout lifecycle integrations should listen for the checkout events documented in Woo Custom Events: ome-woo:checkout-loaded, ome-woo:checkout-started, ome-woo:checkout-complete, and ome-woo:checkout-error.

CheckoutNotices Props

Prop	Meaning
preview.show_in_builder	Shows a sample notice in Etch builder preview.
preview.notice_type	Preview notice type.
accessibility.aria_label	Notice region accessible label.
accessibility.live_region	Live region politeness.

PlaceOrderButton Props

Prop	Meaning
content.label	Button text.
accessibility.aria_label	Accessible label.

PlaceOrderButton subscribes to checkout store state and disables itself while checkout is busy.

Related Guides

• Checkout Page
• Checkout Fields and Validation
• Woo Custom Events