From 6bcdb2b73994b1556b569ad73a85b09be1b3c2c6 Mon Sep 17 00:00:00 2001
From: Developer <developer@plugincompass.com>
Date: Sun, 15 Feb 2026 10:58:15 +0000
Subject: [PATCH] Migrate test checkout page to inline Dodo Payments checkout
 with theme customization

- Replace modal-based checkout with true inline checkout embedded in page layout
- Implement split layout: payment form on left, package selection + order summary on right
- Add real-time order summary sync via checkout.breakdown events
- Apply comprehensive theme customization matching app design (Shopify green, proper colors)
- Add loading states and empty state for better UX
- Use ES modules with proper DodoPayments SDK import
---
 chat/public/test-checkout.html | 1140 ++++++++++++++++----------------
 1 file changed, 573 insertions(+), 567 deletions(-)

diff --git a/chat/public/test-checkout.html b/chat/public/test-checkout.html
index dc91684..39dd2a9 100644
--- a/chat/public/test-checkout.html
+++ b/chat/public/test-checkout.html
@@ -10,9 +10,6 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   
-  <!-- Dodo Payments Inline Checkout SDK -->
-  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
-  
   <!-- PostHog Analytics -->
   <script src="/posthog.js"></script>
   
@@ -36,7 +33,7 @@
                           600: '#16a34a',
                           700: '#15803d',
                           800: '#166534',
-                          900: '#008060', // Shopify Green
+                          900: '#008060',
                           950: '#004c3f',
                       }
                   }
@@ -75,7 +72,7 @@
     }
 
     .shell {
-      max-width: 1180px;
+      max-width: 1400px;
       margin: 0 auto;
       padding: 32px 20px 48px;
     }
@@ -115,63 +112,6 @@
       flex-wrap: wrap;
     }
 
-    .currency-section {
-      margin-bottom: 24px;
-    }
-
-    .currency-label {
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--muted);
-      text-transform: uppercase;
-      letter-spacing: 0.025em;
-      margin-bottom: 8px;
-    }
-
-    .currency-select {
-      width: 200px;
-      padding: 10px 14px;
-      border-radius: 8px;
-      border: 1px solid var(--border);
-      font-size: 14px;
-      background: #fff;
-      color: #0f172a;
-      font-weight: 600;
-      transition: all 0.2s;
-      appearance: none;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23008060'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: right 12px center;
-      background-size: 16px;
-      padding-right: 40px;
-      cursor: pointer;
-    }
-
-    .currency-select:focus {
-      outline: none;
-      border-color: var(--shopify-green);
-      box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.1);
-    }
-
-    .currency-select:hover {
-      border-color: rgba(0, 128, 96, 0.3);
-    }
-
-    /* Currency dropdown styles */
-    .currency-dropdown.open #currency-btn {
-      border-color: var(--shopify-green);
-      box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.1);
-    }
-
-    .currency-option {
-      transition: all 0.15s ease;
-    }
-
-    .currency-option:hover {
-      background-color: #d1fae5;
-      color: #065f46;
-    }
-
     .btn {
       display: inline-flex;
       align-items: center;
@@ -217,65 +157,6 @@
       border-color: rgba(0, 0, 0, 0.05);
     }
 
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 16px;
-    }
-
-    .card {
-      background: #fff;
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 24px;
-      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      position: relative;
-      transition: all 0.2s ease;
-    }
-
-    .card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
-      border-color: rgba(0, 128, 96, 0.2);
-    }
-
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.02em;
-      background: var(--shopify-green-light);
-      color: var(--shopify-green);
-      border: 1px solid rgba(0, 128, 96, 0.15);
-    }
-
-    .muted {
-      color: var(--muted);
-      font-size: 14px;
-      line-height: 1.5;
-    }
-
-    .price {
-      font-size: 36px;
-      font-weight: 700;
-      letter-spacing: -0.01em;
-      color: #0f172a;
-    }
-
-    .old-price {
-      color: var(--muted);
-      text-decoration: line-through;
-      font-weight: 500;
-      font-size: 20px;
-    }
-
     .status {
       padding: 14px 18px;
       border-radius: 12px;
@@ -309,19 +190,6 @@
       color: #92400e;
     }
 
-    .discount {
-      color: #166534;
-      font-weight: 700;
-      font-size: 13px;
-    }
-
-    .products-label {
-      font-size: 18px;
-      font-weight: 700;
-      margin-bottom: 20px;
-      color: #0f172a;
-    }
-
     .nav-bar {
       background: white;
       border-bottom: 1px solid #e9ecef;
@@ -411,6 +279,261 @@
       position: relative;
       display: inline-block;
     }
+
+    /* Checkout Layout */
+    .checkout-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 32px;
+      min-height: 600px;
+    }
+
+    @media (max-width: 968px) {
+      .checkout-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .checkout-left {
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid var(--border);
+      padding: 32px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .checkout-right {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .package-selector {
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid var(--border);
+      padding: 24px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .package-selector h2 {
+      font-size: 20px;
+      font-weight: 700;
+      margin: 0 0 16px 0;
+      color: #0f172a;
+    }
+
+    .currency-section {
+      margin-bottom: 20px;
+    }
+
+    .currency-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+      margin-bottom: 8px;
+      display: block;
+    }
+
+    .currency-select {
+      width: 200px;
+      padding: 10px 14px;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      font-size: 14px;
+      background: #fff;
+      color: #0f172a;
+      font-weight: 600;
+      transition: all 0.2s;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23008060'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 12px center;
+      background-size: 16px;
+      padding-right: 40px;
+      cursor: pointer;
+    }
+
+    .currency-select:focus {
+      outline: none;
+      border-color: var(--shopify-green);
+      box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.1);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 12px;
+    }
+
+    .card {
+      background: #fff;
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      position: relative;
+    }
+
+    .card:hover {
+      border-color: rgba(0, 128, 96, 0.3);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .card.selected {
+      border-color: var(--shopify-green);
+      background: var(--shopify-green-light);
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.02em;
+      background: var(--shopify-green-light);
+      color: var(--shopify-green);
+      border: 1px solid rgba(0, 128, 96, 0.15);
+      margin-bottom: 8px;
+    }
+
+    .price {
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+      color: #0f172a;
+      margin-bottom: 4px;
+    }
+
+    .old-price {
+      color: var(--muted);
+      text-decoration: line-through;
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    .muted {
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .discount {
+      color: #166534;
+      font-weight: 600;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    /* Order Summary */
+    .order-summary {
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid var(--border);
+      padding: 24px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .order-summary h2 {
+      font-size: 18px;
+      font-weight: 700;
+      margin: 0 0 16px 0;
+      color: #0f172a;
+    }
+
+    .summary-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      font-size: 14px;
+      color: var(--muted);
+    }
+
+    .summary-row.total {
+      border-top: 1px solid var(--border);
+      margin-top: 8px;
+      padding-top: 16px;
+      font-weight: 700;
+      font-size: 18px;
+      color: #0f172a;
+    }
+
+    /* Dodo Inline Checkout Container */
+    #dodo-inline-checkout {
+      width: 100%;
+      min-height: 500px;
+    }
+
+    .checkout-header {
+      margin-bottom: 24px;
+    }
+
+    .checkout-header h2 {
+      font-size: 20px;
+      font-weight: 700;
+      margin: 0 0 8px 0;
+      color: #0f172a;
+    }
+
+    .checkout-header p {
+      color: var(--muted);
+      font-size: 14px;
+      margin: 0;
+    }
+
+    /* Loading state */
+    .checkout-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
+      color: var(--muted);
+    }
+
+    .checkout-loading .spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid var(--border);
+      border-top-color: var(--shopify-green);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 16px;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Empty state */
+    .checkout-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
+      text-align: center;
+      color: var(--muted);
+    }
+
+    .checkout-empty-icon {
+      width: 64px;
+      height: 64px;
+      background: var(--shopify-green-light);
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16px;
+      font-size: 32px;
+    }
   </style>
 </head>
 
@@ -439,8 +562,8 @@
     <div class="topbar">
       <div>
         <div class="crumb">Admin Tools</div>
-        <h1 class="title">Test Payments Checkout</h1>
-        <p class="subtitle">This is an admin-only test page for exercising the full Dodo Payments checkout flow.</p>
+        <h1 class="title">Test Inline Checkout</h1>
+        <p class="subtitle">Embedded Dodo Payments checkout with theme customization.</p>
       </div>
       <div class="actions">
         <a class="btn ghost" href="/admin">Admin Dashboard</a>
@@ -449,49 +572,102 @@
 
     <div id="status" class="status"></div>
 
-    <div class="currency-section">
-      <label class="currency-label">Select Currency</label>
-      <div class="relative currency-dropdown" id="currency-dropdown">
-        <button id="currency-btn" class="currency-select flex items-center gap-2">
-          <span id="currency-flag">🇺🇸</span>
-          <span id="currency-code">USD</span>
-        </button>
-        <div id="currency-options" class="hidden absolute top-full left-0 mt-1 w-full bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden">
-          <button class="currency-option w-full px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-gray-900 font-medium text-left flex items-center gap-2" data-value="USD">
-            🇺🇸 $<span class="ml-1">USD</span>
-          </button>
-          <button class="currency-option w-full px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-gray-900 font-medium text-left flex items-center gap-2" data-value="GBP">
-            🇬🇧 £<span class="ml-1">GBP</span>
-          </button>
-          <button class="currency-option w-full px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-gray-900 font-medium text-left flex items-center gap-2" data-value="EUR">
-            🇪🇺 €<span class="ml-1">EUR</span>
-          </button>
+    <div class="checkout-layout">
+      <!-- Left Side - Inline Checkout -->
+      <div class="checkout-left">
+        <div class="checkout-header">
+          <h2>Payment Details</h2>
+          <p>Complete your purchase securely</p>
+        </div>
+        
+        <div id="checkout-empty-state" class="checkout-empty">
+          <div class="checkout-empty-icon">💳</div>
+          <h3 style="margin: 0 0 8px 0; color: #0f172a;">Select a Package</h3>
+          <p style="margin: 0;">Choose a token package from the right to proceed with checkout</p>
+        </div>
+
+        <div id="checkout-loading-state" class="checkout-loading" style="display: none;">
+          <div class="spinner"></div>
+          <p>Loading secure checkout...</p>
+        </div>
+
+        <div id="dodo-inline-checkout" style="display: none;"></div>
+      </div>
+
+      <!-- Right Side - Package Selection & Order Summary -->
+      <div class="checkout-right">
+        <div class="package-selector">
+          <h2>Select Token Package</h2>
+          
+          <div class="currency-section">
+            <label class="currency-label">Currency</label>
+            <select id="currency-select" class="currency-select">
+              <option value="USD">🇺🇸 USD - US Dollar</option>
+              <option value="EUR">🇪🇺 EUR - Euro</option>
+              <option value="GBP">🇬🇧 GBP - British Pound</option>
+            </select>
+          </div>
+
+          <div id="cards" class="grid">
+            <!-- Cards will be populated by JavaScript -->
+          </div>
+        </div>
+
+        <div class="order-summary" id="order-summary" style="display: none;">
+          <h2>Order Summary</h2>
+          <div id="summary-content">
+            <div class="summary-row">
+              <span>Subtotal</span>
+              <span id="summary-subtotal">-</span>
+            </div>
+            <div class="summary-row" id="summary-discount-row" style="display: none;">
+              <span>Discount</span>
+              <span id="summary-discount" style="color: #166534;">-</span>
+            </div>
+            <div class="summary-row">
+              <span>Tax</span>
+              <span id="summary-tax">Calculated at checkout</span>
+            </div>
+            <div class="summary-row total">
+              <span>Total</span>
+              <span id="summary-total">-</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-
-    <div class="products-label">Available Top-up Packages</div>
-    <div id="cards" class="grid"></div>
   </div>
 
-  <script>
-    // Minimal JS patched from topup.js for admin flows: uses /api/admin/topups/* endpoints and does not require a user session.
+  <!-- Load Dodo Payments SDK -->
+  <script type="module">
+    import { DodoPayments } from 'https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js';
+    
     const statusEl = document.getElementById('status');
     const cardsEl = document.getElementById('cards');
+    const checkoutContainer = document.getElementById('dodo-inline-checkout');
+    const emptyState = document.getElementById('checkout-empty-state');
+    const loadingState = document.getElementById('checkout-loading-state');
+    const orderSummary = document.getElementById('order-summary');
+    
     let loading = false;
     let currentOptions = [];
     let currentDiscount = 0;
     let selectedCurrency = 'USD';
+    let selectedTier = null;
+    let checkoutBreakdown = {};
 
     const currencyConfig = {
-        USD: { symbol: '$', flag: '🇺🇸', rate: 1 },
-        EUR: { symbol: '€', flag: '🇪🇺', rate: 0.85 },
-        GBP: { symbol: '£', flag: '🇬🇧', rate: 0.73 }
+      USD: { symbol: '$', flag: '🇺🇸', rate: 1 },
+      EUR: { symbol: '€', flag: '🇪🇺', rate: 0.85 },
+      GBP: { symbol: '£', flag: '🇬🇧', rate: 0.73 }
     };
 
     function showStatus(message, type = 'success') {
       statusEl.textContent = message;
       statusEl.className = 'status show ' + type;
+      if (type === 'success') {
+        setTimeout(() => clearStatus(), 5000);
+      }
     }
 
     function clearStatus() {
@@ -523,7 +699,6 @@
         }
       } catch (err) {
         console.error('Failed to load admin info:', err);
-        // If we get a 401 or any authentication error, redirect to admin login
         if (err.message.includes('Admin login required') || err.message.includes('login required')) {
           window.location.href = '/admin/login?next=' + encodeURIComponent(window.location.pathname);
           return;
@@ -531,51 +706,261 @@
       }
     }
 
+    function updateOrderSummary(breakdown) {
+      const currency = breakdown.currency || breakdown.finalTotalCurrency || selectedCurrency;
+      
+      if (breakdown.subTotal != null) {
+        document.getElementById('summary-subtotal').textContent = formatMoney(breakdown.subTotal, currency);
+      }
+      
+      if (breakdown.discount && breakdown.discount > 0) {
+        document.getElementById('summary-discount-row').style.display = 'flex';
+        document.getElementById('summary-discount').textContent = '-' + formatMoney(breakdown.discount, currency);
+      } else {
+        document.getElementById('summary-discount-row').style.display = 'none';
+      }
+      
+      if (breakdown.tax != null) {
+        document.getElementById('summary-tax').textContent = formatMoney(breakdown.tax, currency);
+      }
+      
+      const total = breakdown.finalTotal ?? breakdown.total;
+      if (total != null) {
+        document.getElementById('summary-total').textContent = formatMoney(total, breakdown.finalTotalCurrency || currency);
+      }
+      
+      orderSummary.style.display = 'block';
+    }
+
     function renderOptions(options, discountRate) {
       currentOptions = options;
       currentDiscount = discountRate;
 
-      // Filter options by selected currency
       const filteredOptions = options.filter(opt => opt.currency === selectedCurrency.toLowerCase());
       cardsEl.innerHTML = '';
 
       filteredOptions.forEach((opt) => {
         const card = document.createElement('div');
-        card.className = 'card';
+        card.className = 'card' + (selectedTier === opt.tier ? ' selected' : '');
+        card.dataset.tier = opt.tier;
+        
         const priceLine = document.createElement('div');
         priceLine.className = 'price';
         const finalPrice = formatMoney(opt.finalAmount, opt.currency);
-        const basePrice = formatMoney(opt.baseAmount, opt.currency);
         if (opt.finalAmount !== opt.baseAmount) {
-          priceLine.innerHTML = `${finalPrice} <span class="old-price">${basePrice}</span>`;
+          priceLine.innerHTML = `${finalPrice} <span class="old-price">${formatMoney(opt.baseAmount, opt.currency)}</span>`;
         } else {
           priceLine.textContent = finalPrice;
         }
+        
         const tokenLine = document.createElement('div');
         tokenLine.className = 'muted';
-        tokenLine.textContent = `${Number(opt.tokens || 0).toLocaleString()} token credits`;
-        const discount = document.createElement('div');
-        discount.className = 'discount';
-        discount.textContent = discountRate > 0 ? `Plan discount applied: ${(discountRate * 100).toFixed(1)}%` : 'Admin test price';
+        tokenLine.textContent = `${Number(opt.tokens || 0).toLocaleString()} tokens`;
+        
         const badge = document.createElement('span');
         badge.className = 'pill';
         const tierNum = opt.tier.startsWith('topup_') ? opt.tier.split('_')[1] : '';
-        badge.textContent = tierNum ? `Option ${tierNum} pack` : opt.tier.toUpperCase() + ' pack';
-        const button = document.createElement('button');
-        button.className = 'btn primary';
-        button.textContent = loading ? 'Preparing…' : 'Start test checkout';
-        button.disabled = loading;
-        button.onclick = () => startCheckout(opt.tier, opt.currency);
+        badge.textContent = tierNum ? `Pack ${tierNum}` : opt.tier.toUpperCase();
+        
+        if (discountRate > 0) {
+          const discount = document.createElement('div');
+          discount.className = 'discount';
+          discount.textContent = `Save ${(discountRate * 100).toFixed(0)}%`;
+          card.appendChild(discount);
+        }
 
         card.appendChild(badge);
         card.appendChild(priceLine);
         card.appendChild(tokenLine);
-        card.appendChild(discount);
-        card.appendChild(button);
+        
+        card.onclick = () => selectPackage(opt);
+        
         cardsEl.appendChild(card);
       });
     }
 
+    async function selectPackage(opt) {
+      if (loading) return;
+      
+      selectedTier = opt.tier;
+      renderOptions(currentOptions, currentDiscount);
+      
+      // Show loading state
+      emptyState.style.display = 'none';
+      checkoutContainer.style.display = 'none';
+      loadingState.style.display = 'flex';
+      
+      try {
+        const res = await fetch('/api/admin/topups/checkout', {
+          method: 'POST',
+          credentials: 'same-origin',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ 
+            tier: opt.tier, 
+            currency: opt.currency, 
+            inline: true 
+          })
+        });
+        
+        const data = await res.json().catch(() => ({}));
+        
+        if (!res.ok) throw new Error(data.error || 'Checkout failed');
+
+        if (data.sessionId && data.checkoutUrl) {
+          localStorage.setItem('dodo_admin_topup_session_id', data.sessionId);
+          localStorage.setItem('dodo_admin_topup_session_started', Date.now().toString());
+          
+          // Initialize inline checkout
+          await initializeInlineCheckout(data.checkoutUrl, data.sessionId);
+        } else {
+          throw new Error('Invalid checkout response from server');
+        }
+      } catch (err) {
+        console.error('Checkout error:', err);
+        showStatus(err.message || 'Failed to start checkout', 'error');
+        loadingState.style.display = 'none';
+        emptyState.style.display = 'flex';
+      }
+    }
+
+    async function initializeInlineCheckout(checkoutUrl, sessionId) {
+      try {
+        // Initialize Dodo Payments with inline display type
+        DodoPayments.Initialize({
+          mode: 'test',
+          displayType: 'inline',
+          onEvent: (event) => {
+            console.log('Checkout event:', event);
+            
+            if (event.event_type === 'checkout.breakdown') {
+              const breakdown = event.data?.message;
+              if (breakdown) {
+                checkoutBreakdown = breakdown;
+                updateOrderSummary(breakdown);
+              }
+            }
+            
+            if (event.event_type === 'checkout.completed') {
+              showStatus('Payment successful! Tokens added.', 'success');
+              pollPaymentStatus(sessionId);
+            }
+            
+            if (event.event_type === 'checkout.failed') {
+              showStatus('Payment failed. Please try again.', 'error');
+            }
+            
+            if (event.event_type === 'checkout.closed') {
+              // Handle checkout closed
+            }
+          }
+        });
+
+        // Hide loading, show checkout
+        loadingState.style.display = 'none';
+        checkoutContainer.style.display = 'block';
+
+        // Open checkout in the inline container
+        DodoPayments.Checkout.open({
+          checkoutUrl: checkoutUrl,
+          elementId: 'dodo-inline-checkout',
+          options: {
+            themeConfig: {
+              light: {
+                bgPrimary: '#FFFFFF',
+                bgSecondary: '#F8FAFC',
+                textPrimary: '#0F172A',
+                textSecondary: '#6B7280',
+                textPlaceholder: '#9CA3AF',
+                textError: '#EF4444',
+                textSuccess: '#10B981',
+                borderPrimary: '#E5E7EB',
+                borderSecondary: '#D1D5DB',
+                inputFocusBorder: '#008060',
+                buttonPrimary: '#008060',
+                buttonPrimaryHover: '#004C3F',
+                buttonTextPrimary: '#FFFFFF',
+                buttonSecondary: '#F8FAFC',
+                buttonSecondaryHover: '#F1F5F9',
+                buttonTextSecondary: '#0F172A'
+              },
+              dark: {
+                bgPrimary: '#0F172A',
+                bgSecondary: '#1E293B',
+                textPrimary: '#F1F5F9',
+                textSecondary: '#94A3B8',
+                textPlaceholder: '#64748B',
+                textError: '#F87171',
+                textSuccess: '#34D399',
+                borderPrimary: '#334155',
+                borderSecondary: '#475569',
+                inputFocusBorder: '#008060',
+                buttonPrimary: '#008060',
+                buttonPrimaryHover: '#004C3F',
+                buttonTextPrimary: '#FFFFFF',
+                buttonSecondary: '#1E293B',
+                buttonSecondaryHover: '#334155',
+                buttonTextSecondary: '#F1F5F9'
+              },
+              radius: '10px'
+            },
+            payButtonText: 'Complete Payment',
+            fontSize: '14px',
+            fontWeight: '500',
+            showTimer: true,
+            showSecurityBadge: true
+          }
+        });
+
+        // Start polling for payment status
+        pollPaymentStatus(sessionId);
+        
+      } catch (error) {
+        console.error('Failed to initialize inline checkout:', error);
+        showStatus('Failed to load checkout. Please refresh and try again.', 'error');
+        loadingState.style.display = 'none';
+        emptyState.style.display = 'flex';
+      }
+    }
+
+    async function pollPaymentStatus(sessionId) {
+      let pollCount = 0;
+      const maxPolls = 180;
+      const pollInterval = 2000;
+
+      const checkStatus = async () => {
+        try {
+          pollCount++;
+          
+          const resp = await fetch(`/api/admin/topups/confirm?session_id=${encodeURIComponent(sessionId)}`, {
+            credentials: 'include'
+          });
+
+          if (resp.ok) {
+            const data = await resp.json();
+            if (data.ok && data.paid) {
+              showStatus('Payment confirmed! Admin test checkout completed.', 'success');
+              localStorage.removeItem('dodo_admin_topup_session_id');
+              localStorage.removeItem('dodo_admin_topup_session_started');
+              return;
+            }
+          }
+
+          if (pollCount < maxPolls) {
+            setTimeout(checkStatus, pollInterval);
+          } else {
+            showStatus('Payment confirmation timeout. Please check the Dodo dashboard.', 'error');
+          }
+        } catch (error) {
+          console.error('Error checking payment status:', error);
+          if (pollCount < maxPolls) {
+            setTimeout(checkStatus, pollInterval);
+          }
+        }
+      };
+
+      setTimeout(checkStatus, pollInterval);
+    }
+
     async function loadOptions() {
       try {
         const data = await fetchJson('/api/admin/topups/options');
@@ -586,350 +971,13 @@
         }
       } catch (err) {
         console.error('Failed to load top-up options:', err);
-        const message = err && err.message ? `Failed to load top-up options: ${err.message}` : 'Failed to load top-up options. Please refresh the page.';
-        showStatus(message, 'error');
+        showStatus('Failed to load packages. Please refresh the page.', 'error');
       }
     }
 
-    async function startCheckout(tier, currency) {
-      if (loading) return;
-      loading = true;
-      renderOptions(currentOptions, currentDiscount);
-      clearStatus();
-
-      try {
-       const res = await fetch('/api/admin/topups/checkout', {
-         method: 'POST',
-         credentials: 'same-origin',
-         headers: { 'Content-Type': 'application/json' },
-         body: JSON.stringify({ tier, currency, inline: true })
-       });
-        const data = await res.json().catch(() => ({}));
-
-        if (!res.ok) throw new Error(data.error || 'Checkout failed');
-
-        if (data.sessionId && data.checkoutUrl) {
-          localStorage.setItem('dodo_admin_topup_session_id', data.sessionId);
-          localStorage.setItem('dodo_admin_topup_session_started', Date.now().toString());
-
-          // Use Dodo Payments Inline Checkout
-          await openInlineCheckout(data.inlineCheckoutUrl || data.checkoutUrl, data.sessionId);
-        } else {
-          throw new Error('Invalid checkout response from server');
-        }
-      } catch (err) {
-        console.error('Checkout error:', err);
-        showStatus(err.message || 'Failed to start checkout', 'error');
-      } finally {
-        loading = false;
-        renderOptions(currentOptions, currentDiscount);
-      }
-    }
-
-    async function ensureDodoPaymentsLoaded() {
-      if (typeof DodoPaymentsCheckout !== 'undefined' && DodoPaymentsCheckout.DodoPayments) {
-        return true;
-      }
-
-      return new Promise((resolve) => {
-        const timeout = setTimeout(() => {
-          console.warn('DodoPayments script load timeout');
-          resolve(false);
-        }, 5000);
-
-        const checkInterval = setInterval(() => {
-          if (typeof DodoPaymentsCheckout !== 'undefined' && DodoPaymentsCheckout.DodoPayments) {
-            clearTimeout(timeout);
-            clearInterval(checkInterval);
-            resolve(true);
-          }
-        }, 100);
-      });
-    }
-
-    function closeCheckoutModal() {
-      const modalOverlay = document.getElementById('checkout-modal-overlay');
-      if (modalOverlay) {
-        modalOverlay.remove();
-      }
-    }
-
-    async function openInlineCheckout(checkoutUrl, sessionId) {
-      // Create a modal overlay for the inline checkout
-      const modalOverlay = document.createElement('div');
-      modalOverlay.id = 'checkout-modal-overlay';
-      modalOverlay.style.cssText = `
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.7);
-        z-index: 9998;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      `;
-
-      // Create the checkout container
-      const checkoutContainer = document.createElement('div');
-      checkoutContainer.id = 'checkout-container';
-      checkoutContainer.style.cssText = `
-        width: 100%;
-        max-width: 500px;
-        height: 600px;
-        background: white;
-        border-radius: 16px;
-        position: relative;
-        overflow: hidden;
-      `;
-
-      // Create close button
-      const closeButton = document.createElement('button');
-      closeButton.innerHTML = '&times;';
-      closeButton.style.cssText = `
-        position: absolute;
-        top: 15px;
-        right: 15px;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.9);
-        border: 1px solid var(--border);
-        font-size: 20px;
-        cursor: pointer;
-        z-index: 10000;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--muted);
-        transition: all 0.2s ease;
-      `;
-      closeButton.onmouseover = () => {
-        closeButton.style.background = '#f8fafc';
-        closeButton.style.color = '#1f2937';
-      };
-      closeButton.onmouseout = () => {
-        closeButton.style.background = 'rgba(255, 255, 255, 0.9)';
-        closeButton.style.color = 'var(--muted)';
-      };
-      closeButton.onclick = () => {
-        closeCheckoutModal();
-        showStatus('Payment cancelled', 'error');
-      };
-
-      modalOverlay.appendChild(checkoutContainer);
-      modalOverlay.appendChild(closeButton);
-      document.body.appendChild(modalOverlay);
-
-      const loadingIndicator = document.createElement('div');
-      loadingIndicator.style.cssText = `
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: #6b7280;
-        font-size: 16px;
-        z-index: 1000;
-      `;
-      loadingIndicator.textContent = 'Loading secure payment...';
-      checkoutContainer.appendChild(loadingIndicator);
-
-      await ensureDodoPaymentsLoaded();
-
-      if (loadingIndicator.parentNode) {
-        checkoutContainer.removeChild(loadingIndicator);
-      }
-
-      if (typeof DodoPaymentsCheckout !== 'undefined' && DodoPaymentsCheckout.DodoPayments && DodoPaymentsCheckout.DodoPayments.Checkout) {
-        try {
-          if (!DodoPaymentsCheckout.DodoPayments.Initialize) {
-            console.warn('DodoPayments.Initialize not available, checking for Checkout.open directly');
-          } else {
-            DodoPaymentsCheckout.DodoPayments.Initialize({
-              mode: 'test'
-            });
-          }
-
-          DodoPaymentsCheckout.DodoPayments.Checkout.open({
-            checkoutUrl: checkoutUrl,
-            elementId: 'checkout-container',
-            options: {
-              themeConfig: {
-                light: {
-                  bgPrimary: '#FFFFFF',
-                  bgSecondary: '#F8FAFC',
-                  textPrimary: '#0F172A',
-                  textSecondary: '#6B7280',
-                  textPlaceholder: '#9CA3AF',
-                  textError: '#EF4444',
-                  textSuccess: '#10B981',
-                  borderPrimary: '#E5E7EB',
-                  borderSecondary: '#D1D5DB',
-                  inputFocusBorder: '#008060',
-                  buttonPrimary: '#008060',
-                  buttonPrimaryHover: '#004C3F',
-                  buttonTextPrimary: '#FFFFFF',
-                  buttonSecondary: '#FFFFFF',
-                  buttonSecondaryHover: '#F8FAFC',
-                  buttonTextSecondary: '#0F172A'
-                },
-                dark: {
-                  bgPrimary: '#0D0D0D',
-                  bgSecondary: '#1F2937',
-                  textPrimary: '#F9FAFB',
-                  textSecondary: '#9CA3AF',
-                  textPlaceholder: '#6B7280',
-                  textError: '#F87171',
-                  textSuccess: '#34D399',
-                  borderPrimary: '#374151',
-                  borderSecondary: '#4B5563',
-                  inputFocusBorder: '#10B981',
-                  buttonPrimary: '#008060',
-                  buttonPrimaryHover: '#10B981',
-                  buttonTextPrimary: '#FFFFFF',
-                  buttonSecondary: '#1F2937',
-                  buttonSecondaryHover: '#374151',
-                  buttonTextSecondary: '#F9FAFB'
-                },
-                radius: '8px'
-              },
-              payButtonText: 'Complete Payment',
-              fontSize: '14px',
-              fontWeight: '500',
-              showTimer: true,
-              showSecurityBadge: true
-            }
-          });
-        } catch (error) {
-          console.error('DodoPayments.Checkout.open failed:', error);
-
-          const errorMessage = document.createElement('div');
-          errorMessage.style.cssText = `
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            text-align: center;
-            max-width: 80%;
-            z-index: 1001;
-          `;
-          errorMessage.innerHTML = `
-            <h3 style="color: #ef4444; margin-bottom: 10px;">Payment Processing</h3>
-            <p style="color: #6b7280; margin-bottom: 15px;">
-              The secure payment method failed to load. Falling back to standard payment page.
-            </p>
-            <p style="color: #6b7280; font-size: 14px;">
-              This may take a moment to redirect...
-            </p>
-          `;
-          checkoutContainer.appendChild(errorMessage);
-
-          setTimeout(() => {
-            checkoutContainer.innerHTML = '';
-            const iframe = document.createElement('iframe');
-            iframe.src = checkoutUrl;
-            iframe.allowpaymentrequest = "true";
-            iframe.style.cssText = 'width: 100%; height: 100%; border: none;';
-            iframe.onload = () => {
-              if (loadingIndicator.parentNode) {
-                loadingIndicator.remove();
-              }
-            };
-            checkoutContainer.appendChild(iframe);
-          }, 2000);
-        }
-      } else {
-        console.warn('DodoPayments not available, using iframe fallback');
-        console.log('DodoPaymentsCheckout object:', typeof DodoPaymentsCheckout, DodoPaymentsCheckout);
-        console.log('DodoPayments object:', typeof DodoPaymentsCheckout?.DodoPayments, DodoPaymentsCheckout?.DodoPayments);
-
-        const fallbackMessage = document.createElement('div');
-        fallbackMessage.style.cssText = `
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: white;
-          padding: 20px;
-          border-radius: 8px;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-          text-align: center;
-          max-width: 80%;
-          z-index: 1001;
-        `;
-        fallbackMessage.innerHTML = `
-          <h3 style="color: #008060; margin-bottom: 10px;">Processing Payment</h3>
-          <p style="color: #6b7280; margin-bottom: 15px;">
-            Loading secure payment page...
-          </p>
-          <p style="color: #6b7280; font-size: 14px;">
-            Please wait while we prepare your payment.
-          </p>
-        `;
-        checkoutContainer.appendChild(fallbackMessage);
-
-        setTimeout(() => {
-          checkoutContainer.innerHTML = '';
-          const iframe = document.createElement('iframe');
-          iframe.src = checkoutUrl;
-          iframe.allowpaymentrequest = "true";
-          iframe.style.cssText = 'width: 100%; height: 100%; border: none;';
-          iframe.onload = () => {
-            if (loadingIndicator.parentNode) {
-              loadingIndicator.remove();
-            }
-          };
-          checkoutContainer.appendChild(iframe);
-        }, 1500);
-      }
-
-      // Poll for admin confirmation
-      let pollCount = 0;
-      const maxPolls = 180;
-      const pollInterval = 1000;
-
-      const checkPaymentStatus = async () => {
-        try {
-          pollCount++;
-
-          const resp = await fetch(`/api/admin/topups/confirm?session_id=${encodeURIComponent(sessionId)}`, {
-            credentials: 'include'
-          });
-
-          if (resp.ok) {
-            const data = await resp.json();
-            if (data.ok && data.paid) {
-              clearInterval(pollTimer);
-              closeCheckoutModal();
-              showStatus('Success! Admin test checkout paid.', 'success');
-              localStorage.removeItem('dodo_admin_topup_session_id');
-              localStorage.removeItem('dodo_admin_topup_session_started');
-              return;
-            }
-          }
-
-          if (pollCount >= maxPolls) {
-            clearInterval(pollTimer);
-            closeCheckoutModal();
-            showStatus('Payment confirmation timeout. Please check the Dodo dashboard.', 'error');
-          }
-        } catch (error) {
-          console.error('Error checking payment status:', error);
-        }
-      };
-
-      const pollTimer = setInterval(checkPaymentStatus, pollInterval);
-    }
-
-
     async function confirmIfNeeded() {
       const params = new URLSearchParams(window.location.search);
-      const sessionId = params.get('session_id') || params.get('checkout_id') || params.get('session') || localStorage.getItem('dodo_topup_session_id');
+      const sessionId = params.get('session_id') || params.get('checkout_id') || params.get('session') || localStorage.getItem('dodo_admin_topup_session_id');
       if (!sessionId) {
         if (params.get('cancel')) showStatus('Checkout canceled.', 'pending');
         return;
@@ -955,57 +1003,15 @@
       }
     }
 
-    // Currency dropdown setup copied from topup.html (kept minimal)
-    function updateCurrencyDisplay() {
-      const config = currencyConfig[selectedCurrency] || currencyConfig.USD;
-      const flagEl = document.getElementById('currency-flag');
-      const codeEl = document.getElementById('currency-code');
-      if (flagEl) flagEl.textContent = config.flag;
-      if (codeEl) codeEl.textContent = selectedCurrency;
-    }
-
-    function setupCurrencyDropdown() {
-      const dropdown = document.getElementById('currency-dropdown');
-      const btn = document.getElementById('currency-btn');
-      const options = document.getElementById('currency-options');
-
-      if (!dropdown || !btn || !options) return;
-
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const isOpen = !options.classList.contains('hidden');
-        
-        if (isOpen) {
-          options.classList.add('hidden');
-          dropdown.classList.remove('open');
-        } else {
-          options.classList.remove('hidden');
-          dropdown.classList.add('open');
-        }
-      });
-
-      document.querySelectorAll('.currency-option').forEach(option => {
-        option.addEventListener('click', (e) => {
-          e.preventDefault();
-          const currency = option.getAttribute('data-value');
-          selectedCurrency = currency;
-          updateCurrencyDisplay();
-          renderOptions(currentOptions, currentDiscount);
-          options.classList.add('hidden');
-          dropdown.classList.remove('open');
-        });
-      });
-
-      document.addEventListener('click', () => {
-        options.classList.add('hidden');
-        dropdown.classList.remove('open');
-      });
-    }
+    // Currency selector
+    document.getElementById('currency-select').addEventListener('change', (e) => {
+      selectedCurrency = e.target.value;
+      renderOptions(currentOptions, currentDiscount);
+    });
 
+    // Initialize
     (async () => {
       try {
-        setupCurrencyDropdown();
-        updateCurrencyDisplay();
         await loadAdminInfo();
         await loadOptions();
         await confirmIfNeeded();
@@ -1016,8 +1022,8 @@
   </script>
 
   <footer style="margin-top: 80px; padding: 40px 24px; border-top: 1px solid #e1e3e5; text-align: center; color: #6d7175; font-size: 0.875rem;">
-    <p>&copy; 2026 Plugin Compass. Admin test page.</p>
+    <p>&copy; 2026 Plugin Compass. Admin test page with inline checkout.</p>
   </footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>