cleanup(thank-you): remove debug, render nothing when no payment data

app/routes/api.public.payment-info.tsx

@@ -78,7 +78,6 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       Response.json({
         showPaymentInstructions: false,
         reason: "not-manual-payment",
-        debug: { shop, orderGid, hasOrder: !!orderInfo, txCount: orderInfo?.txCount ?? 0, manualFlags: orderInfo?.manualFlags ?? [] },
       }),
     );
   }

extensions/invoice-thank-you-payment/src/Checkout.tsx

@@ -42,7 +42,6 @@ export default async () => {
 function Extension() {
   const shopify = (globalThis as any).shopify;
   const [data, setData] = useState<PaymentInstructions | null>(null);
-  const [debug, setDebug] = useState<string>("init");
   const [done, setDone] = useState(false);
 
   useEffect(() => {
@@ -50,25 +49,21 @@ function Extension() {
     async function load() {
       try {
         const orderId: string | undefined = shopify?.orderConfirmation?.value?.order?.id;
-        setDebug(`orderId=${orderId ?? "(none)"}`);
         if (!orderId) {
           setDone(true);
           return;
         }
         const token: string = await shopify.sessionToken.get();
         const appUrl = resolveAppUrl(shopify);
-        setDebug(`fetch ${appUrl} orderId=${orderId} tokenLen=${token?.length ?? 0}`);
         const res = await fetch(
           `${appUrl}/api/public/payment-info?orderId=${encodeURIComponent(orderId)}`,
           { headers: { Authorization: `Bearer ${token}` } },
         );
-        const text = await res.text();
-        setDebug(`status=${res.status} body=${text.slice(0, 300)}`);
         if (!res.ok) {
           setDone(true);
           return;
         }
-        const json = JSON.parse(text) as {
+        const json = (await res.json()) as {
           showPaymentInstructions: boolean;
           payload?: PaymentInstructions;
         };
@@ -76,8 +71,8 @@ function Extension() {
         if (json.showPaymentInstructions && json.payload) {
           setData(json.payload);
         }
-      } catch (err) {
+      } catch {
-        setDebug(`error: ${(err as Error)?.message ?? String(err)}`);
+        // swallow; render nothing
       } finally {
         if (!cancelled) setDone(true);
       }
@@ -88,22 +83,14 @@ function Extension() {
     };
   }, []);
 
-  if (!done) {
+  if (!done || !data) {
-    return <s-skeleton-paragraph />;
+    return null;
-  }
-  if (!data) {
-    return (
-      <s-section heading="Invoice payment debug">
-        <s-paragraph>{debug}</s-paragraph>
-      </s-section>
-    );
   }
 
   return (
     <s-section heading={data.heading}>
       <s-paragraph>{data.instructions}</s-paragraph>
-      <s-stack direction="inline" gap="base" align-items="start">
+      <s-grid gridTemplateColumns="200px 1fr" gap="base" alignItems="start">
-        <s-image src="https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/assets/shopify-logo-monotone-white-CzwKJF7G.svg" alt="test" inlineSize="fill" aspectRatio="1" />
         <s-image src={data.giroCodeUrl} alt="GiroCode" inlineSize="fill" aspectRatio="1" />
         <s-stack direction="block" gap="small-200">
           <s-text>{data.labels.recipient}: {data.recipient}</s-text>
@@ -117,7 +104,7 @@ function Extension() {
           <s-text>{data.labels.amount}: {data.amountFormatted}</s-text>
           <s-text>{data.labels.reference}: {data.reference}</s-text>
         </s-stack>
-      </s-stack>
+      </s-grid>
     </s-section>
   );
 }