使用 Shopify Checkout Extensions 在结帐感谢页面上访问订单 ID 或结帐令牌

Question

我正在使用 Shopify 的结账 UI 扩展，并做出反应，在“谢谢”页面上添加“您是如何听说我们的”表单。我已经弄清楚如何呈现表单并从提交的表单中获取值，但我需要一种方法将响应与订单 ID 或结账 ID/令牌关联起来。据我了解，结账扩展在网络工作人员内部运行，因此您无权访问 checkout_token 本地存储对象或任何订单数据。我有什么想法可以访问这些数据，然后将其存储在我自己的数据库中，或者最好存储在订单本身的元字段中？

我的反应代码如下

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

Answer 1

您可能希望使用

Metafields API

中定义的 useApplyMetafieldsChange() 进行结帐 UI 扩展

https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/metafields