Order Data not showing on thankyou page using checkout ui extension

Extensions
1

i have a checkout ui extension rendering on thankyou page, i want to print some order id there but order id not showing,

code:

import React, { useState, useEffect } from 'react'; // Added useState for potential future use, and useEffect
import {
  reactExtension,
  BlockStack,
  Text,
  Heading,
  useApi,
  useExtensionApi,
  Link // Optional: for adding links
} from '@shopify/ui-extensions-react/checkout';

// This is the extension point for rendering a block on the thank you page.
// It will appear in the "Additional details" section by default,
// but can be moved by the merchant in the Checkout Editor.
export default reactExtension('purchase.thank-you.block.render', () => <ThankYouExtension />);

function ThankYouExtension() {
  // The useApi hook provides access to various checkout and order details
  // when the extension is running on the thank you page.
  const order = useOrder();

  const orderData = order?.id || 'Order ID not available';
  console.log("Order datsa: ", order);

  return (
    <BlockStack spacing="loose">
      <Text>
        We appreciate your business and hope you enjoy your products!{orderData}
      </Text>
    </BlockStack>
  );
}

need guide.

2

Hi @nihal_malik

As I understand it, the TYP is a temporary splash page that only contains an order confirmation number.

This is because Shopify’s order creation process is asynchronous. They’re showing the customer the TYP while the order is still being created.

Therefore the order ID isn’t available until later. In my experience it can be anywhere from a under a second to up to 30 seconds.

My only solution at this time is to continuously poll the Shopify Admin API by the confirmation number until the order is available.

It’s expensive computationally and it’s a bad customer experience if you have an immediate post-purchase action to display to customers.

I hope there’s some other new way, but at this time I’m not aware of one.