File manager - Edit - /home/webapp69.cm.in.th/u69319090039/Shop39/app/Views/checkout/index.php
Back
<div class="container py-4"> <div class="d-flex align-items-center justify-content-between mb-4"> <div> <h3 class="fw-bold m-0"><i class="bi bi-shield-check text-primary me-2"></i>ยืนยันและชำระเงินคำสั่งซื้อ</h3> <p class="text-muted small mb-0">ตรวจสอบที่อยู่จัดส่งและเลือกวิธีการชำระเงินที่ต้องการ</p> </div> <a href="<?= APP_URL ?>/cart" class="btn btn-outline-secondary btn-sm rounded-pill"><i class="bi bi-arrow-left me-1"></i>กลับไปตะกร้าสินค้า</a> </div> <form action="<?= APP_URL ?>/checkout/process" method="POST" id="checkoutForm"> <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>"> <div class="row g-4"> <!-- Left Column: Shipping & Payment Method --> <div class="col-lg-7"> <!-- Shipping Address Card --> <div class="card border-0 shadow-sm rounded-4 p-4 mb-4"> <h5 class="fw-bold mb-3 text-dark"><i class="bi bi-geo-alt text-danger me-2"></i>ข้อมูลที่อยู่จัดส่ง</h5> <div class="row g-3"> <div class="col-md-6"> <label class="form-label font-semibold">ชื่อ-นามสกุล ผู้รับ <span class="text-danger">*</span></label> <input type="text" name="recipient_name" class="form-control" value="<?= Security::e($user['full_name']) ?>" required> </div> <div class="col-md-6"> <label class="form-label font-semibold">เบอร์โทรศัพท์ติดต่อ <span class="text-danger">*</span></label> <input type="text" name="recipient_phone" class="form-control" value="<?= Security::e($user['phone']) ?>" required> </div> <div class="col-12"> <label class="form-label font-semibold">ที่อยู่จัดส่งแบบสมบูรณ์ <span class="text-danger">*</span></label> <textarea name="shipping_address" class="form-control" rows="3" placeholder="บ้านเลขที่, อาคาร, ถนน, แขวง/ตำบล, เขต/อำเภอ, จังหวัด, รหัสไปรษณีย์" required><?= Security::e($user['address'] ?? '456 Rama 9 Road, Huai Khwang, Bangkok 10310') ?></textarea> </div> </div> </div> <!-- Payment Method Selection Card --> <div class="card border-0 shadow-sm rounded-4 p-4"> <h5 class="fw-bold mb-3 text-dark"><i class="bi bi-credit-card-2-front text-primary me-2"></i>เลือกวิธีชำระเงิน (Payment Method)</h5> <!-- Option 1: Prepaid --> <div class="payment-card border rounded-3 p-3 mb-3 cursor-pointer transition-all active-border" id="prepaidCard" onclick="selectPaymentMethod('prepaid')"> <div class="form-check d-flex align-items-center justify-content-between p-0 m-0"> <div class="d-flex align-items-center gap-3"> <input class="form-check-input ms-0 mt-0" type="radio" name="payment_method" id="payPrepaid" value="prepaid" checked style="width: 1.3em; height: 1.3em;"> <div> <label class="form-check-label fw-bold fs-6 text-dark cursor-pointer" for="payPrepaid"> 💳 ชำระเงินต้นทาง (Prepaid / QR PromptPay) </label> <div class="small text-muted">โอนชำระเงินล่วงหน้า ร้านค้าเริ่มเตรียมจัดส่งสินค้าทันที</div> </div> </div> <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1 rounded-pill small">แนะนำ</span> </div> <!-- Prepaid Details Panel --> <div id="prepaidDetails" class="mt-3 pt-3 border-top"> <div class="p-3 bg-light rounded-3 border"> <div class="row align-items-center g-3"> <div class="col-sm-4 text-center"> <?php $primarySellerQr = ''; foreach (($sellersPaymentInfo ?? []) as $spInfo) { if (!empty($spInfo['qr_code'])) { $primarySellerQr = $spInfo['qr_code']; break; } } ?> <?php if ($primarySellerQr): ?> <div class="bg-white p-2 border rounded-3 shadow-sm d-inline-block"> <img src="<?= APP_URL ?>/public/<?= Security::e(ltrim($primarySellerQr, '/')) ?>" alt="QR Code ร้านค้า" class="img-fluid rounded" style="max-height: 140px;"> <div class="badge bg-dark small mt-1 d-block">QR ร้านค้าเจ้าของสินค้า</div> </div> <?php else: ?> <div class="bg-white p-2 border rounded-3 shadow-sm d-inline-block"> <i class="bi bi-qr-code display-4 text-dark d-block"></i> <span class="badge bg-dark small">Thai QR Payment</span> </div> <?php endif; ?> </div> <div class="col-sm-8"> <div class="fw-bold text-success mb-1"><i class="bi bi-check2-circle me-1"></i>ข้อมูลการโอนเงินชำระค่าสินค้า:</div> <?php if (!empty($sellersPaymentInfo)): ?> <div class="bg-white p-2 rounded-2 border mb-2 small"> <?php foreach ($sellersPaymentInfo as $sInfo): ?> <div class="mb-1 pb-1 border-bottom"> <strong class="text-primary"><?= Security::e($sInfo['shop_name']) ?>:</strong> <?php if (!empty($sInfo['bank_account'])): ?> <div>ธนาคาร: <?= Security::e($sInfo['bank_name'] ?? '-') ?> | เลขบัญชี: <strong class="text-dark"><?= Security::e($sInfo['bank_account']) ?></strong> (<?= Security::e($sInfo['account_name'] ?? $sInfo['shop_name']) ?>)</div> <?php endif; ?> <?php if (!empty($sInfo['promptpay_number'])): ?> <div>PromptPay: <strong class="text-success"><?= Security::e($sInfo['promptpay_number']) ?></strong></div> <?php endif; ?> </div> <?php endforeach; ?> </div> <?php endif; ?> <ol class="small text-muted ps-3 mb-2"> <li>สแกน QR Code หรือโอนเงินเข้าบัญชีร้านค้าตามข้อมูลด้านบน</li> <li>กดปุ่ม "ยืนยันและชำระเงิน" ด้านล่าง</li> <li>ร้านค้าจะได้รับคำสั่งซื้อและเริ่มแพ็คสินค้าเพื่อจัดส่งทันที</li> </ol> <div class="small text-primary"><i class="bi bi-shield-lock me-1"></i>ยอดเงินได้รับการคุ้มครองโดยระบบ SHOP 39</div> </div> </div> </div> </div> </div> <!-- Option 2: COD (Cash on Delivery) --> <div class="payment-card border rounded-3 p-3 cursor-pointer transition-all" id="codCard" onclick="selectPaymentMethod('cod')"> <div class="form-check d-flex align-items-center justify-content-between p-0 m-0"> <div class="d-flex align-items-center gap-3"> <input class="form-check-input ms-0 mt-0" type="radio" name="payment_method" id="payCod" value="cod" style="width: 1.3em; height: 1.3em;"> <div> <label class="form-check-label fw-bold fs-6 text-dark cursor-pointer" for="payCod"> 🚚 เก็บเงินปลายทาง (Cash on Delivery / COD) </label> <div class="small text-muted">สั่งซื้อได้ทันที ชำระเงินสดกับพนักงานส่งพัสดุเมื่อได้รับสินค้า</div> </div> </div> <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1 rounded-pill small">สะดวกสบาย</span> </div> <!-- COD Details Panel --> <div id="codDetails" class="mt-3 pt-3 border-top" style="display: none;"> <div class="alert alert-warning border-0 mb-0 rounded-3"> <div class="d-flex gap-2"> <i class="bi bi-info-circle-fill fs-5 flex-shrink-0 text-warning-emphasis"></i> <div class="small"> <strong class="d-block mb-1 text-warning-emphasis">เงื่อนไขการเก็บเงินปลายทาง:</strong> <ul class="ps-3 mb-0 text-dark"> <li>ระบบจะบันทึกสถานะเป็น <strong>"รอเก็บเงินปลายทาง"</strong></li> <li>โปรดเตรียมเงินสดจำนวน <strong class="text-danger fs-6">฿<?= number_format($total, 2) ?></strong> ให้พอดีเพื่อชำระแก่พนักงานส่งพัสดุ</li> <li>เมื่อชำระเงินกับพนักงานขนส่งแล้ว สถานะจะเปลี่ยนเป็น "ชำระเงินแล้ว" อัตโนมัติ</li> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- Right Column: Order Summary --> <div class="col-lg-5"> <div class="card border-0 shadow-sm rounded-4 p-4 sticky-top" style="top: 85px;"> <h5 class="fw-bold mb-3 text-dark d-flex justify-content-between align-items-center"> <span>สรุปรายการสั่งซื้อ</span> <span class="badge bg-secondary rounded-pill small"><?= count($items) ?> รายการ</span> </h5> <div class="d-grid gap-3 mb-4" style="max-height: 300px; overflow-y: auto;"> <?php foreach ($items as $item): ?> <?php $img = !empty($item['product']['primary_image']) ? APP_URL . '/public/' . ltrim($item['product']['primary_image'], '/') : APP_URL . '/public/images/no-image.png'; ?> <div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center gap-2"> <img src="<?= $img ?>" alt="<?= Security::e($item['product']['title']) ?>" class="rounded-3 border object-fit-cover" style="width: 48px; height: 48px;"> <div> <div class="fw-bold small text-truncate" style="max-width: 180px;"><?= Security::e($item['product']['title']) ?></div> <div class="text-muted small">x<?= $item['quantity'] ?> <?= !empty($item['variant_info']) ? '(' . Security::e($item['variant_info']) . ')' : '' ?></div> </div> </div> <span class="fw-bold text-dark">฿<?= number_format($item['subtotal'], 2) ?></span> </div> <?php endforeach; ?> </div> <hr class="my-3"> <div class="d-flex justify-content-between text-muted mb-2 small"> <span>ราคารวมสินค้า</span> <span>฿<?= number_format($total, 2) ?></span> </div> <div class="d-flex justify-content-between text-muted mb-2 small"> <span>ค่าจัดส่ง</span> <span class="text-success fw-bold">ฟรีค่าจัดส่ง</span> </div> <div class="d-flex justify-content-between text-muted mb-3 small" id="codSummaryRow" style="display: none !important;"> <span>ยอดเรียกเก็บปลายทาง (COD)</span> <span class="text-danger fw-bold">฿<?= number_format($total, 2) ?></span> </div> <div class="p-3 bg-light rounded-3 mb-4"> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold fs-6">ยอดชำระสุทธิ</span> <span class="fw-bold fs-4 text-primary">฿<?= number_format($total, 2) ?></span> </div> </div> <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold rounded-pill shadow py-3" id="submitOrderBtn"> <i class="bi bi-lock-fill me-1"></i> <span id="submitBtnText">ยืนยันและชำระเงินต้นทาง</span> </button> <div class="text-center text-muted small mt-3"> <i class="bi bi-shield-fill-check text-success me-1"></i>ข้อมูลการสั่งซื้อและชำระเงินปลอดภัย 100% </div> </div> </div> </div> </form> </div> <style> .payment-card { transition: all .2s ease; cursor: pointer; } .payment-card:hover { border-color: #0d6efd !important; background-color: #f8f9fa; } .active-border { border-color: #0d6efd !important; background-color: #f0f7ff; box-shadow: 0 0 0 1px #0d6efd; } </style> <script> function selectPaymentMethod(type) { const payPrepaid = document.getElementById('payPrepaid'); const payCod = document.getElementById('payCod'); const prepaidCard = document.getElementById('prepaidCard'); const codCard = document.getElementById('codCard'); const prepaidDetails = document.getElementById('prepaidDetails'); const codDetails = document.getElementById('codDetails'); const submitBtnText = document.getElementById('submitBtnText'); const submitBtn = document.getElementById('submitOrderBtn'); if (type === 'prepaid') { payPrepaid.checked = true; prepaidCard.classList.add('active-border'); codCard.classList.remove('active-border'); prepaidDetails.style.display = 'block'; codDetails.style.display = 'none'; submitBtnText.textContent = 'ยืนยันและชำระเงินต้นทาง'; submitBtn.className = 'btn btn-primary btn-lg w-100 fw-bold rounded-pill shadow py-3'; } else { payCod.checked = true; codCard.classList.add('active-border'); prepaidCard.classList.remove('active-border'); prepaidDetails.style.display = 'none'; codDetails.style.display = 'block'; submitBtnText.textContent = 'สั่งซื้อทันที (เก็บเงินปลายทาง)'; submitBtn.className = 'btn btn-warning text-dark btn-lg w-100 fw-bold rounded-pill shadow py-3'; } } // Double-submit Protection document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('checkoutForm'); const submitBtn = document.getElementById('submitOrderBtn'); form.addEventListener('submit', function(e) { if (submitBtn.disabled) { e.preventDefault(); return false; } submitBtn.disabled = true; submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>กำลังประมวลผลคำสั่งซื้อ...'; }); }); </script>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.3 |
proxy
|
phpinfo
|
Settings