fix: zarinpal silent failure + show payment error in checkout

Previously the subscribe mutation had no onError handler, so any
payment initiation failure (wrong merchant ID, ZarinPal API error,
disabled payment method) would silently re-enable the button with
no user feedback. Now errors are shown below the Pay button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/dashboard/messages/ar.json

@@ -1019,7 +1019,8 @@
       "total": "المبلغ المستحق",
       "secureNote": "تتم المعالجة عبر بوابة دفع بنكية آمنة.",
       "payTotal": "ادفع {total}",
-      "redirecting": "جارٍ التحويل إلى البوابة..."
+      "redirecting": "جارٍ التحويل إلى البوابة...",
+      "paymentFailed": "فشل الدفع. الرجاء المحاولة مرة أخرى."
     }
   },
   "settings": {

web/dashboard/messages/en.json

@@ -1091,7 +1091,8 @@
       "total": "Amount due",
       "secureNote": "Payment is processed through a secure bank gateway.",
       "payTotal": "Pay {total}",
-      "redirecting": "Redirecting to gateway..."
+      "redirecting": "Redirecting to gateway...",
+      "paymentFailed": "Payment failed. Please try again."
     }
   },
   "settings": {

web/dashboard/messages/fa.json

@@ -1092,7 +1092,8 @@
       "total": "مبلغ قابل پرداخت",
       "secureNote": "پرداخت از طریق درگاه امن بانکی انجام می‌شود.",
       "payTotal": "پرداخت {total}",
-      "redirecting": "در حال انتقال به درگاه..."
+      "redirecting": "در حال انتقال به درگاه...",
+      "paymentFailed": "پرداخت ناموفق بود. لطفاً دوباره امتحان کنید."
     }
   },
   "settings": {

web/dashboard/src/components/subscription/checkout-screen.tsx

@@ -46,6 +46,7 @@ export function CheckoutScreen() {
 
   const [months, setMonths] = useState(1);
   const [paymentMethod, setPaymentMethod] = useState("");
+  const [payError, setPayError] = useState<string | null>(null);
 
   const numberLocale =
     typeof document !== "undefined" && document.documentElement.lang === "en"
@@ -76,8 +77,13 @@ export function CheckoutScreen() {
     mutationFn: (body: { planTier: string; months: number; paymentMethod: string }) =>
       apiPost<SubscribeResponse>("/api/billing/subscribe", body),
     onSuccess: (data) => {
+      setPayError(null);
       window.location.href = data.paymentUrl;
     },
+    onError: (err: unknown) => {
+      const msg = err instanceof Error ? err.message : String(err);
+      setPayError(msg || tc("paymentFailed"));
+    },
   });
 
   if (!cafeId) return null;
@@ -255,10 +261,15 @@ export function CheckoutScreen() {
 
         {/* Pay action */}
         <div className="flex flex-col gap-3 border-t border-border/80 bg-muted/20 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
-          <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <div className="flex flex-col gap-1">
-            <ShieldCheck className="h-4 w-4 text-[#0F6E56]" aria-hidden />
+            <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-            {tc("secureNote")}
+              <ShieldCheck className="h-4 w-4 text-[#0F6E56]" aria-hidden />
-          </p>
+              {tc("secureNote")}
+            </p>
+            {payError && (
+              <p className="text-xs text-destructive">{payError}</p>
+            )}
+          </div>
           <Button
             className="bg-[#0F6E56] hover:bg-[#0c5a46]"
             disabled={subscribe.isPending}