feat: integrate Stripe payment module with API + UI components

2026-06-09 21:10:57 +05:30
parent 944a745892
commit 5eb06b2809
25 changed files with 1434 additions and 1 deletions
@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlaskConical } from 'lucide-react';
+
+/**
+ * Shown when no real Stripe publishable key is configured. Payments run through
+ * the simulated checkout (no real charge); adding keys switches to live Stripe.
+ */
+const StripeConfigNotice = () => (
+    <div className="rounded-2xl border border-amber-300/60 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-4 md:p-5">
+        <div className="flex items-start gap-3">
+            <div className="w-9 h-9 rounded-xl bg-amber-400/20 text-amber-600 dark:text-amber-300 flex items-center justify-center shrink-0">
+                <FlaskConical size={18} />
+            </div>
+            <div className="min-w-0">
+                <p className="text-sm font-bold text-amber-800 dark:text-amber-200">
+                    Demo mode — simulated Stripe Checkout
+                </p>
+                <p className="text-xs text-amber-700/80 dark:text-amber-200/70 mt-1 leading-relaxed">
+                    No Stripe keys are configured, so "Pay Now" runs a simulated checkout
+                    (no real charge). Add the keys below to switch to live Stripe-hosted
+                    Checkout — no code changes needed:
+                </p>
+                <ul className="mt-2 space-y-1 text-[11px] font-mono text-amber-800 dark:text-amber-200/90">
+                    <li>VITE_STRIPE_PUBLISHABLE_KEY <span className="opacity-60">(frontend)</span></li>
+                    <li>STRIPE_SECRET_KEY <span className="opacity-60">(backend)</span></li>
+                    <li>STRIPE_WEBHOOK_SECRET <span className="opacity-60">(backend / webhook)</span></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+);
+
+export default StripeConfigNotice;