🖥️ Server: LiteSpeed
💻 System: Linux in-mum-web1643.main-hosting.eu 5.14.0-687.46.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Sep 11 09:03:19 EDT 2026 x86_64
👤 User: u621169360 (621169360)
🐘 PHP: 8.2.33
🚫 Disabled: system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail
📄 checkout.php
📁 Path: /home/u621169360/domains/papayawhip-cod-251399.hostingersite.com/public_html/checkout.php
📊 Size: 28.8 KB
🔒 Perm: 0644
📝 MIME: text/x-php
<?php
session_start();
require_once __DIR__ . '/admin-panal/includes/db.php';
// Check if user is logged in
$isLoggedIn = isset($_SESSION['customer_id']);
if ($isLoggedIn && !isset($_SESSION['customer_email'])) {
$stmt = $pdo->prepare("SELECT email FROM customers WHERE id = ?");
$stmt->execute([$_SESSION['customer_id']]);
$res = $stmt->fetch();
if ($res) {
$_SESSION['customer_email'] = $res['email'];
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z2X2T395KZ');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout — Elegance of India</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
.checkout-wrapper { max-width: 1160px; margin: 0 auto; padding: 40px 24px 80px; }
.checkout-logo {
font-size: 26px;
color: var(--black);
text-align: center;
margin-bottom: 8px;
}
.checkout-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 40px;
}
.checkout-step {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mid-gray);
padding: 0 18px;
}
.checkout-step.active { color: var(--black); }
.checkout-step.done { color: var(--gold); }
.checkout-step-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--mid-gray);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.checkout-step.active .checkout-step-num { background: var(--black); }
.checkout-step.done .checkout-step-num { background: var(--gold); }
.checkout-step-div {
width: 40px;
height: 1px;
background: var(--mid-gray);
}
/* Layout */
.checkout-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: flex-start;
}
/* Form sections */
.checkout-section {
margin-bottom: 36px;
}
.checkout-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--black);
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--mid-gray);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
.form-row.single { grid-template-columns: 1fr; }
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--charcoal);
}
.form-group input,
.form-group select {
font-size: 12px;
color: var(--black);
background: var(--white);
border: 1px solid var(--mid-gray);
padding: 11px 14px;
outline: none;
transition: border-color 0.2s;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus { border-color: var(--gold); }
.form-group input::placeholder { color: #bbb; }
/* Guest / Login notice */
.checkout-login-notice {
padding: 14px 18px;
background: var(--warm-gray);
border-left: 3px solid var(--gold);
font-size: 11.5px;
color: var(--charcoal);
margin-bottom: 28px;
}
.checkout-login-notice a { color: var(--gold); text-decoration: none; font-weight: 600; }
.checkout-login-notice a:hover { text-decoration: underline; }
/* Payment methods */
.payment-methods { display: flex; flex-direction: column; gap: 12px; }
.payment-option {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 2px solid var(--mid-gray);
cursor: pointer;
transition: border-color 0.2s;
position: relative;
}
.payment-option.selected { border-color: var(--black); }
.payment-option input[type="radio"] { accent-color: var(--black); width: 16px; height: 16px; }
.payment-option-label {
font-size: 12px;
font-weight: 600;
color: var(--black);
}
.payment-option-icons {
margin-left: auto;
display: flex;
gap: 6px;
font-size: 24px;
color: var(--charcoal);
}
.payment-option-body {
display: none;
margin-top: 16px;
grid-column: 1 / -1;
}
.payment-option.selected .payment-option-body { display: block; }
.card-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
/* Stripe card field simulation */
.stripe-field {
border: 1px solid var(--mid-gray);
padding: 11px 14px;
font-size: 12px;
color: var(--charcoal);
background: #f9f9f9;
letter-spacing: 0.06em;
}
/* Place order button */
.btn-place-order {
width: 100%;
padding: 18px 24px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
background: var(--gold, #c9a96e);
color: var(--white);
border: none;
cursor: pointer;
transition: background 0.25s, letter-spacing 0.25s;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-place-order:hover { background: #b8954f; }
/* Order summary panel */
.order-summary-panel {
background: var(--warm-gray);
padding: 28px 22px;
position: sticky;
top: 100px;
}
.summary-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--black);
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--mid-gray);
}
.summary-item {
display: flex;
gap: 14px;
margin-bottom: 16px;
align-items: center;
}
.summary-item-img {
width: 64px;
height: 80px;
object-fit: cover;
background: var(--mid-gray);
flex-shrink: 0;
}
.summary-item-info { flex: 1; min-width: 0; }
.summary-item-name {
font-size: 13px;
color: var(--black);
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.summary-item-meta {
font-size: 10px;
color: var(--charcoal);
}
.summary-item-price {
font-size: 15px;
color: var(--black);
flex-shrink: 0;
}
.summary-divider { height: 1px; background: var(--mid-gray); margin: 16px 0; }
.summary-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--charcoal);
margin-bottom: 10px;
}
.summary-row.total {
font-size: 15px;
font-weight: 700;
color: var(--black);
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--mid-gray);
}
.summary-row .val { font-weight: 500; }
.checkout-trust {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.checkout-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 10.5px;
color: var(--charcoal);
}
.checkout-trust-item i { color: var(--gold); font-size: 13px; width: 16px; text-align: center; }
/* Success overlay */
.order-success-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 9999;
align-items: center;
justify-content: center;
}
.order-success-overlay.open { display: flex; }
.order-success-box {
background: var(--white);
max-width: 480px;
width: 90%;
padding: 56px 40px;
text-align: center;
}
.order-success-icon {
width: 72px;
height: 72px;
background: #f1f8e9;
color: #4caf50;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 30px;
}
.order-success-title {
font-size: 28px;
font-weight: 400;
color: var(--black);
margin-bottom: 12px;
}
.order-success-text {
font-size: 13px;
color: var(--charcoal);
line-height: 1.7;
margin-bottom: 28px;
}
.order-success-num {
font-size: 11px;
letter-spacing: 0.12em;
color: var(--gold);
font-weight: 700;
margin-bottom: 28px;
}
@media (max-width: 900px) {
.checkout-layout { grid-template-columns: 1fr; }
.order-summary-panel { position: static; }
}
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
.card-row { grid-template-columns: 1fr; }
.checkout-steps { display: none; }
}
</style>
</head>
<body>
<?php include 'inc/header.php'; ?>
<!-- Order Success Overlay -->
<div class="order-success-overlay" id="orderSuccessOverlay">
<div class="order-success-box">
<div class="order-success-icon"><i class="fas fa-check"></i></div>
<h2 class="order-success-title">Order Placed!</h2>
<div class="order-success-num" id="successOrderNum">Order #EOI-000000</div>
<p class="order-success-text">Thank you for your order. You will receive a confirmation email shortly with your order details and tracking information.</p>
<a href="index.php" class="btn-place-order" style="display:inline-flex;width:auto;padding:14px 40px;max-width:280px;">
<i class="fas fa-home"></i> Back to Home
</a>
</div>
</div>
<div class="checkout-wrapper">
<div class="checkout-logo">Elegance of India</div>
<!-- Steps -->
<div class="checkout-steps">
<div class="checkout-step done">
<div class="checkout-step-num"><i class="fas fa-check" style="font-size:10px;"></i></div>
Cart
</div>
<div class="checkout-step-div"></div>
<div class="checkout-step active">
<div class="checkout-step-num">2</div>
Details
</div>
<div class="checkout-step-div"></div>
<div class="checkout-step">
<div class="checkout-step-num">3</div>
Payment
</div>
<div class="checkout-step-div"></div>
<div class="checkout-step">
<div class="checkout-step-num">4</div>
Confirm
</div>
</div>
<div class="checkout-layout">
<!-- LEFT: Forms -->
<div>
<?php if (!$isLoggedIn): ?>
<div class="checkout-login-notice">
Already have an account? <a href="#" onclick="document.getElementById('loginBtn').click();return false;">Sign in</a> for faster checkout.
</div>
<?php endif; ?>
<!-- Contact Info -->
<div class="checkout-section">
<div class="checkout-section-title">Contact Information</div>
<div class="form-row single">
<div class="form-group">
<label>Email Address *</label>
<input type="email" id="ckEmail" placeholder="you@example.com" autocomplete="email"
value="<?= $isLoggedIn ? htmlspecialchars($_SESSION['customer_email'] ?? '') : '' ?>" <?= $isLoggedIn ? 'readonly style="background:#f9f9f9;cursor:not-allowed;"' : '' ?> />
</div>
</div>
</div>
<!-- Shipping Address -->
<div class="checkout-section">
<div class="checkout-section-title">Shipping Address</div>
<div class="form-row">
<div class="form-group">
<label>First Name *</label>
<input type="text" id="ckFirstName" placeholder="First name" autocomplete="given-name" />
</div>
<div class="form-group">
<label>Last Name *</label>
<input type="text" id="ckLastName" placeholder="Last name" autocomplete="family-name" />
</div>
</div>
<div class="form-row single">
<div class="form-group">
<label>Address Line 1 *</label>
<input type="text" id="ckAddress1" placeholder="Street address, apartment, suite, etc." autocomplete="address-line1" />
</div>
</div>
<div class="form-row single">
<div class="form-group">
<label>Address Line 2</label>
<input type="text" id="ckAddress2" placeholder="Apartment, suite, unit (optional)" autocomplete="address-line2" />
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>City *</label>
<input type="text" id="ckCity" placeholder="City" autocomplete="address-level2" />
</div>
<div class="form-group">
<label>State / Province</label>
<input type="text" id="ckState" placeholder="State" autocomplete="address-level1" />
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Postal Code *</label>
<input type="text" id="ckPostal" placeholder="Postal code" autocomplete="postal-code" />
</div>
<div class="form-group">
<label>Country *</label>
<select id="ckCountry" autocomplete="country">
<option value="">Select country</option>
<option value="IN">India</option>
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
<option value="CA">Canada</option>
<option value="AU">Australia</option>
<option value="AE">UAE</option>
<option value="SG">Singapore</option>
<option value="NZ">New Zealand</option>
<option value="DE">Germany</option>
<option value="FR">France</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row single">
<div class="form-group">
<label>Phone Number *</label>
<input type="tel" id="ckPhone" placeholder="+1 555 000 0000" autocomplete="tel" />
</div>
</div>
</div>
<!-- Payment -->
<div class="checkout-section">
<div class="checkout-section-title">Payment Method</div>
<div class="payment-methods">
<!-- PayPal -->
<div class="payment-option selected" id="pmPaypal" onclick="selectPayment('paypal')">
<input type="radio" name="payment" id="radioPaypal" checked />
<label class="payment-option-label" for="radioPaypal">PayPal</label>
<div class="payment-option-icons">
<i class="fab fa-paypal"></i>
</div>
<div class="payment-option-body" style="display:block;">
<p style="font-size: 11.5px; color: var(--charcoal); margin: 8px 0;">You will be redirected to PayPal to complete payment securely.</p>
</div>
</div>
<!-- COD -->
<div class="payment-option" id="pmCod" onclick="selectPayment('cod')" style="display: none;">
<input type="radio" name="payment" id="radioCod" />
<label class="payment-option-label" for="radioCod">Cash On Delivery (COD)</label>
<div class="payment-option-icons">
<i class="fas fa-money-bill-wave"></i>
</div>
<div class="payment-option-body">
<p style="font-size: 11.5px; color: var(--charcoal); margin-top: 8px;">Pay with cash upon delivery.</p>
</div>
</div>
</div>
</div>
<!-- Order Notes -->
<div class="checkout-section">
<div class="checkout-section-title">Order Notes (Optional)</div>
<div class="form-group">
<textarea id="ckNotes" rows="3" style="width:100%;border:1px solid var(--mid-gray);padding:11px 14px;font-size:12px;resize:vertical;outline:none;box-sizing:border-box;" placeholder="Special instructions for your order, e.g. custom measurements notes..."></textarea>
</div>
</div>
<!-- PayPal Buttons (always in DOM, shown/hidden via wrapper) -->
<div id="paypal-section" style="margin-top: 16px;">
<div id="paypal-button-container"></div>
</div>
<!-- COD Button -->
<button class="btn-place-order" id="placeOrderBtn" onclick="placeOrder()" style="display:none;margin-top:16px;">
<i class="fas fa-lock"></i> Place Order Securely (COD)
</button>
</div>
<!-- RIGHT: Order Summary -->
<div class="order-summary-panel">
<div class="summary-title">Order Summary</div>
<div id="checkoutSummaryItems">
<!-- Populated by JS -->
</div>
<div class="summary-divider"></div>
<div class="summary-row">
<span>Subtotal</span>
<span class="val" id="ckSubtotal">USD 0.00</span>
</div>
<div class="summary-row">
<span>Shipping</span>
<span class="val" style="color:var(--gold)">Free</span>
</div>
<div class="summary-row">
<span>Tax</span>
<span class="val" id="ckTax">USD 0.00</span>
</div>
<div class="summary-row total">
<span>Total</span>
<span class="val" id="ckTotal">USD 0.00</span>
</div>
<div class="checkout-trust">
<div class="checkout-trust-item"><i class="fas fa-shield-alt"></i> SSL Secure Checkout</div>
<div class="checkout-trust-item"><i class="fas fa-truck"></i> Free worldwide shipping</div>
<div class="checkout-trust-item"><i class="fas fa-undo"></i> 14-day easy returns</div>
<div class="checkout-trust-item"><i class="fas fa-headset"></i> 24/7 customer support</div>
</div>
</div>
</div>
</div>
<?php include 'inc/footer.php'; ?>
<script>
// Global error handler for script loading
function paypalLoadError() {
console.error('PayPal SDK could not be loaded.');
const container = document.getElementById('paypal-button-container');
if (container) {
container.innerHTML = '<div style="color:#c0392b;font-size:12px;padding:15px;border:1px solid #e74c3c;background:#fff5f5;border-radius:4px;margin-bottom:15px;">' +
'<strong>Payment System Unavailable:</strong> The PayPal system could not be initialized. Please check:<br>' +
'1. Your internet connection.<br>' +
'2. Disable any Ad-blockers or Trackers for this site.<br>' +
'3. Verify your Client ID is correct.<br><br>' +
'<button onclick="location.reload()" style="background:#e74c3c;color:white;border:none;padding:5px 10px;cursor:pointer;font-size:11px;border-radius:2px;">Retry Loading</button>' +
'</div>';
}
}
</script>
<script src="https://www.paypal.com/sdk/js?client-id=AVMLv04s-OnWsKGbdB5mJeIb8HeD6Egrz6ymDoPY43UjH0_svlD0zE8HHRg_NG-4yyyygvErOT3o571G¤cy=USD" onerror="paypalLoadError()"></script>
<script>
function getCart() { try { return JSON.parse(localStorage.getItem('eoi_cart') || '[]'); } catch(e) { return []; } }
function escHtml(str) {
const d = document.createElement('div');
d.appendChild(document.createTextNode(str || ''));
return d.innerHTML;
}
function renderCheckoutSummary() {
const cart = getCart();
const container = document.getElementById('checkoutSummaryItems');
let subtotal = 0;
if (!cart.length) {
container.innerHTML = '<p style="font-family:var(--sans);font-size:12px;color:var(--charcoal);text-align:center;padding:20px;">Your cart is empty.</p>';
return;
}
container.innerHTML = '';
cart.forEach(item => {
const lineTotal = (parseFloat(item.price) || 0) * (parseInt(item.qty) || 1);
subtotal += lineTotal;
const el = document.createElement('div');
el.className = 'summary-item';
el.innerHTML = `
<img class="summary-item-img" src="${escHtml(item.image || 'assets/placeholder-product.jpg')}" alt="${escHtml(item.name)}" />
<div class="summary-item-info">
<div class="summary-item-name">${escHtml(item.name)}</div>
<div class="summary-item-meta">Qty: ${item.qty || 1}</div>
${item.stitch ? `<div class="summary-item-meta">${escHtml(item.stitch)}</div>` : ''}
${item.addons && item.addons.length > 0 ? item.addons.map(a => `<div class="summary-item-meta">+ ${escHtml(a.label)} ($${parseFloat(a.price).toFixed(2)})</div>`).join('') : ''}
</div>
<div class="summary-item-price">USD ${lineTotal.toFixed(2)}</div>
`;
container.appendChild(el);
});
['ckSubtotal', 'ckTax', 'ckTotal'].forEach(id => {
const el = document.getElementById(id);
if (el) el.removeAttribute('data-original-usd');
});
document.getElementById('ckSubtotal').textContent = 'USD ' + subtotal.toFixed(2);
document.getElementById('ckTax').textContent = 'USD 0.00';
document.getElementById('ckTotal').textContent = 'USD ' + subtotal.toFixed(2);
if (typeof window.refreshCurrencyConversion === 'function') {
setTimeout(window.refreshCurrencyConversion, 50);
}
}
function selectPayment(type) {
document.querySelectorAll('.payment-option').forEach(el => {
el.classList.remove('selected');
const body = el.querySelector('.payment-option-body');
if (body) body.style.display = 'none';
const radio = el.querySelector('input[type="radio"]');
if (radio) radio.checked = false;
});
const targetId = 'pm' + (type === 'paypal' ? 'Paypal' : 'Cod');
const target = document.getElementById(targetId);
if (target) {
target.classList.add('selected');
const body = target.querySelector('.payment-option-body');
if (body) body.style.display = 'block';
const radio = target.querySelector('input[type="radio"]');
if (radio) radio.checked = true;
}
const paypalSection = document.getElementById('paypal-section');
const placeBtn = document.getElementById('placeOrderBtn');
if (type === 'paypal') {
paypalSection.style.display = 'block';
placeBtn.style.display = 'none';
} else {
paypalSection.style.display = 'none';
placeBtn.style.display = 'flex';
placeBtn.innerHTML = '<i class="fas fa-lock"></i> Place Order Securely (COD)';
}
}
function validateForm() {
const required = ['ckEmail','ckFirstName','ckLastName','ckAddress1','ckCity','ckPostal','ckCountry','ckPhone'];
for (const id of required) {
const el = document.getElementById(id);
if (!el || !el.value.trim()) {
el && el.focus();
el && (el.style.borderColor = '#e74c3c');
setTimeout(() => el && (el.style.borderColor = ''), 2000);
alert('Please fill in all required fields.');
return false;
}
}
return true;
}
const isLoggedIn = <?= json_encode($isLoggedIn) ?>;
// COD place order
async function placeOrder() {
if (!isLoggedIn) {
const loginModal = document.getElementById('loginModal');
if (loginModal) loginModal.classList.add('open');
return;
}
if (!validateForm()) return;
const cart = getCart();
if (!cart.length) { alert('Your cart is empty.'); return; }
await placeOrderBackend('Cash On Delivery (COD)');
}
async function placeOrderBackend(payment_method, txn_id = null) {
const btn = document.getElementById('placeOrderBtn');
const isPaypal = payment_method === 'PayPal';
if (btn && !isPaypal) {
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
btn.disabled = true;
}
const data = {
cart: getCart(),
email: document.getElementById('ckEmail').value,
first_name: document.getElementById('ckFirstName').value,
last_name: document.getElementById('ckLastName').value,
address1: document.getElementById('ckAddress1').value,
address2: document.getElementById('ckAddress2').value,
city: document.getElementById('ckCity').value,
state: document.getElementById('ckState').value,
postal: document.getElementById('ckPostal').value,
country: document.getElementById('ckCountry').value,
phone: document.getElementById('ckPhone').value,
notes: document.getElementById('ckNotes').value,
payment_method: payment_method,
transaction_id: txn_id
};
try {
const response = await fetch('process_checkout.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const result = await response.json();
if (result.success) {
localStorage.removeItem('eoi_cart');
document.getElementById('successOrderNum').textContent = 'Order #' + result.order_number;
document.getElementById('orderSuccessOverlay').classList.add('open');
} else {
alert('Failed to place order: ' + (result.message || 'Unknown error'));
if (btn && !isPaypal) { btn.innerHTML = '<i class="fas fa-lock"></i> Place Order Securely (COD)'; btn.disabled = false; }
}
} catch (e) {
alert('An error occurred during checkout.');
console.error(e);
if (btn && !isPaypal) { btn.innerHTML = '<i class="fas fa-lock"></i> Place Order Securely (COD)'; btn.disabled = false; }
}
}
// Initialize everything after DOM is fully ready
document.addEventListener('DOMContentLoaded', function() {
renderCheckoutSummary();
// Default state: PayPal is selected, show PayPal section, hide COD button
const ppSection = document.getElementById('paypal-section');
const codBtn = document.getElementById('placeOrderBtn');
if (ppSection) ppSection.style.display = 'block';
if (codBtn) codBtn.style.display = 'none';
// Initialize PayPal Buttons
if (typeof paypal !== 'undefined') {
try {
paypal.Buttons({
style: {
layout: 'vertical',
color: 'gold',
shape: 'rect',
label: 'paypal',
height: 48
},
onClick: function(data, actions) {
if (!isLoggedIn) {
const loginModal = document.getElementById('loginModal');
if (loginModal) loginModal.classList.add('open');
return actions.reject();
}
if (!validateForm()) { return actions.reject(); }
if (!getCart().length) { alert('Your cart is empty.'); return actions.reject(); }
return actions.resolve();
},
createOrder: function(data, actions) {
const totalText = document.getElementById('ckTotal').textContent.replace(/[^\d.]/g, '');
const totalAmount = parseFloat(totalText) || 0;
if (totalAmount <= 0) {
alert('Invalid total amount. Please refresh the page.');
return actions.reject();
}
return actions.order.create({
purchase_units: [{
amount: {
value: totalAmount.toFixed(2),
currency_code: 'USD'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
placeOrderBackend('PayPal', details.id);
});
},
onError: function(err) {
console.error('PayPal Error:', err);
const container = document.getElementById('paypal-button-container');
if (container) {
container.innerHTML += '<p style="color:#c0392b;font-size:11px;margin-top:10px;">Error: ' + err.message + '</p>';
}
}
}).render('#paypal-button-container').catch(function(err) {
console.error('PayPal render error:', err);
paypalLoadError();
});
} catch (e) {
console.error('PayPal Init Exception:', e);
paypalLoadError();
}
} else {
// Fallback for when SDK tag didn't trigger onerror but paypal is still undefined
setTimeout(() => {
if (typeof paypal === 'undefined') paypalLoadError();
}, 2000);
}
});
</script>
</body>
</html>