Refer from thank you page to order status page - Checkout UI extension

Technical Q&A
,
1

Hey guys ! Basically im trying to refer from the thank you page to the order status page with a Checkout UI extension.

const { orderConfirmation } = useApi();
const { number , id } =useSubscription(orderConfirmation);
This is the hook i need and the number is indeed returning , but the id is returning.
not.purchase.thank-you.block.render this is the block render target that i am in.

and you can see here https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/block/purchase-thank-you-block-render that its supposed to load , also protected customer data is enabled for dev purpose.

const orderLink = https://${shopName}/orders/${id}/order_status;

If anyone has a lead on how to do so without building a link or some other idea please let me know ! :slightly_smiling_face:

2

Hi,

Hope this will help

  • Get the number from your subscription

JS example

const { orderConfirmation } = useApi();
const { number } = useSubscription(orderConfirmation);
  • Build your link using shop’s domain and the order number:
  • Use this link in a Button or Link component in your extension:
3

You’re encountering an issue where the order id isn’t immediately available from the orderConfirmation API within your Shopify Checkout UI Extension, preventing you from linking to the order status page. While the documentation suggests id should be present, this is often a timing issue due to the asynchronous nature of the useSubscription hook. To fix this, use a useEffect hook to wait for both the id and shop.storefrontUrl to be available, then dynamically construct the order status URL. There’s no built-in component that directly navigates to the order status page without building the URL yourself; explicitly constructing the link with the id is the standard method.