Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

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

Daelan_Wood
Shopify Partner
32 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 5 (5)

Gojiberry-Amee
Shopify Partner
166 12 46

Hi Daelan_Wood, 

This is Amee from Gojiberry - Shopify Survey & Feedback App

This doesn't directly answer your question but might be a good solution to your end goal. Our app currently does exactly what you are looking for by correlating the survey answers to customer ID. You will also be able to view information such as AOV (average order value) per customer related to the survey. There's no code needed, and no need for a complex setup. 

The app is completely free to use as of now, I hope you can check us out here: https://apps.shopify.com/gojiberry 

We will keep adding features on top of what we already have. 

I hope this helps! 

Amee | Gojiberry Team 


If you like my suggestion please give it a LIKE or mark it as a solution! ★★★★★

Gojiberry - Best post-purchase survey and feedback app for Shopify | Install on App Store for free
Shopify Community is helpful, BUT... why not start asking your customers for feedback instead?


The Ultimate 12 Best Practices to Growing Your Shopify Store

dylanpierce
Shopify Partner
203 3 91

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 AI
Daelan_Wood
Shopify Partner
32 0 11

Could you use Line Item properties for this? 

dylanpierce
Shopify Partner
203 3 91

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 AI
Daelan_Wood
Shopify Partner
32 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.