Shopify Checkout UI Extension未在自定义器中显示的问题

我创建了一个配置为Checkout::Dynamic::Render的自定义Checkout UI Extension，测试时自定义UI能在结账页面正常渲染，但该应用并未出现在Shopify后台的结账自定义器页面中。我尝试部署官方文档中的样板横幅示例，也遇到了完全相同的问题。

以下是我的代码：

import {
  render,
  Text,
  Image,
  View,
  Grid,
  Style,
} from '@shopify/checkout-ui-extensions-react';

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

function App() {
  return (
    <Grid
      columns={Style.default(['20%', 'fill', 0, 0, 0, 0]).when({viewportInlineSize: {min: 'small'}}, [
        '15%',
        'fill',
        '15%',
        'fill',
        '15%',
        'fill'
      ])}
      rows={['auto', 'auto']}
      overflow='hidden'
      border='base'
      blockAlignment='center'
      maxBlockSize={90}
    >
      <View padding="base">
        <Image source="https://cdn.shopify.com/s/files/1/0760/4994/0756/files/Checkout_icons-02.png" />
      </View>
      <View padding="base">
        <Text size="extraSmall">Message 1.</Text>
      </View>
      <View padding="base">
        <Image source="https://cdn.shopify.com/s/files/1/0760/4994/0756/files/Checkout_icons-01.png" />
      </View>
      <View padding="base">
        <Text size="extraSmall">Message 2.</Text>
      </View>
      <View padding="base">
        <Image source="https://cdn.shopify.com/s/files/1/0760/4994/0756/files/Checkout_icons-03.png" />
      </View>
      <View padding="base">
        <Text size="extraSmall">Message 3.</Text>
      </View>
    </Grid>
  );
}

解决步骤 #

• 检查扩展配置文件
  打开shopify.extension.toml，确认配置正确：

  type = "checkout_ui_extension"
  [[extensions.targeting]]
  target = "Checkout::Dynamic::Render"
  

  若文件中缺少上述配置，手动添加后重新部署。

• 确认应用权限与安装状态
  进入Shopify后台的应用管理页面，检查该应用是否拥有read_checkout_ui_extensions和write_checkout_ui_extensions权限，若缺失则重新授权应用。同时确保应用已正确安装到目标店铺。

• 验证部署环境
  确保已执行shopify extension deploy将扩展部署到生产环境，本地测试环境的扩展不会显示在后台自定义器中。

• 清除后台缓存
  刷新结账自定义器页面，或使用无痕模式打开后台，排除缓存导致的加载异常。

• 检查店铺订阅计划
  确认你的Shopify店铺计划支持Dynamic Render类型的Checkout UI Extension，部分功能仅对Shopify Plus或特定高级计划开放。

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