Add Razorpay Payment Gateway for Event Fee Payments

Description: Implement a secure Razorpay payment gateway integration so that users can pay the registration fee for individual events directly from the event details or listing page.

After successful payment, users should be redirected to /ticket (new route) — where ticket generation will be handled in a future issue.

---

Acceptance Criteria ✅

1. Payment Button

   • Use the "Pay Now" button of event card.
   • Only show it when event. Fee > 0.
   • If event. Fee === 0, show “Free Event” (disabled or highlighted button).

2. Razorpay Integration

   • Use the official Razorpay Docs flow for client-side integration.

   • On click:

     • Call a backend route (e.g. /api/payment/order) to create a Razorpay order using the event fee.
     • Then open the Razorpay checkout with order details (amount, name, event info, etc.).

3. Redirection

   • On successful payment:

     • Redirect the user to /ticket route (can be done via navigate('/ticket') in React).
     • Pass basic info in localStorage or context (e.g., eventId, paymentId).

   • On failure, show an error toast/snackbar.

4. Ticket Page Setup

   • Create a new React route: /ticket
   • For now, display a placeholder UI
   • This will be extended in a new issue for dynamic ticket generation.

5. Security

   • Keep Razorpay keys in .env files (client/public for key_id, server for key_secret).
   • Validate payment signature on the backend after success callback.

---

Future Issue Dependencies

• 🎟️ Next Issue: Implement ticket generation and QR code display in /ticket.
• 📩 Optional Future: Send confirmation email with payment receipt + ticket.