Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

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?