payment info updates

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

@@ -43,16 +43,28 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     return cors(Response.json({ showPaymentInstructions: false, reason: "no-iban-or-disabled" }));
   }
 
-  const { admin } = await unauthenticated.admin(shop);
   let orderInfo: OrderInfo | null = null;
   try {
+    const { admin } = await unauthenticated.admin(shop);
     orderInfo = await fetchOrderInfo(admin, orderGid);
   } catch (err) {
+    const msg = (err as Error)?.message ?? String(err);
     console.warn(`payment-info: failed to load order ${orderGid} for ${shop}:`, err);
-    return cors(Response.json({ showPaymentInstructions: false, error: "order-load-failed" }, { status: 502 }));
+    return cors(
+      Response.json(
+        { showPaymentInstructions: false, error: "order-load-failed", detail: msg.slice(0, 500) },
+        { status: 502 },
+      ),
+    );
   }
   if (!orderInfo || !orderInfo.isManual) {
-    return cors(Response.json({ showPaymentInstructions: false, reason: "not-manual-payment" }));
+    return cors(
+      Response.json({
+        showPaymentInstructions: false,
+        reason: "not-manual-payment",
+        debug: { shop, orderGid, hasOrder: !!orderInfo, txCount: orderInfo?.txCount ?? 0, manualFlags: orderInfo?.manualFlags ?? [] },
+      }),
+    );
   }
 
   const language = pickLanguage(orderInfo.customerLocale ?? settings.defaultLanguage);
@@ -113,6 +125,8 @@ interface OrderInfo {
   currency: string;
   orderName: string;
   customerLocale?: string;
+  txCount: number;
+  manualFlags: Array<{ status?: string; manual?: boolean }>;
 }
 
 async function fetchOrderInfo(
@@ -161,5 +175,7 @@ async function fetchOrderInfo(
     currency: o.currencyCode ?? "EUR",
     orderName: o.name ?? "",
     customerLocale: o.customerLocale ?? undefined,
+    txCount: txs.length,
+    manualFlags: txs.map((t) => ({ status: t.status, manual: t.manualPaymentGateway })),
   };
 }

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

@@ -42,6 +42,7 @@ 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(() => {
@@ -49,21 +50,25 @@ 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 = (await res.json()) as {
+        const json = JSON.parse(text) as {
           showPaymentInstructions: boolean;
           payload?: PaymentInstructions;
         };
@@ -71,8 +76,8 @@ function Extension() {
         if (json.showPaymentInstructions && json.payload) {
           setData(json.payload);
         }
-      } catch {
+      } catch (err) {
-        // ignore — render nothing on error
+        setDebug(`error: ${(err as Error)?.message ?? String(err)}`);
       } finally {
         if (!cancelled) setDone(true);
       }
@@ -87,7 +92,11 @@ function Extension() {
     return <s-skeleton-paragraph />;
   }
   if (!data) {
-    return null;
+    return (
+      <s-section heading="Invoice payment debug">
+        <s-paragraph>{debug}</s-paragraph>
+      </s-section>
+    );
   }
 
   return (