Access to Order ID or Checkout Token on Checkout Thank You page using Shopify Checkout Extension

[Daelan_Wood]

I'm using  checkout UI extensions and react to add a "How did you hear about us" form on the Thank You page. I've figured out how to render the form and grab the value from the submitted form but I need a way to correlate the response to either the order ID or the checkout id/token. From what I understand, the checkout extensions run inside a web worker so you don't have access to the checkout_token local storage object or any of the order data. Any ideas how I can get access to this data and then store it either in my own database or ideally in a metafield on the order itself?

Here is the code i'm using. It's basically a modified version of the example provided by Shopify.

import {
  reactExtension,
  BlockStack,
  View,
  Heading,
  Text,
  ChoiceList,
  Choice,
  Button,
  useStorage,
  TextField,
} from '@shopify/ui-extensions-react/checkout';
import {useCallback, useEffect, useState} from 'react';
// Allow the attribution survey to display on the thank you page.
const thankYouBlock = reactExtension("purchase.thank-you.block.render", () => <Attribution />);
export { thankYouBlock };

const orderDetailsBlock = reactExtension("customer-account.order-status.block.render", () => <ProductReview />);
export { orderDetailsBlock };
function Attribution() {
  const [attribution, setAttribution] = useState('');
  const [loading, setLoading] = useState(false);
  // Store into local storage if the attribution survey was completed by the customer.
  const [attributionSubmitted, setAttributionSubmitted] = useStorageState('attribution-submitted')

  async function handleSubmit() {
    // Simulate a server request
    setLoading(true);
    return new Promise((resolve) => {
      setTimeout(() => {
      // Send the review to the server
      
      
      console.log('Submitted:', attribution);
      setLoading(false);
      setAttributionSubmitted(true)
      resolve();
    }, 750)});
  }

  // Hides the survey if the attribution has already been submitted
  if (attributionSubmitted.loading || attributionSubmitted.data === true) {
    return null;
  }

  return (
    <Survey title="How did you hear about us ?" onSubmit={handleSubmit} loading={loading}>
      <TextField 
        name="sale-attribution"
        value={attribution}
        onChange={setAttribution}
      />
    </Survey>
  );
} 

[dylanpierce]

I'm trying to find this same answer myself. I need to update the order with custom attributes set on the cart before checkout.

However, the `cart_token` seems to be deprecated on the Order API. And there's not an equivalent `cartToken` on the GraphQL API.

I hope someone from Shopify can point us in the right direction. We need to be able to update order information from the checkout UI or order status page context.

[Daelan_Wood]

Could you use Line Item properties for this? 

[dylanpierce]

Not quite, it needs to be on the order level, not per line item.

We're taking a look at the `useApplyMetafieldUpdate`hook specifically, that seems to be the only way to pass data during checkout to the order that's also available over the GraphQL or REST API.

[Daelan_Wood]

Is this available on the Thank You page? It looks like this person is trying to do something similar but before the order is placed. I don't think any of this is available on the thank you page.

[Vinit]

You can use the useAPI() to get the order id.

const data = useApi();

const order_id = data.orderConfirmation.current.order.id;

[dharmikcirkle]

Hello @Vinit ,
it's working correctly.
Thank you for your information.