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

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

Daelan_Wood
Shopify Partner
34 0 11

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>
  );
} 

 

Replies 4 (4)

dylanpierce
Shopify Partner
233 9 103

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.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

Daelan_Wood
Shopify Partner
34 0 11

Could you use Line Item properties for this? 

dylanpierce
Shopify Partner
233 9 103

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.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

Daelan_Wood
Shopify Partner
34 0 11

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.