Refactor payment page layout and perform security cleanup
This commit is contained in:
Muhammet Güler
@@ -17,7 +17,7 @@ class PaymentController extends Controller
|
|||||||
'email' => 'required|email|max:255',
|
'email' => 'required|email|max:255',
|
||||||
'phone' => 'required|string|max:20',
|
'phone' => 'required|string|max:20',
|
||||||
'price' => 'required|numeric|min:1',
|
'price' => 'required|numeric|min:1',
|
||||||
'address' => 'required|string',
|
'address' => 'nullable|string',
|
||||||
'agreement' => 'accepted',
|
'agreement' => 'accepted',
|
||||||
], [
|
], [
|
||||||
'name.required' => 'Lütfen adınızı giriniz.',
|
'name.required' => 'Lütfen adınızı giriniz.',
|
||||||
@@ -60,7 +60,7 @@ class PaymentController extends Controller
|
|||||||
$test_mode = 0; // Canlı mod
|
$test_mode = 0; // Canlı mod
|
||||||
|
|
||||||
$user_name = $request->input('name').' '.$request->input('surname');
|
$user_name = $request->input('name').' '.$request->input('surname');
|
||||||
$user_address = $request->input('address'); // Note field used as address
|
$user_address = $request->input('address') ?: 'Adres Belirtilmemiş'; // Fallback if not provided
|
||||||
$user_phone = $request->input('phone');
|
$user_phone = $request->input('phone');
|
||||||
|
|
||||||
// Callbacks should ideally be routes we define, but user provided specific URLs.
|
// Callbacks should ideally be routes we define, but user provided specific URLs.
|
||||||
@@ -104,6 +104,15 @@ class PaymentController extends Controller
|
|||||||
'test_mode' => $test_mode,
|
'test_mode' => $test_mode,
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Log request for debugging
|
||||||
|
Log::info('PayTR Request', [
|
||||||
|
'merchant_id' => $merchant_id,
|
||||||
|
'merchant_oid' => $merchant_oid,
|
||||||
|
'email' => $email,
|
||||||
|
'payment_amount' => $payment_amount,
|
||||||
|
'user_ip' => $user_ip,
|
||||||
|
]);
|
||||||
|
|
||||||
// Curl request
|
// Curl request
|
||||||
$ch = curl_init();
|
$ch = curl_init();
|
||||||
curl_setopt($ch, CURLOPT_URL, 'https://www.paytr.com/odeme/api/get-token');
|
curl_setopt($ch, CURLOPT_URL, 'https://www.paytr.com/odeme/api/get-token');
|
||||||
@@ -114,15 +123,38 @@ class PaymentController extends Controller
|
|||||||
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
|
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
|
||||||
curl_setopt($ch, CURLOPT_FRESH_CONNECT, true);
|
curl_setopt($ch, CURLOPT_FRESH_CONNECT, true);
|
||||||
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
|
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
|
||||||
$result = @curl_exec($ch);
|
$result = curl_exec($ch);
|
||||||
|
|
||||||
if (curl_errno($ch)) {
|
$curlError = curl_error($ch);
|
||||||
return back()->with('error', 'PAYTR connection error. err:'.curl_error($ch));
|
$curlErrno = curl_errno($ch);
|
||||||
}
|
|
||||||
curl_close($ch);
|
curl_close($ch);
|
||||||
|
|
||||||
|
if ($curlErrno) {
|
||||||
|
Log::error('PayTR cURL error', ['errno' => $curlErrno, 'error' => $curlError]);
|
||||||
|
return back()->with('error', 'PAYTR bağlantı hatası. Lütfen tekrar deneyin.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($result === false || empty($result)) {
|
||||||
|
Log::error('PayTR returned empty response');
|
||||||
|
return back()->with('error', 'Ödeme sisteminden yanıt alınamadı. Lütfen tekrar deneyin.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Log the raw response for debugging
|
||||||
|
Log::info('PayTR Raw Response', ['response' => $result]);
|
||||||
|
|
||||||
$result = json_decode($result, 1);
|
$result = json_decode($result, 1);
|
||||||
|
|
||||||
|
// Check if result is valid
|
||||||
|
if (!$result || !is_array($result)) {
|
||||||
|
Log::error('PayTR API returned invalid response', ['response' => $result]);
|
||||||
|
return back()->with('error', 'Ödeme sisteminden geçersiz yanıt alındı. Lütfen tekrar deneyin.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isset($result['status'])) {
|
||||||
|
Log::error('PayTR API response missing status', ['response' => $result]);
|
||||||
|
return back()->with('error', 'Ödeme sisteminden beklenmeyen yanıt alındı. Lütfen tekrar deneyin.');
|
||||||
|
}
|
||||||
|
|
||||||
if ($result['status'] == 'success') {
|
if ($result['status'] == 'success') {
|
||||||
$token = $result['token'];
|
$token = $result['token'];
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
@@ -36,7 +36,6 @@ html {
|
|||||||
.line-clamp-2 {
|
.line-clamp-2 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,297 +2,247 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<section class="wrapper bg-white py-16 xl:py-20 relative">
|
<style>
|
||||||
<div class="container">
|
.payment-viewport {
|
||||||
<!-- Header -->
|
display: flex;
|
||||||
<div class="row align-items-center mb-12">
|
justify-content: center;
|
||||||
<div class="col-lg-8 mx-auto text-center">
|
align-items: center;
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 text-blue-600 text-sm font-bold mb-6">
|
padding-top: 150px !important; /* Üstten Header mesafesi */
|
||||||
<i class="uil uil-shield-check text-xl"></i>
|
padding-bottom: 150px !important; /* Alttan Footer mesafesi */
|
||||||
{!! t('256-Bit SSL Güvenli Ödeme') !!}
|
background-color: #f8f9fa; /* Hafif gri arka plan (opsiyonel) */
|
||||||
</div>
|
width: 100%;
|
||||||
<h1 class="display-3 font-bold text-slate-800 mb-4">{!! $page->title !!}</h1>
|
}
|
||||||
<p class="text-lg text-slate-500 max-w-2xl mx-auto">{!! $page->excerpt ?? t('Kredi kartınızla hızlı, kolay ve güvenli ödeme yapın.') !!}</p>
|
.payment-card {
|
||||||
</div>
|
width: 100%;
|
||||||
</div>
|
max-width: 440px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.paytr-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.paytr-input:focus {
|
||||||
|
border-color: #dc2626; /* Trunçgil Red */
|
||||||
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
||||||
|
}
|
||||||
|
.error-text {
|
||||||
|
color: #dc2626;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.tab-active {
|
||||||
|
color: #dc2626;
|
||||||
|
border-bottom: 3px solid #dc2626;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.btn-submit {
|
||||||
|
background-color: #dc2626;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
width: 100%;
|
||||||
|
transition: all 0.2s;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
|
||||||
|
}
|
||||||
|
.btn-submit:hover {
|
||||||
|
background-color: #b91c1c;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.btn-submit:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
@if(session('success'))
|
/* Custom Round Blue Checkbox */
|
||||||
<div class="row mb-10">
|
.custom-checkbox {
|
||||||
<div class="col-lg-6 mx-auto">
|
appearance: none;
|
||||||
<div class="alert alert-success bg-green-50 text-green-700 border-green-100 rounded-2xl p-5 flex items-start gap-4 shadow-sm">
|
-webkit-appearance: none;
|
||||||
<i class="uil uil-check-circle text-2xl"></i>
|
width: 20px;
|
||||||
<div>
|
height: 20px;
|
||||||
<h4 class="font-bold text-lg mb-1">{!! t('Ödeme Başarılı!') !!}</h4>
|
border: 2px solid #d1d5db;
|
||||||
<p>{!! session('success') !!}</p>
|
border-radius: 50% !important;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.custom-checkbox:checked {
|
||||||
|
background-color: #2563eb !important;
|
||||||
|
border-color: #2563eb !important;
|
||||||
|
}
|
||||||
|
.custom-checkbox:checked::after {
|
||||||
|
content: '\2713';
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.custom-checkbox:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Support for internal PayTR Scroll */
|
||||||
|
#paytriframe {
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="payment-viewport">
|
||||||
|
<div class="payment-card">
|
||||||
|
|
||||||
|
@if(isset($paytr_token))
|
||||||
|
<div class="p-4">
|
||||||
|
<script src="https://www.paytr.com/js/iframeResizer.min.js"></script>
|
||||||
|
<iframe src="https://www.paytr.com/odeme/guvenli/{!! $paytr_token !!}" id="paytriframe" frameborder="0" scrolling="no" style="width: 100%;"></iframe>
|
||||||
|
<script>iFrameResize({log:false},'#paytriframe');</script>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<!-- Header Section -->
|
||||||
|
<div class="flex justify-between items-center px-6 pt-6">
|
||||||
|
<div class="flex gap-4 border-b border-gray-100 flex-1">
|
||||||
|
<div class="pb-3 text-sm tab-active cursor-default whitespace-nowrap">
|
||||||
|
{!! t('Kart ile Ödeme') !!}
|
||||||
</div>
|
</div>
|
||||||
|
<a href="{{ url('banka-bilgilerimiz') }}" class="pb-3 text-sm text-gray-400 hover:text-gray-600 font-medium whitespace-nowrap transition-colors">
|
||||||
|
{!! t('Havale / EFT (IBAN)') !!}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if(session('error'))
|
<!-- Global Errors -->
|
||||||
<div class="row mb-10">
|
@if(session('error') || $errors->any())
|
||||||
<div class="col-lg-6 mx-auto">
|
<div class="mx-6 mt-4 p-3 bg-red-50 border border-red-100 rounded-lg text-red-700 text-xs">
|
||||||
<div class="alert alert-danger bg-red-50 text-red-700 border-red-100 rounded-2xl p-5 flex items-start gap-4 shadow-sm">
|
@if(session('error')) {{ session('error') }} @else {!! t('Lütfen formdaki eksikleri tamamlayın.') !!} @endif
|
||||||
<i class="uil uil-exclamation-triangle text-2xl"></i>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-lg mb-1">{!! t('Ödeme Başarısız!') !!}</h4>
|
|
||||||
<p>{!! session('error') !!}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
@endif
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if($errors->any())
|
<div class="px-6 py-5">
|
||||||
<div class="row mb-10">
|
<form action="{{ route('payment.process') }}" method="POST" id="paymentForm" class="space-y-4">
|
||||||
<div class="col-lg-6 mx-auto">
|
@csrf
|
||||||
<div class="alert alert-danger p-5 rounded-2xl border border-red-100 bg-red-50 shadow-sm">
|
<input type="hidden" name="payment_type" value="online">
|
||||||
<div class="flex items-center gap-3 mb-3 text-red-700">
|
<input type="hidden" name="surname" value="Kullanıcı">
|
||||||
<i class="uil uil-exclamation-triangle text-2xl"></i>
|
|
||||||
<h4 class="font-bold text-lg mb-0">{!! t('Lütfen Bilgileri Kontrol Ediniz') !!}</h4>
|
|
||||||
</div>
|
|
||||||
<ul class="list-disc pl-11 mb-0 font-medium text-red-600 space-y-1">
|
|
||||||
@foreach ($errors->all() as $error)
|
|
||||||
<li>{{ $error }}</li>
|
|
||||||
@endforeach
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<!-- Inputs -->
|
||||||
<div class="col-lg-12 col-xl-10">
|
<div class="flex flex-col gap-6 pb-2">
|
||||||
@if(isset($paytr_token))
|
<div>
|
||||||
<div class="card shadow-xl border-0 rounded-3xl overflow-hidden relative" style="min-height: 500px;">
|
<input type="text" name="name" class="paytr-input @error('name') border-red-500 @enderror"
|
||||||
<!-- Header Line -->
|
placeholder="{!! t('Kart Üzerindeki Ad Soyad') !!}" value="{{ old('name') }}" required>
|
||||||
<div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-blue-500 to-blue-600"></div>
|
@error('name') <div class="error-text px-1">{{ $message }}</div> @enderror
|
||||||
<div class="card-body p-4 bg-white">
|
</div>
|
||||||
<script src="https://www.paytr.com/js/iframeResizer.min.js"></script>
|
|
||||||
<iframe src="https://www.paytr.com/odeme/guvenli/{!! $paytr_token !!}" id="paytriframe" frameborder="0" scrolling="no" style="width: 100%;"></iframe>
|
<div>
|
||||||
<script>iFrameResize({},'#paytriframe');</script>
|
<input type="email" name="email" class="paytr-input @error('email') border-red-500 @enderror"
|
||||||
</div>
|
placeholder="{!! t('E-Posta Adresi') !!}" value="{{ old('email') }}" required>
|
||||||
</div>
|
@error('email') <div class="error-text px-1">{{ $message }}</div> @enderror
|
||||||
@else
|
</div>
|
||||||
|
|
||||||
<div class="max-w-xl mx-auto">
|
<div>
|
||||||
<!-- Tabs -->
|
<input type="tel" name="phone" class="paytr-input @error('phone') border-red-500 @enderror"
|
||||||
<div class="flex justify-center mb-8">
|
placeholder="{!! t('Telefon Numarası') !!}" value="{{ old('phone') }}" required>
|
||||||
<div class="bg-gray-100 p-1.5 rounded-full inline-flex">
|
@error('phone') <div class="error-text px-1">{{ $message }}</div> @enderror
|
||||||
<button type="button" class="px-8 py-3 rounded-full text-blue-700 bg-white shadow-sm font-bold text-sm transition-all">
|
</div>
|
||||||
{!! t('KART İLE ÖDEME') !!}
|
|
||||||
</button>
|
<div>
|
||||||
<a href="{{ url('banka-bilgilerimiz') }}" class="px-8 py-3 rounded-full text-gray-500 font-medium hover:text-gray-700 text-sm transition-colors flex items-center justify-center">
|
<textarea name="address" class="paytr-input @error('address') border-red-500 @enderror"
|
||||||
{!! t('DİĞER YÖNTEMLER') !!}
|
placeholder="{!! t('Adres Bilgisi') !!}" rows="3" required>{{ old('address') }}</textarea>
|
||||||
</a>
|
@error('address') <div class="error-text px-1">{{ $message }}</div> @enderror
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-white rounded-[2rem] shadow-2xl shadow-blue-900/5 border border-gray-100 overflow-hidden relative">
|
<!-- Agreement Compact -->
|
||||||
<!-- Top Line -->
|
<div class="flex items-center gap-3 pt-4">
|
||||||
<div class="absolute top-0 left-0 w-full h-1.5 bg-blue-600"></div>
|
<input id="agreement" name="agreement" type="checkbox" value="1"
|
||||||
|
class="custom-checkbox"
|
||||||
<div class="p-8 md:p-10">
|
{{ old('agreement') ? 'checked' : '' }} required>
|
||||||
<form action="{{ route('payment.process') }}" method="POST">
|
<label for="agreement" class="text-[12px] text-gray-700 leading-tight cursor-pointer font-medium select-none">
|
||||||
@csrf
|
<span class="text-red-600 font-bold hover:underline" onclick="event.preventDefault(); document.getElementById('agreementModal').classList.remove('hidden');">
|
||||||
<input type="hidden" name="payment_type" value="online">
|
{!! t('Mesafeli Satış Sözleşmesi') !!}</span>{!! t("'ni okudum, onaylıyorum.") !!}
|
||||||
|
</label>
|
||||||
<div class="space-y-6">
|
|
||||||
<!-- Name -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
|
||||||
<i class="uil uil-user text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<input type="text" name="name" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('Adınız') !!}" value="{{ old('name') }}" required>
|
|
||||||
</div>
|
|
||||||
@error('name') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
|
|
||||||
|
|
||||||
<!-- Surname -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
|
||||||
<i class="uil uil-user text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<input type="text" name="surname" value="{{ old('surname') }}" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('Soyadınız') !!}" required>
|
|
||||||
</div>
|
|
||||||
@error('surname') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
|
|
||||||
|
|
||||||
<!-- Email -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
|
||||||
<i class="uil uil-envelope text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<input type="email" name="email" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('E-Posta Adresi') !!}" value="{{ old('email') }}" required>
|
|
||||||
</div>
|
|
||||||
@error('email') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
|
|
||||||
|
|
||||||
<!-- Phone -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
|
|
||||||
<i class="uil uil-phone text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<input type="tel" name="phone" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('Telefon Numarası') !!}" value="{{ old('phone') }}" required>
|
|
||||||
</div>
|
|
||||||
@error('phone') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
|
|
||||||
|
|
||||||
<!-- Note -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute top-4 left-0 pl-5 flex pointer-events-none">
|
|
||||||
<i class="uil uil-comment-alt-notes text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<textarea name="address" rows="3" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm resize-none" placeholder="{!! t('Sipariş Notunuz (Opsiyonel)') !!}">{{ old('address') }}</textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Agreement -->
|
|
||||||
<div class="mt-6 flex items-start gap-3">
|
|
||||||
<div class="flex items-center pt-0.5">
|
|
||||||
<input id="agreement" name="agreement" type="checkbox" value="1"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="appearance: auto !important; -webkit-appearance: auto !important; width: 20px; height: 20px; accent-color: #1e3a8a;"
|
|
||||||
{{ old('agreement') ? 'checked' : '' }} required>
|
|
||||||
</div>
|
|
||||||
<div class="ml-1 text-sm">
|
|
||||||
<label for="agreement" class="font-medium text-gray-700 select-none cursor-pointer">
|
|
||||||
<span class="text-blue-900 font-bold hover:underline" onclick="event.preventDefault(); document.getElementById('agreementModal').classList.remove('hidden');">
|
|
||||||
Mesafeli Satış Sözleşmesi
|
|
||||||
</span>'ni okudum, onaylıyorum.
|
|
||||||
</label>
|
|
||||||
@error('agreement') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-8 border-t border-gray-100"></div>
|
|
||||||
|
|
||||||
<!-- Total Amount Row -->
|
|
||||||
<div class="flex items-end justify-between mb-8 bg-blue-50/50 p-6 rounded-2xl border border-blue-50">
|
|
||||||
<div class="text-blue-900 font-bold text-lg mb-1">{!! t('Ödenecek Tutar') !!}</div>
|
|
||||||
<div class="text-right">
|
|
||||||
<div class="flex items-center justify-end gap-1">
|
|
||||||
<input type="number" step="0.01" min="1" name="price" class="bg-transparent border-none text-right font-black text-4xl text-blue-600 p-0 focus:ring-0 w-48 placeholder-blue-300 transition-all outline-none" placeholder="0.00" value="{{ old('price') }}" required>
|
|
||||||
<span class="font-bold text-blue-400 text-2xl mb-1">TL</span>
|
|
||||||
</div>
|
|
||||||
@error('price') <div class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</div> @enderror
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Submit Button -->
|
|
||||||
<!-- Custom Style for Payment Button -->
|
|
||||||
<style>
|
|
||||||
#payment-submit-btn {
|
|
||||||
background-color: #e31e24;
|
|
||||||
color: white;
|
|
||||||
border-radius: 9999px;
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
box-shadow: 0 10px 15px -3px rgba(254, 202, 202, 0.5);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#payment-submit-btn:hover {
|
|
||||||
background-color: #c4161b;
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 20px 25px -5px rgba(220, 38, 38, 0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- Submit Button -->
|
|
||||||
<button type="submit" id="payment-submit-btn">
|
|
||||||
<span>{!! t('Ödemeyi Tamamla') !!}</span>
|
|
||||||
<i class="uil uil-arrow-right text-2xl"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="mt-6 text-center">
|
|
||||||
<div class="flex justify-center gap-2 opacity-30 grayscale hover:grayscale-0 transition-all duration-300">
|
|
||||||
<i class="uil uil-master-card text-2xl"></i>
|
|
||||||
<i class="uil uil-visa text-2xl"></i>
|
|
||||||
<i class="uil uil-card-atm text-2xl"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if($page->content)
|
|
||||||
<div class="mt-20 text-center">
|
|
||||||
<div class="prose max-w-3xl mx-auto text-slate-500">
|
|
||||||
{!! $page->content !!}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<!-- Footer Action -->
|
||||||
|
<div class="bg-gray-50/50 p-6 border-t border-gray-100">
|
||||||
|
<div class="flex items-center justify-between mb-4 px-1">
|
||||||
|
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest">{!! t('Toplam') !!}</span>
|
||||||
|
<div class="flex items-baseline gap-1">
|
||||||
|
<input type="number" step="0.01" min="1" name="price" form="paymentForm"
|
||||||
|
class="text-right w-20 text-xl font-bold text-gray-900 bg-transparent border-none p-0 focus:ring-0 outline-none"
|
||||||
|
value="{{ old('price', '0.00') }}" required>
|
||||||
|
<span class="text-sm font-bold text-gray-900 underline decoration-red-500 decoration-2 underline-offset-4">TL</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" form="paymentForm" class="btn-submit">
|
||||||
|
{!! t('Ödeme Yap') !!}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Agreement Modal (Top-Spaced) -->
|
<!-- Agreement Modal -->
|
||||||
<div id="agreementModal" class="fixed inset-0 hidden" style="z-index: 99999;" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
<div id="agreementModal" class="fixed inset-0 hidden" style="z-index: 99999;" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||||||
<!-- Backdrop -->
|
<div class="absolute inset-0 bg-black/75 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="document.getElementById('agreementModal').classList.add('hidden')"></div>
|
||||||
<div class="absolute inset-0 bg-black/75 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="document.getElementById('agreementModal').classList.add('hidden')"></div>
|
<div class="absolute inset-0 overflow-y-auto">
|
||||||
|
<div class="flex min-h-full items-start justify-center p-4 text-center pt-24 sm:pt-32">
|
||||||
<!-- Modal Dialog Layout -->
|
<div class="relative w-full max-w-xl transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all mb-10">
|
||||||
<div class="absolute inset-0 overflow-y-auto">
|
<!-- Header -->
|
||||||
<!-- Changed from 'items-center' to 'items-start' and added 'pt-20' for top spacing -->
|
<div class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4">
|
||||||
<div class="flex min-h-full items-start justify-center p-4 text-center pt-24 sm:pt-32">
|
<h3 class="text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
||||||
<!-- Modal Panel -->
|
{!! t('Mesafeli Satış Sözleşmesi') !!}
|
||||||
<div class="relative w-full max-w-xl transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all mb-10" style="background-color: #ffffff;">
|
</h3>
|
||||||
|
<button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')" class="rounded-full p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none transition-colors">
|
||||||
<!-- Header -->
|
<i class="uil uil-times text-2xl"></i>
|
||||||
<div class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4">
|
</button>
|
||||||
<h3 class="text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
</div>
|
||||||
{!! t('Mesafeli Satış Sözleşmesi') !!}
|
<!-- Body -->
|
||||||
</h3>
|
<div class="px-6 py-6">
|
||||||
<button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')" class="rounded-full p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none transition-colors">
|
<div class="text-sm text-gray-600 max-h-[60vh] overflow-y-auto space-y-4 pr-2 custom-scrollbar">
|
||||||
<i class="uil uil-times text-2xl"></i>
|
<p class="font-bold text-gray-900">MADDE 1 – TARAFLAR</p>
|
||||||
</button>
|
<p>İşbu Sözleşme aşağıdaki taraflar arasında aşağıda belirtilen hüküm ve şartlar çerçevesinde imzalanmıştır.</p>
|
||||||
</div>
|
<p class="font-bold text-gray-900">MADDE 2 – KONU</p>
|
||||||
|
<p>İşbu sözleşmenin konusu, ALICI'nın SATICI'ya ait internet sitesinden elektronik ortamda siparişini yaptığı ürünün satışı ve teslimi ile ilgili hak ve yükümlülüklerin saptanmasıdır.</p>
|
||||||
<!-- Body -->
|
<p class="font-bold text-gray-900">MADDE 3 – CAYMA HAKKI</p>
|
||||||
<div class="px-6 py-6">
|
<p>ALICI; 14 gün içerisinde cayma hakkını kullanabilir.</p>
|
||||||
<div class="text-sm text-gray-600 max-h-[60vh] overflow-y-auto space-y-4 pr-2 custom-scrollbar">
|
|
||||||
<p class="font-bold text-gray-900">MADDE 1 – TARAFLAR</p>
|
|
||||||
<p>İşbu Sözleşme aşağıdaki taraflar arasında aşağıda belirtilen hüküm ve şartlar çerçevesinde imzalanmıştır.</p>
|
|
||||||
|
|
||||||
<p class="font-bold text-gray-900">MADDE 2 – KONU</p>
|
|
||||||
<p>İşbu sözleşmenin konusu, ALICI'nın SATICI'ya ait internet sitesinden elektronik ortamda siparişini yaptığı aşağıda nitelikleri ve satış fiyatı belirtilen ürünün satışı ve teslimi ile ilgili olarak 6502 sayılı Tüketicinin Korunması Hakkında Kanun ve Mesafeli Sözleşmelere Dair Yönetmelik hükümleri gereğince tarafların hak ve yükümlülüklerinin saptanmasıdır.</p>
|
|
||||||
|
|
||||||
<p class="font-bold text-gray-900">MADDE 3 – CAYMA HAKKI</p>
|
|
||||||
<p>ALICI; mal satışına ilişkin mesafeli sözleşmelerde, ürünün kendisine veya gösterdiği adresteki kişi/kuruluşa teslim tarihinden itibaren 14 (on dört) gün içerisinde hiçbir hukuki ve cezai sorumluluk üstlenmeksizin ve hiçbir gerekçe göstermeksizin malı reddederek sözleşmeden cayma hakkını kullanabilir.</p>
|
|
||||||
<p>...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div class="flex flex-col-reverse gap-3 border-t border-gray-100 bg-gray-50 px-6 py-4 sm:flex-row sm:justify-end">
|
|
||||||
<button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')"
|
|
||||||
class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto"
|
|
||||||
style="background-color: #dc2626 !important; color: #ffffff !important; border-radius: 9999px !important; transition: all 0.3s ease !important;">
|
|
||||||
{!! t('Kapat') !!}
|
|
||||||
</button>
|
|
||||||
<button type="button" onclick="document.getElementById('agreement').checked = true; document.getElementById('agreementModal').classList.add('hidden');"
|
|
||||||
class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto"
|
|
||||||
style="background-color: #16a34a !important; color: #ffffff !important; border-radius: 9999px !important; transition: all 0.3s ease !important;">
|
|
||||||
<i class="uil uil-check mr-2 text-lg"></i>
|
|
||||||
{!! t('Okudum, Onaylıyorum') !!}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="flex flex-col-reverse gap-3 border-t border-gray-100 bg-gray-50 px-6 py-4 sm:flex-row sm:justify-end">
|
||||||
|
<button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')"
|
||||||
|
class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto"
|
||||||
|
style="background-color: #dc2626 !important; color: #ffffff !important; border-radius: 9999px !important;">
|
||||||
|
{!! t('Kapat') !!}
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="document.getElementById('agreement').checked = true; document.getElementById('agreementModal').classList.add('hidden');"
|
||||||
|
class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto"
|
||||||
|
style="background-color: #16a34a !important; color: #ffffff !important; border-radius: 9999px !important;">
|
||||||
|
<i class="uil uil-check mr-2 text-lg"></i>
|
||||||
|
{!! t('Okudum, Onaylıyorum') !!}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
Reference in New Issue
Block a user