Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Order API

The API for interacting with the order confirmation, available on the Thank You page.

Anchor to orderconfirmationapiOrderConfirmationApi

The API object provided to purchase.thank-you extension targets.

Anchor to orderConfirmation orderConfirmation StatefulRemoteSubscribable<> required: Order information that's available post-checkout.

OrderConfirmation

isFirstOrder
Whether this is the customer's first order.
```
boolean
```
number
A randomly generated alpha-numeric identifier for the order. For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present.
```
string
```
order
```
{ id: string; }
```

Examples

import {

reactExtension,

Banner,

useApi,

useSubscription,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.thank-you.block.render',

() => <Extension />,

);

function Extension() {

const {orderConfirmation} = useApi();

const {id} = useSubscription(orderConfirmation);

if (id) {

return (

Please include your order confirmation ID

({id}) in support requests

</Banner>

);

}

return null;

}

Examples

Order confirmation

React

import {
  reactExtension,
  Banner,
  useApi,
  useSubscription,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.thank-you.block.render',
  () => <Extension />,
);

function Extension() {
  const {orderConfirmation} = useApi();
  const {id} = useSubscription(orderConfirmation);

  if (id) {
    return (
      <Banner>
        Please include your order confirmation ID
        ({id}) in support requests
      </Banner>
    );
  }

  return null;
}

JavaScript

import {
  Banner,
  extension,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.thank-you.block.render',
  (root, {orderConfirmation}) => {
    let bannerShown = false;

    orderConfirmation.subscribe(
      (orderConfirmation) => {
        if (orderConfirmation && !bannerShown) {
          root.appendChild(
            root.createComponent(
              Banner,
              undefined,
              `Please include your order confirmation ID (${orderConfirmation.id}) in support requests`,
            ),
          );

          bannerShown = true;
        }
      },
    );
  },
);

Anchor to relatedRelated

ReferenceTargets

ReferenceComponents

ReferenceConfiguration

LearnTutorials

Was this page helpful?