246 lines
14 KiB
TypeScript
246 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import React, { useEffect, useState, Suspense } from 'react';
|
||
import { Elements } from '@stripe/react-stripe-js';
|
||
import { getStripe } from '@/lib/stripe-client';
|
||
import { useSearchParams } from 'next/navigation';
|
||
import CheckoutForm from '@/components/checkout/CheckoutForm';
|
||
import MockCheckoutForm from '@/components/checkout/MockCheckoutForm';
|
||
import CryptoCheckout from '@/components/checkout/CryptoCheckout';
|
||
import { Loader2, AlertCircle, ArrowLeft, UserCircle, CreditCard, Coins } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
|
||
function CheckoutContent() {
|
||
const searchParams = useSearchParams();
|
||
const amount = parseFloat(searchParams.get('amount') || '100');
|
||
const currency = searchParams.get('currency') || 'TL';
|
||
const refId = searchParams.get('ref_id') || 'SEC-99231-TX';
|
||
const callbackUrl = searchParams.get('callback_url') || '/';
|
||
const merchantId = searchParams.get('merchant_id') || null;
|
||
|
||
const [clientSecret, setClientSecret] = useState<string | null>(null);
|
||
const [paymentData, setPaymentData] = useState<any>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [paymentMethod, setPaymentMethod] = useState<'card' | 'crypto'>('card');
|
||
|
||
const isMock = process.env.NEXT_PUBLIC_USE_MOCK_PAYMENTS === 'true';
|
||
|
||
useEffect(() => {
|
||
if (amount <= 0) {
|
||
setError('Geçersiz işlem tutarı.');
|
||
return;
|
||
}
|
||
|
||
fetch('/api/create-payment-intent', {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
amount,
|
||
currency,
|
||
ref_id: refId,
|
||
callback_url: callbackUrl,
|
||
merchant_id: merchantId
|
||
}),
|
||
})
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data.error) {
|
||
setError(data.error);
|
||
} else {
|
||
setClientSecret(data.clientSecret);
|
||
setPaymentData(data);
|
||
|
||
// Auto-redirect if it's a redirect action
|
||
if (data.nextAction === 'redirect' && data.redirectUrl) {
|
||
setTimeout(() => {
|
||
window.location.href = data.redirectUrl;
|
||
}, 2000); // 2 second delay to show the message
|
||
}
|
||
}
|
||
})
|
||
.catch(() => setError('Ödeme başlatılamadı. Lütfen tekrar deneyin.'));
|
||
}, [amount, currency, refId, callbackUrl]);
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center p-8 bg-red-50 rounded-2xl border border-red-100 max-w-md mx-auto mt-20">
|
||
<AlertCircle className="w-12 h-12 text-red-500 mb-4" />
|
||
<h2 className="text-xl font-bold text-red-700 mb-2">Hata Oluştu</h2>
|
||
<p className="text-red-600 text-center">{error}</p>
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="mt-6 px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
|
||
>
|
||
Tekrar Dene
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#F8FAFC] flex flex-col">
|
||
{/* Header */}
|
||
<nav className="bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
<div className="w-4 h-4 bg-white rotate-45 transform"></div>
|
||
</div>
|
||
<span className="font-bold text-gray-900 text-lg tracking-tight">P2CGateway</span>
|
||
</div>
|
||
<div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center text-orange-500">
|
||
<UserCircle size={24} />
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Main Content */}
|
||
<div className="flex-1 flex flex-col lg:flex-row items-stretch w-full overflow-hidden">
|
||
{/* Left Column: Product Info (Cover Image) */}
|
||
<div className="flex-1 min-h-[500px] lg:min-h-0 relative group order-2 lg:order-1">
|
||
<img
|
||
src="/digital_nft_asset.png"
|
||
alt="Digital NFT Product"
|
||
className="absolute inset-0 w-full h-full object-cover"
|
||
/>
|
||
|
||
{/* Overlay Gradient */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent pointer-events-none" />
|
||
|
||
{/* Content on Image */}
|
||
<div className="relative h-full flex flex-col justify-between p-12">
|
||
<div className="flex items-center gap-2 bg-white/10 backdrop-blur-md w-fit px-4 py-2 rounded-full border border-white/20">
|
||
<span className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
|
||
<span className="text-white text-[10px] font-bold uppercase tracking-widest">Premium Dijital Varlık</span>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-white text-5xl font-black tracking-tight uppercase leading-none">CyberCube #082</h3>
|
||
<p className="text-gray-300 text-lg mt-4 max-w-lg leading-relaxed">P2C ağına ömür boyu erişim sağlayan özel, yüksek sadakatli 3D üretken dijital koleksiyon parçası.</p>
|
||
</div>
|
||
|
||
<div className="pt-8 border-t border-white/10 flex flex-col sm:flex-row sm:items-center gap-8">
|
||
<div>
|
||
<p className="text-gray-400 text-[10px] font-bold uppercase tracking-wider mb-1">Satıcı</p>
|
||
<p className="text-white font-medium text-sm">Ayris Digital Media INC.</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-gray-400 text-[10px] font-bold uppercase tracking-wider mb-1">Destek</p>
|
||
<p className="text-blue-400 font-medium text-sm hover:underline cursor-pointer">help@ayris.dev</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column: Payment Form */}
|
||
<div className="flex-1 flex flex-col justify-center items-center lg:items-start order-1 lg:order-2 p-8 lg:p-20">
|
||
{!clientSecret ? (
|
||
<div className="flex flex-col items-center justify-center p-20 bg-white rounded-3xl border border-gray-100 shadow-sm w-full max-w-md">
|
||
<Loader2 className="w-10 h-10 text-blue-600 animate-spin mb-4" />
|
||
<p className="text-gray-500 font-medium">Ödeme ekranı hazırlanıyor...</p>
|
||
</div>
|
||
) : (
|
||
<div className="w-full max-w-lg">
|
||
{/* Payment Method Selector */}
|
||
<div className="flex bg-gray-100 p-1.5 rounded-2xl mb-8">
|
||
<button
|
||
onClick={() => setPaymentMethod('card')}
|
||
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${paymentMethod === 'card' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400'}`}
|
||
>
|
||
<CreditCard size={14} /> Kart ile Öde
|
||
</button>
|
||
<button
|
||
onClick={() => setPaymentMethod('crypto')}
|
||
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${paymentMethod === 'crypto' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400'}`}
|
||
>
|
||
<Coins size={14} /> Kripto (On-Chain)
|
||
</button>
|
||
</div>
|
||
|
||
{paymentMethod === 'crypto' ? (
|
||
<CryptoCheckout
|
||
amount={amount}
|
||
currency={currency}
|
||
txId={paymentData?.clientSecret || 'TX-8231'}
|
||
onSuccess={(hash) => {
|
||
setTimeout(() => {
|
||
window.location.href = `${callbackUrl}?status=success&tx_hash=${hash}`;
|
||
}, 2000);
|
||
}}
|
||
/>
|
||
) : (
|
||
<div className="w-full">
|
||
{paymentData?.nextAction === 'redirect' ? (
|
||
<div className="p-12 bg-white rounded-[40px] border border-gray-100 shadow-sm text-center space-y-8 animate-in zoom-in duration-500">
|
||
<div className="w-20 h-20 bg-blue-50 rounded-3xl flex items-center justify-center mx-auto text-blue-600">
|
||
<Loader2 className="animate-spin" size={40} />
|
||
</div>
|
||
<div className="space-y-3">
|
||
<h3 className="text-2xl font-black text-gray-900 leading-tight">Ödeme Sayfasına Yönlendiriliyorsunuz</h3>
|
||
<p className="text-gray-400 font-bold uppercase tracking-widest text-[10px]">Lütfen tarayıcınızı kapatmayın</p>
|
||
</div>
|
||
<p className="text-sm text-gray-400 max-w-xs mx-auto">Sizi güvenli ödeme adımına aktarıyoruz. Bu işlem birkaç saniye sürebilir.</p>
|
||
<button
|
||
onClick={() => window.location.href = paymentData.redirectUrl}
|
||
className="w-full py-5 bg-gray-900 text-white rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-black transition shadow-xl"
|
||
>
|
||
Hemen Git
|
||
</button>
|
||
</div>
|
||
) : isMock ? (
|
||
<MockCheckoutForm amount={amount} currency={currency} callbackUrl={callbackUrl} clientSecret={clientSecret} refId={refId} />
|
||
) : paymentData?.provider === 'stripe' ? (
|
||
<Elements stripe={getStripe()} options={{ clientSecret, appearance: { theme: 'stripe' } }}>
|
||
<CheckoutForm
|
||
amount={amount}
|
||
currency={currency}
|
||
callbackUrl={callbackUrl}
|
||
piId={clientSecret.split('_secret')[0]}
|
||
/>
|
||
</Elements>
|
||
) : (
|
||
<div className="p-12 bg-white rounded-[40px] border border-gray-100 shadow-sm text-center">
|
||
<AlertCircle className="w-12 h-12 text-blue-600 mx-auto mb-4" />
|
||
<h3 className="text-xl font-black text-gray-900">{paymentData?.provider.toUpperCase()} Entegrasyonu</h3>
|
||
<p className="text-gray-400 text-sm mt-2 uppercase font-bold tracking-widest">Bu ödeme yöntemi geliştirme aşamasındadır.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-8 flex justify-center lg:justify-start">
|
||
<Link href={callbackUrl} className="flex items-center gap-2 text-sm font-semibold text-gray-500 hover:text-gray-900 transition translate-x-0 hover:-translate-x-1 duration-200">
|
||
<ArrowLeft size={16} />
|
||
Mağazaya Dön
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<footer className="py-12 border-t border-gray-100 text-center">
|
||
<p className="text-[#94A3B8] text-[10px] font-medium tracking-tight uppercase">
|
||
© 2026 P2CGateway Inc. Tüm hakları saklıdır.
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|
||
export default function CheckoutPage() {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||
<Suspense fallback={
|
||
<div className="flex justify-center items-center h-64">
|
||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
||
</div>
|
||
}>
|
||
<CheckoutContent />
|
||
</Suspense>
|
||
</div>
|
||
);
|
||
}
|