Checkout UI Extension registered but not mounting at runtime

Extensions
1

My app volumental integration v2 has a Checkout UI Extension volumental-integration-helper targeting purchase.thank-you.block.render. The extension:

  • Is deployed successfully (shopify app deploy)
  • Appears and is addable in the Checkout Editor
  • Is installed via full OAuth (using the Remix scaffold with App Bridge)
  • Logs “:white_check_mark: Extension file has been loaded” in the browser console
  • :cross_mark: But never logs from inside the exported component function

We added console.log() above the export default function and inside it to test invocation:

jsx

console.log("✅ Extension file has been loaded");
export default function Extension() {
  console.log("🔥 Extension component function executed");
  return <Banner ... />
}

Only the outer log appears. This strongly suggests Shopify’s checkout runtime is not mounting the component.

Please confirm if this is a known issue or if additional app configuration is required.

3

Hi @Simon_Freimoser

It’s possible you may be missing the registration function? EG:

// 1. Choose an extension target
export default reactExtension(
  'purchase.thank-you.block.render',
  () => <Extension />,
);

This would be included like:

import {
  BlockStack,
  reactExtension,
  Text,
  useApi,
} from '@shopify/ui-extensions-react/checkout';

// 1. Choose an extension target
export default reactExtension(
  'purchase.thank-you.block.render',
  () => <Extension />,
);

function Extension() {
  // 2. Use the extension API to gather context from the checkout and shop
  const {cost, shop} = useApi();

  // 3. Render a UI
  return (
    <BlockStack>
      <Text>Shop name: {shop.name}</Text>
      <Text>cost: {cost.totalAmount}</Text>
    </BlockStack>
  );
}

See docs: purchase.thank-you.block.render