# Order Received

> OrderReceivedProvider and the thank-you components that render the order on the checkout page after checkout completes.

# Order Received

`OrderReceivedProvider` owns the checkout page's two moments: a checkout slot for the in-progress checkout and a received slot for the thank-you experience. The received components read the `receivedOrder` source and render the order WooCommerce just created.

## When To Use This Family

Use this family on the WooCommerce checkout page. After a customer places an order, the Store API redirect lands back on the checkout page's order-received endpoint; without this family nothing renders there and the customer sees the empty checkout shell again.

## Quick Start

<CodeExample title="Checkout page with received content" language="jsx">
{`<OmeWooOrderReceivedProvider>
  {#slot checkout}
    <OmeWooCheckoutProvider>
      {#slot default}
        <OmeWooCheckoutForm />
      {/slot}
    </OmeWooCheckoutProvider>
  {/slot}
  {#slot received}
    <OmeWooOrderReceivedNotice />
    <OmeWooOrderReceivedDetails />
    <OmeWooOrderReceivedItems />
    <OmeWooOrderReceivedTotals />
    <OmeWooOrderReceivedCustomerDetails />
  {/slot}
</OmeWooOrderReceivedProvider>`}
</CodeExample>

Drop your existing checkout composition into the checkout slot unchanged. Pages that keep their checkout composition without the provider keep today's behavior.

## Components

| Component key | Role |
| --- | --- |
| `OmeWooOrderReceivedProvider` | Checkout page shell. Switches between the checkout slot and the received slot. |
| `OmeWooOrderReceivedNotice` | Thank-you notice with the order status. |
| `OmeWooOrderReceivedDetails` | Order detail rows: number, date, email, total, and payment method. |
| `OmeWooOrderReceivedItems` | Purchased item rows with name, quantity, and total. |
| `OmeWooOrderReceivedTotals` | Order totals rows. |
| `OmeWooOrderReceivedCustomerDetails` | Billing and shipping addresses plus the payment method title. |

## Slot Switching And Security

The received slot renders only when a validated order is present. Validation mirrors WooCommerce's own rules:

- Guest orders require the order key from the URL, compared in constant time.
- Signed-in customers may view their own orders without a key.
- Trashed and missing orders are rejected.

When validation fails, no data source is registered and nothing about the order is disclosed: `receivedOrder.isPresent` is falsy everywhere, and the checkout slot renders instead with its normal empty-cart behavior.

## Block Themes And The Order Confirmation Template

On WooCommerce block themes, WooCommerce replaces the page template with its Order Confirmation template on order-received requests. When the checkout page carries the provider, Oh My Etch removes that replacement so your composed page renders. Pages without the provider keep the theme's template.

## Builder Preview

`OrderReceivedProvider` exposes `preview.endpoint`, a select that switches the builder canvas between the checkout slot and the received slot. The received components render sample data in the builder; the storefront always renders the validated order.

## Dynamic Data

The family reads the `receivedOrder` source, including its `items` and `totals` loops. See [Woo Dynamic Data Tree](/woo/woo-dynamic-data-tree) for every field.

## Related Guides

- [Order Received Page](/woo/flows/order-received-page) wires this family into the checkout page.
- [My Account](/woo/component-families/my-account) continues the journey after the order.
- [Checkout Page](/woo/flows/checkout-page) composes the checkout slot this family wraps.