Shopify Checkout UI Extensions无法填充订单附加详情问题排查

问题核心：你只通过useState在组件内部维护了输入值，但没有将这个值同步到Shopify的订单元数据体系中——Shopify不会自动捕获自定义输入框的值，必须通过官方提供的API主动提交。

修复步骤及代码示例 #

1. 导入Shopify提供的useApplyAttributeChange钩子，这个API专门用于将自定义属性同步到订单数据中
2. 在组件中获取该方法，并在输入框值变化时，同时更新本地状态和提交到订单属性

修改后的完整代码：

import React, { useState } from 'react';
import {
  useExtensionApi,
  useApplyAttributeChange,
  render,
  TextField,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const applyAttributeChange = useApplyAttributeChange();
  const [vatNumber, setVatNumber] = useState('');

  const handleVatNumberChange = (val) => {
    setVatNumber(val);
    // 将值同步到订单自定义属性
    applyAttributeChange({
      key: 'vat_number',
      value: val,
    });
  };

  return (
    <>
      <TextField
        label="VAT Number (Optional)"
        name="vat_number"
        value={vatNumber}
        onChange={(val) => handleVatNumberChange(val)}
      />
    </>
  );
}

关键说明 #

• useApplyAttributeChange会将你传入的键值对添加到订单的自定义属性中，提交订单后，你可以在Shopify后台的订单详情页找到这些属性
• 保留本地useState是为了维护输入框的即时显示状态，避免输入时的界面卡顿或不同步
• 如果希望该属性仅商家可见（顾客在订单页看不到），可以将key改为_vat_number（前缀加下划线）

内容的提问来源于stack exchange，提问作者A_Z