How to access order Id in thank you page checkout extension (preact)

Extensions
1

Hello,

I’ve been trying to develop a tiny custom app that links to a form on the thank you page. The main issue I’ve come across is that I don’t know how to access the current order id, which I’d like to include as a query parameter in the form link. Here is my code so far:

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
 
// Default export: Preact entrypoint used by Shopify
export default function extension() {
  // Mount your extension UI into the document body
  render(<Extension />, document.body);
}
 
function Extension() {
  // Simple static content to confirm rendering. No order access yet.
  return (
    <s-section>
      <s-stack gap="base">
        <s-text>
          Complete your information
        </s-text>
 
        <s-text>
          Your order is confirmed! Please help us by filling out this quick form.
        </s-text>
 
        {/* External link; s-button will render as an anchor when href is present */}
        <s-button
          variant="primary"
          href="https://example.com"
        >
          Open Jotform
        </s-button>
      </s-stack>
    </s-section>
  );
}

What is missing to get the order id? If it is not possible, any suggestions on alternative solutions?

Any help is appreciated, thanks!

2

Hi, recommend using the Order API:

Let me know if you encounter any issues!

3

Thank you so much! This appears to work.

1 Like