Shopify Checkout Extension Works in Dev but Completely Silent in Production

Technical Q&A
1

The Problem

My Shopify checkout extension (on thank-you page) works perfectly in development but fails silently in production:

  • :cross_mark: No network requests in Network tab

  • :cross_mark: No console logs appear

  • :white_check_mark: Works fine in dev environment

What I’ve Verified

  • Session token obtained successfully (api.sessionToken.get())

  • Order ID extracted correctly from orderConfirmation

  • Extension enabled on order status page in Shopify admin

  • Capabilities enabled: api_access, network_access

  • CORS headers set to https://extensions.shopifycdn.com

  • Backend endpoint works when tested directly

Key Code Structure

useEffect(() => {
  const timer = setTimeout(() => {
    async function fetchGameDetails() { 
      const token = await api.sessionToken.get();
      console.log({ token, orderID }); // ❌ Never logs in production
      const result = await getGameDetails(appUrl, orderID, token);
      // ... handle result
    }
    fetchGameDetails();
  }, 5000);
  return () => clearTimeout(timer);
}, [orderID]);

Visual Difference

Dev: <div class="Geu8c">{children}</div> :white_check_mark:
Production: Nothing :cross_mark:

Environment

  • Shopify API: 2025-07

  • Extension: purchase.thank-you.block.render

  • Backend: Remix on Fly.io

  • Deploy: shopify app deploy

The extension loads (visible in metadata), but JavaScript execution seems to completely stop in production. No errors, no logs, nothing.

Has anyone experienced this? Any debugging suggestions?

2

HI,

Have you placed your component in the checkout designer?

When you create a UI extension for checkout, it is automatically added in dev, but when you go into production, you have to add it manually.

Try checking in Settings => Checkout => Customize.