import { Head } from '@inertiajs/react'; import { useEffect, useState } from 'react'; import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Loader2 } from 'lucide-react'; interface Props { orderId: string; amount: number; currency: string; razorpayKey: string; userEmail: string; userName: string; } declare global { interface Window { Razorpay: any; } } export default function RazorpayCheckout({ orderId, amount, currency, razorpayKey, userEmail, userName }: Props) { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // Load Razorpay script const script = document.createElement('script'); script.src = 'https://checkout.razorpay.com/v1/checkout.js'; script.async = true; script.onload = () => { setLoading(false); initializeRazorpay(); }; script.onerror = () => { setError('Failed to load Razorpay. Please try again.'); setLoading(false); }; document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); const initializeRazorpay = () => { const options = { key: razorpayKey, amount: Math.round(amount * 100), // Amount in paise currency: currency, name: 'Teleman', description: 'Credit Top-up', order_id: orderId, prefill: { name: userName, email: userEmail, }, theme: { color: '#7c3aed', }, handler: function (response: any) { // Payment successful window.location.href = `/payment/success?session_id=${response.razorpay_order_id}&payment_id=${response.razorpay_payment_id}`; }, modal: { ondismiss: function () { // Payment cancelled window.location.href = '/payment/cancel'; }, }, }; const razorpay = new window.Razorpay(options); razorpay.on('payment.failed', function (response: any) { setError('Payment failed: ' + response.error.description); setTimeout(() => { window.location.href = '/payment/cancel'; }, 3000); }); razorpay.open(); }; return ( Payment Processing } >
Processing Payment {loading ? 'Loading secure payment gateway...' : 'Redirecting to Razorpay...'} {loading && ( )} {error && (
{error}
)}

Amount: {currency} {Number(amount).toFixed(2)}

If the payment window doesn't open automatically, please refresh the page.

); }