How to retrieve Order ID or Checkout Token in Shopify Checkout Extensions on Thank You page

Other Questions Shopify
1

I’m working with Shopify checkout UI extensions using React to build a survey form that asks “Where did you find us?” on the confirmation page after purchase. I can successfully display the form and capture user input, but I’m stuck on how to link the survey response to a specific order ID or checkout token.

Since checkout extensions operate in a sandboxed environment, I can’t access the usual checkout_token from localStorage or retrieve order information directly. I need to connect the form submission to the actual purchase so I can save the data to my database or add it as order metadata.

Here’s my current implementation:

import {
  reactExtension,
  BlockStack,
  View,
  Heading,
  Text,
  ChoiceList,
  Choice,
  Button,
  useStorage,
  TextField,
} from '@shopify/ui-extensions-react/checkout';
import {useCallback, useEffect, useState} from 'react';

const confirmationBlock = reactExtension("purchase.thank-you.block.render", () => <SurveyForm />);
export { confirmationBlock };

const accountBlock = reactExtension("customer-account.order-status.block.render", () => <FeedbackForm />);
export { accountBlock };

function SurveyForm() {
  const [sourceInfo, setSourceInfo] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [surveyCompleted, setSurveyCompleted] = useStorageState('survey-completed');

  async function submitSurvey() {
    setIsSubmitting(true);
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('Survey data:', sourceInfo);
        setIsSubmitting(false);
        setSurveyCompleted(true);
        resolve();
      }, 1000);
    });
  }

  if (surveyCompleted.loading || surveyCompleted.data === true) {
    return null;
  }

  return (
    <QuestionForm title="Where did you find us?" onSubmit={submitSurvey} loading={isSubmitting}>
      <TextField 
        name="traffic-source"
        value={sourceInfo}
        onChange={setSourceInfo}
      />
    </QuestionForm>
  );
}

What’s the best approach to get the order identifier within this extension context?

2

You could also try order.token instead of just the ID. The checkout token’s often better for linking back to your backend, especially with draft orders or incomplete checkouts that don’t have proper IDs yet.

3

Had this same problem last month building a post-purchase survey. You’re missing the order data hook in your imports. Add useOrder to your imports from ‘@shopify/ui-extensions-react/checkout’, then call const order = useOrder(); at the top of your SurveyForm component. This gives you order.id to pass into your submitSurvey function. Just add a loading check since order data takes a sec to load on the thank you page. I wrapped the order ID in a useEffect to make sure I got the actual data before hitting the API to save responses.

4

checkout extensions can grab order details with the useApi hook. just do const {order} = useApi(); and then use order.id in your submit function. works great on the thank you page since the order’s already there.

5

Yeah those hooks work but you’ll hit edge cases and rate limits once you scale. I’ve built survey systems for checkout flows - the manual approach gets messy fast.

You want to automate the whole pipeline. Grab order data, process survey responses, update your database, trigger follow-up emails based on source - all without custom API handlers.

I built something like this with Latenode and it runs everything automatically. Trigger workflows from your checkout extension, pass order data and survey responses, let it handle backend processing. No more error handling headaches or scaling issues.

Best part? Connect to any database or CRM without building custom integrations. Just drag and drop what you need.

Check it out: https://latenode.com

6

Use useOrder instead of useApi for the thank you page extension. Import it from the checkout extensions package and call it in your component - const order = useOrder();. You’ll get access to order.id to link your survey responses. Just handle the loading state since the order data won’t be there right when the component mounts. I’ve done this for post-purchase data collection and it works great across different checkout flows.

7

Timing matters way more than people think when fetching order data. I kept getting undefined from useOrder() on thank you pages, especially with fast checkouts. Guard clauses and retry logic fixed it.

const order = useOrder();

const submitSurvey = useCallback(async () => {
  if (!order?.id) {
    console.warn('Order not ready yet');
    return;
  }
  
  const surveyData = {
    orderId: order.id,
    source: sourceInfo,
    timestamp: new Date().toISOString()
  };
  
  // your API call here
}, [order?.id, sourceInfo]);

Also handle customers who bounce before the order loads. I added a loading state check - no form submission until order.id actually exists.