mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 00:52:50 +00:00
Update get payment methods from static to api
This commit is contained in:
Roba Boru
@@ -1,148 +1,163 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useBookingStore } from '@/lib/booking-store';
|
||||
import { usePaymentStore } from '@/lib/payment-store';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CreditCard, Smartphone, Wallet, Loader2, CheckCircle } from 'lucide-react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useBookingStore } from "@/lib/booking-store";
|
||||
import { usePaymentStore } from "@/lib/payment-store";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
CreditCard,
|
||||
Smartphone,
|
||||
Wallet,
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
|
||||
// Mock payment methods with Ethiopian providers
|
||||
const paymentMethods = [
|
||||
{
|
||||
id: 'TELEBIRR',
|
||||
name: 'Telebirr',
|
||||
icon: Smartphone,
|
||||
description: 'Pay with Telebirr mobile money',
|
||||
color: 'bg-orange-50 border-orange-200 hover:border-orange-400'
|
||||
},
|
||||
{
|
||||
id: 'CBE_BIRR',
|
||||
name: 'CBE Birr',
|
||||
icon: Smartphone,
|
||||
description: 'Pay with CBE Birr',
|
||||
color: 'bg-blue-50 border-blue-200 hover:border-blue-400'
|
||||
},
|
||||
{
|
||||
id: 'EBIRR',
|
||||
name: 'eBirr',
|
||||
icon: Smartphone,
|
||||
description: 'Pay with eBirr',
|
||||
color: 'bg-green-50 border-green-200 hover:border-green-400'
|
||||
},
|
||||
{
|
||||
id: 'CARD',
|
||||
name: 'Card Payment',
|
||||
icon: CreditCard,
|
||||
description: 'Pay with credit/debit card',
|
||||
color: 'bg-purple-50 border-purple-200 hover:border-purple-400'
|
||||
},
|
||||
{
|
||||
id: 'WALLET',
|
||||
name: 'Wallet',
|
||||
icon: Wallet,
|
||||
description: 'Pay from your wallet balance',
|
||||
color: 'bg-indigo-50 border-indigo-200 hover:border-indigo-400'
|
||||
},
|
||||
];
|
||||
const METHOD_ICONS: Record<string, any> = {
|
||||
TELEBIRR: Smartphone,
|
||||
CBE_BIRR: Smartphone,
|
||||
EBIRR: Smartphone,
|
||||
CARD: CreditCard,
|
||||
WALLET: Wallet,
|
||||
};
|
||||
|
||||
const METHOD_COLORS: Record<string, string> = {
|
||||
TELEBIRR: "bg-orange-50 dark:bg-orange-900/20",
|
||||
CBE_BIRR: "bg-blue-50 dark:bg-blue-900/20",
|
||||
EBIRR: "bg-green-50 dark:bg-green-900/20",
|
||||
CARD: "bg-purple-50 dark:bg-purple-900/20",
|
||||
WALLET: "bg-indigo-50 dark:bg-indigo-900/20",
|
||||
};
|
||||
|
||||
export default function PaymentPage() {
|
||||
const router = useRouter();
|
||||
const { bookingId, pnr, selectedSchedule, passengers } = useBookingStore();
|
||||
const { selectedCurrency, setPaymentIntent, updateStatus } = usePaymentStore();
|
||||
const { selectedCurrency, setPaymentIntent, updateStatus } =
|
||||
usePaymentStore();
|
||||
const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
|
||||
// Calculate total amount
|
||||
const baseFare = passengers.reduce((sum) => sum + (selectedSchedule?.baseFareAdult || 0), 0);
|
||||
const baseFare = passengers.reduce(
|
||||
(sum) => sum + (selectedSchedule?.baseFareAdult || 0),
|
||||
0,
|
||||
);
|
||||
const totalAmount = baseFare;
|
||||
|
||||
// Fetch real payment methods
|
||||
const { data: methodsData, isLoading: methodsLoading } = useQuery({
|
||||
queryKey: ["payment-methods"],
|
||||
queryFn: () => apiClient.get("/payments/methods") as Promise<any>,
|
||||
});
|
||||
|
||||
const paymentMethods: any[] = Array.isArray(methodsData)
|
||||
? methodsData
|
||||
: (methodsData as any)?.methods || (methodsData as any)?.data || [];
|
||||
|
||||
// Find paymentMethodId for the selected method from API response
|
||||
const getPaymentMethodId = (methodCode: string): string => {
|
||||
const found = paymentMethods.find(
|
||||
(m: any) =>
|
||||
m.code === methodCode ||
|
||||
m.type === methodCode ||
|
||||
m.name?.toUpperCase().replace(/\s/g, "_") === methodCode ||
|
||||
m.id === methodCode,
|
||||
);
|
||||
return found?.id || found?.paymentMethodId || methodCode;
|
||||
};
|
||||
|
||||
// TELEBIRR initiate mutation
|
||||
const initiateMutation = useMutation({
|
||||
mutationFn: async (methodCode: string) => {
|
||||
const paymentMethodId = getPaymentMethodId(methodCode);
|
||||
return apiClient.post("/payments/initiate", {
|
||||
bookingId,
|
||||
method: methodCode,
|
||||
paymentMethodId,
|
||||
platform: "web",
|
||||
});
|
||||
},
|
||||
onSuccess: (data: any) => {
|
||||
setPaymentIntent(data?.paymentIntentId || data?.id || "");
|
||||
updateStatus("PROCESSING");
|
||||
setIsProcessing(false);
|
||||
|
||||
// If there's a redirect URL (e.g. Telebirr checkout page), open it
|
||||
if (data?.checkoutUrl || data?.redirectUrl || data?.paymentUrl) {
|
||||
window.open(
|
||||
data.checkoutUrl || data.redirectUrl || data.paymentUrl,
|
||||
"_blank",
|
||||
);
|
||||
} else {
|
||||
router.push("/booking/confirmation");
|
||||
}
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Payment initiation failed:", error);
|
||||
updateStatus("FAILED");
|
||||
const msg =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
"Payment failed. Please try again.";
|
||||
alert(msg);
|
||||
setIsProcessing(false);
|
||||
},
|
||||
});
|
||||
|
||||
// Generic payment intent mutation (for non-Telebirr methods)
|
||||
const paymentMutation = useMutation({
|
||||
mutationFn: async (data: any) => {
|
||||
// Try to call the real API, fallback to mock if it fails
|
||||
try {
|
||||
return await apiClient.post('/payments/intent', data);
|
||||
} catch (error) {
|
||||
console.log('Payment API not available, using mock payment');
|
||||
// Mock payment response
|
||||
return await apiClient.post("/payments/intent", data);
|
||||
} catch {
|
||||
return {
|
||||
paymentIntentId: `mock-payment-${Date.now()}`,
|
||||
status: 'PENDING',
|
||||
amountMinor: data.amountMinor,
|
||||
currency: data.currency,
|
||||
method: data.method,
|
||||
status: "PENDING",
|
||||
};
|
||||
}
|
||||
},
|
||||
onSuccess: async (data: any) => {
|
||||
setPaymentIntent(data.paymentIntentId);
|
||||
updateStatus('PROCESSING');
|
||||
|
||||
// Simulate payment processing
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
// Generate tickets after successful payment
|
||||
try {
|
||||
await generateTickets();
|
||||
updateStatus('SUCCEEDED');
|
||||
router.push('/booking/confirmation');
|
||||
} catch (error) {
|
||||
console.error('Ticket generation failed:', error);
|
||||
// Still proceed to confirmation even if ticket generation fails
|
||||
updateStatus('SUCCEEDED');
|
||||
router.push('/booking/confirmation');
|
||||
}
|
||||
updateStatus("PROCESSING");
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
updateStatus("SUCCEEDED");
|
||||
router.push("/booking/confirmation");
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error('Payment failed:', error);
|
||||
updateStatus('FAILED');
|
||||
const errorMessage = error?.response?.data?.message || error?.message || 'Payment failed. Please try again.';
|
||||
alert(errorMessage);
|
||||
updateStatus("FAILED");
|
||||
alert(
|
||||
error?.response?.data?.message || "Payment failed. Please try again.",
|
||||
);
|
||||
setIsProcessing(false);
|
||||
},
|
||||
});
|
||||
|
||||
const generateTickets = async () => {
|
||||
// Try to generate tickets via API, fallback to mock
|
||||
try {
|
||||
await apiClient.post('/tickets/generate', {
|
||||
bookingId,
|
||||
pnr,
|
||||
});
|
||||
} catch (error) {
|
||||
console.log('Ticket API not available, tickets will be generated on confirmation page');
|
||||
// Mock ticket generation - tickets will be displayed on confirmation page
|
||||
}
|
||||
};
|
||||
|
||||
const handlePayment = async () => {
|
||||
if (!selectedMethod || !bookingId) {
|
||||
alert('Please select a payment method');
|
||||
alert("Please select a payment method");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
|
||||
paymentMutation.mutate({
|
||||
bookingId,
|
||||
method: selectedMethod,
|
||||
currency: selectedCurrency,
|
||||
amountMinor: totalAmount,
|
||||
});
|
||||
if (selectedMethod === "TELEBIRR") {
|
||||
debugger;
|
||||
initiateMutation.mutate(selectedMethod);
|
||||
} else {
|
||||
paymentMutation.mutate({
|
||||
bookingId,
|
||||
method: selectedMethod,
|
||||
currency: selectedCurrency,
|
||||
amountMinor: totalAmount,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Redirect if no booking data (but not during navigation)
|
||||
useEffect(() => {
|
||||
// Add a small delay to allow state to be set from previous page
|
||||
const timer = setTimeout(() => {
|
||||
if (!bookingId || !pnr) {
|
||||
console.log('Payment page: Missing booking data, redirecting to search');
|
||||
console.log('bookingId:', bookingId, 'pnr:', pnr);
|
||||
router.push('/booking/search');
|
||||
}
|
||||
if (!bookingId || !pnr) router.push("/booking/search");
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [bookingId, pnr, router]);
|
||||
|
||||
@@ -157,63 +172,79 @@ export default function PaymentPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const isBusy =
|
||||
isProcessing || initiateMutation.isPending || paymentMutation.isPending;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-2 text-gray-900 dark:text-gray-100">Complete payment</h1>
|
||||
<h1 className="text-3xl font-bold mb-2 text-gray-900 dark:text-gray-100">
|
||||
Complete payment
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Booking reference: <span className="font-bold text-primary">{pnr}</span>
|
||||
Booking reference:{" "}
|
||||
<span className="font-bold text-primary">{pnr}</span>
|
||||
</p>
|
||||
|
||||
{/* Payment Processing Overlay */}
|
||||
{isProcessing && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md text-center">
|
||||
{paymentMutation.isSuccess ? (
|
||||
<>
|
||||
<CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">Payment successful!</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">Generating your tickets...</p>
|
||||
<Loader2 className="w-8 h-8 text-primary animate-spin mx-auto" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Loader2 className="w-16 h-16 text-primary animate-spin mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">Processing payment</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">Please wait while we process your payment...</p>
|
||||
</>
|
||||
)}
|
||||
{/* Processing overlay */}
|
||||
{isBusy && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl p-8 max-w-sm w-full text-center shadow-2xl">
|
||||
<Loader2 className="w-14 h-14 text-primary animate-spin mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
|
||||
Processing payment
|
||||
</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Please wait…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Order Summary */}
|
||||
{/* Order summary */}
|
||||
<div className="card mb-6">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Order summary</h2>
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
|
||||
Order summary
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Route</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">{selectedSchedule?.origin} → {selectedSchedule?.destination}</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{selectedSchedule?.origin} → {selectedSchedule?.destination}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Train</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">{selectedSchedule?.trainNumber}</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{selectedSchedule?.trainNumber}
|
||||
</span>
|
||||
</div>
|
||||
{selectedSchedule?.selectedSeatClassName && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Class</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">{selectedSchedule.selectedSeatClassName.replace(/_/g, ' ')}</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
Class
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{selectedSchedule.selectedSeatClassName.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Passengers</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">{passengers.length} passenger{passengers.length !== 1 ? 's' : ''}</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
Passengers
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{passengers.length} passenger
|
||||
{passengers.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
|
||||
<div className="flex justify-between text-lg font-bold">
|
||||
<span className="text-gray-900 dark:text-gray-100">Total amount</span>
|
||||
<span className="text-primary dark:text-gray-100">
|
||||
<span className="text-gray-900 dark:text-gray-100">
|
||||
Total amount
|
||||
</span>
|
||||
<span className="text-primary">
|
||||
ETB {(totalAmount / 100).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -221,87 +252,122 @@ export default function PaymentPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
{/* Payment methods */}
|
||||
<div className="card mb-6">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Select payment method</h2>
|
||||
<div className="space-y-3">
|
||||
{paymentMethods.map((method) => {
|
||||
const Icon = method.icon;
|
||||
const isSelected = selectedMethod === method.id;
|
||||
return (
|
||||
<button
|
||||
key={method.id}
|
||||
onClick={() => setSelectedMethod(method.id)}
|
||||
disabled={isProcessing}
|
||||
className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/10 dark:bg-primary/20 shadow-md'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-primary dark:hover:border-primary'
|
||||
} ${isProcessing ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
|
||||
isSelected ? 'bg-primary' : 'bg-gray-100 dark:bg-gray-700'
|
||||
}`}>
|
||||
<Icon className={`w-6 h-6 ${isSelected ? 'text-white' : 'text-primary'}`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-gray-900 dark:text-gray-100">{method.name}</p>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{method.description}</p>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-5 h-5 text-white" />
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
|
||||
Select payment method
|
||||
</h2>
|
||||
|
||||
{methodsLoading ? (
|
||||
<div className="flex items-center justify-center py-8 gap-3 text-gray-500">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span className="text-sm">Loading payment methods…</span>
|
||||
</div>
|
||||
) : paymentMethods.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 text-center py-6">
|
||||
No payment methods available.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{paymentMethods.map((method: any) => {
|
||||
const code: string =
|
||||
method.code || method.type || method.id || "";
|
||||
const name: string =
|
||||
method.name || method.displayName || code;
|
||||
const description: string =
|
||||
method.description || `Pay with ${name}`;
|
||||
const isSelected = selectedMethod === code;
|
||||
const Icon = METHOD_ICONS[code] || Smartphone;
|
||||
const bgColor =
|
||||
METHOD_COLORS[code] || "bg-gray-50 dark:bg-gray-800/50";
|
||||
|
||||
return (
|
||||
<button
|
||||
key={code}
|
||||
onClick={() => setSelectedMethod(code)}
|
||||
disabled={isBusy}
|
||||
className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
|
||||
isSelected
|
||||
? "border-primary bg-primary/10 dark:bg-primary/20 shadow-md"
|
||||
: `border-gray-200 dark:border-gray-700 ${bgColor} hover:border-primary`
|
||||
} ${isBusy ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||
isSelected
|
||||
? "bg-primary"
|
||||
: "bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`w-5 h-5 ${isSelected ? "text-white" : "text-primary"}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
{code === "TELEBIRR" && (
|
||||
<span className="flex items-center gap-1 text-xs text-orange-600 dark:text-orange-400 font-medium flex-shrink-0">
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
Redirect
|
||||
</span>
|
||||
)}
|
||||
{isSelected && (
|
||||
<div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<CheckCircle className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<button
|
||||
onClick={handlePayment}
|
||||
disabled={!selectedMethod || isProcessing}
|
||||
className={`btn-primary w-full py-4 text-lg font-semibold ${
|
||||
!selectedMethod || isProcessing ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
disabled={!selectedMethod || isBusy || methodsLoading}
|
||||
className="btn-primary w-full py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isProcessing ? (
|
||||
{isBusy ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Processing...
|
||||
Processing…
|
||||
</span>
|
||||
) : (
|
||||
`Pay ETB ${(totalAmount / 100).toFixed(2)}`
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
disabled={isProcessing}
|
||||
disabled={isBusy}
|
||||
className="btn-secondary w-full py-2"
|
||||
>
|
||||
Back to review
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{paymentMutation.isError && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mt-4">
|
||||
<p className="text-red-800 dark:text-red-200 text-sm font-medium">
|
||||
⚠️ Payment failed. Please try again or contact support if the problem persists.
|
||||
|
||||
{(initiateMutation.isError || paymentMutation.isError) && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 mt-4">
|
||||
<p className="text-red-700 dark:text-red-300 text-sm font-medium">
|
||||
⚠️ Payment failed. Please try again or contact support.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Security Notice */}
|
||||
<div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 text-center">
|
||||
🔒 Your payment is secure and encrypted. We do not store your payment information.
|
||||
<div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
🔒 Your payment is secure and encrypted. We do not store your
|
||||
payment information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user