6bcdb2b739
- 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
1030 lines
29 KiB
HTML
1030 lines
29 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Checkout (Admin) - Token Top-ups - Plugin Compass</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- PostHog Analytics -->
|
|
<script src="/posthog.js"></script>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
display: ['Space Grotesk', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#008060',
|
|
950: '#004c3f',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--shopify-green: #008060;
|
|
--shopify-green-dark: #004c3f;
|
|
--shopify-green-light: #e3f5ef;
|
|
--border: #e5e7eb;
|
|
--muted: #6b7280;
|
|
--bg: #f8fafc;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
|
|
background: radial-gradient(circle at 10% 20%, rgba(0, 128, 96, 0.06), transparent 25%),
|
|
radial-gradient(circle at 90% 10%, rgba(0, 76, 63, 0.05), transparent 28%),
|
|
linear-gradient(135deg, #f7f9fb 0%, #edf1f5 100%);
|
|
color: #0f172a;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.shell {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 32px 20px 48px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.crumb {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
margin-top: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
background: #fff;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: #1e293b;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn.primary {
|
|
background: var(--shopify-green);
|
|
color: #fff;
|
|
border: none;
|
|
box-shadow: 0 4px 12px rgba(0, 128, 96, 0.15);
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: var(--shopify-green-dark);
|
|
box-shadow: 0 6px 16px rgba(0, 128, 96, 0.25);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn.ghost {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.btn.ghost:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.status {
|
|
padding: 14px 18px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: #fff;
|
|
margin-bottom: 20px;
|
|
display: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status.show {
|
|
display: block;
|
|
}
|
|
|
|
.status.success {
|
|
border-color: #22c55e33;
|
|
background: #f0fdf4;
|
|
color: #166534;
|
|
}
|
|
|
|
.status.error {
|
|
border-color: #fca5a5;
|
|
background: #fef2f2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.status.pending {
|
|
border-color: #f59e0b55;
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
}
|
|
|
|
.nav-bar {
|
|
background: white;
|
|
border-bottom: 1px solid #e9ecef;
|
|
padding: 16px 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.nav-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-text {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.user-chip:hover {
|
|
border-color: var(--shopify-green);
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.user-chip-avatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 999px;
|
|
background: var(--shopify-green-light);
|
|
color: var(--shopify-green);
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-chip-status {
|
|
font-size: 11px;
|
|
color: #6c757d;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.user-chip-email {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
max-width: 160px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.user-menu-container {
|
|
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>
|
|
|
|
<body>
|
|
<nav class="nav-bar">
|
|
<div class="nav-content">
|
|
<a href="/" class="brand">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" style="width: 32px; height: 32px; border-radius: 8px;">
|
|
<span class="brand-text">Plugin Compass</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<div class="user-menu-container">
|
|
<div class="user-chip" id="topup-user-chip" title="Admin">
|
|
<div class="user-chip-avatar" id="topup-user-avatar">ADM</div>
|
|
<div style="display:flex; flex-direction:column; gap:2px; min-width:0;">
|
|
<span class="user-chip-status">Admin</span>
|
|
<span class="user-chip-email" id="topup-user-email">Checking admin…</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="shell">
|
|
<div class="topbar">
|
|
<div>
|
|
<div class="crumb">Admin Tools</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status" class="status"></div>
|
|
|
|
<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>
|
|
|
|
<!-- 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 }
|
|
};
|
|
|
|
function showStatus(message, type = 'success') {
|
|
statusEl.textContent = message;
|
|
statusEl.className = 'status show ' + type;
|
|
if (type === 'success') {
|
|
setTimeout(() => clearStatus(), 5000);
|
|
}
|
|
}
|
|
|
|
function clearStatus() {
|
|
statusEl.textContent = '';
|
|
statusEl.className = 'status';
|
|
}
|
|
|
|
function formatMoney(amount, currency = 'usd') {
|
|
const config = currencyConfig[currency.toUpperCase()] || currencyConfig.USD;
|
|
return `${config.symbol}${(amount / 100).toFixed(2)}`;
|
|
}
|
|
|
|
async function fetchJson(url, opts = {}) {
|
|
const res = await fetch(url, { credentials: 'same-origin', ...opts });
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
const error = data.error || 'Request failed';
|
|
throw new Error(error);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
async function loadAdminInfo() {
|
|
try {
|
|
const data = await fetchJson('/api/admin/me');
|
|
if (data && data.admin) {
|
|
document.getElementById('topup-user-email').textContent = data.admin.username || 'admin';
|
|
document.getElementById('topup-user-avatar').textContent = (data.admin.username || 'A').charAt(0).toUpperCase();
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load admin info:', err);
|
|
if (err.message.includes('Admin login required') || err.message.includes('login required')) {
|
|
window.location.href = '/admin/login?next=' + encodeURIComponent(window.location.pathname);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
const filteredOptions = options.filter(opt => opt.currency === selectedCurrency.toLowerCase());
|
|
cardsEl.innerHTML = '';
|
|
|
|
filteredOptions.forEach((opt) => {
|
|
const card = document.createElement('div');
|
|
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);
|
|
if (opt.finalAmount !== opt.baseAmount) {
|
|
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()} tokens`;
|
|
|
|
const badge = document.createElement('span');
|
|
badge.className = 'pill';
|
|
const tierNum = opt.tier.startsWith('topup_') ? opt.tier.split('_')[1] : '';
|
|
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.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');
|
|
if (data && data.options) {
|
|
renderOptions(data.options, data.discount || 0);
|
|
} else {
|
|
throw new Error('Invalid options response');
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load top-up options:', err);
|
|
showStatus('Failed to load packages. Please refresh the page.', 'error');
|
|
}
|
|
}
|
|
|
|
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_admin_topup_session_id');
|
|
if (!sessionId) {
|
|
if (params.get('cancel')) showStatus('Checkout canceled.', 'pending');
|
|
return;
|
|
}
|
|
showStatus('Confirming admin checkout…', 'pending');
|
|
try {
|
|
const data = await fetchJson('/api/admin/topups/confirm?session_id=' + encodeURIComponent(sessionId));
|
|
if (data?.ok && data?.paid) {
|
|
showStatus('Payment confirmed (admin)', 'success');
|
|
localStorage.removeItem('dodo_admin_topup_session_id');
|
|
localStorage.removeItem('dodo_admin_topup_session_started');
|
|
params.delete('session_id');
|
|
params.delete('checkout_id');
|
|
params.delete('session');
|
|
window.history.replaceState({}, document.title, window.location.pathname + (params.toString() ? '?' + params.toString() : ''));
|
|
} else if (data?.pending) {
|
|
showStatus('Payment pending. Refresh in a moment.', 'pending');
|
|
} else {
|
|
showStatus(data?.error || 'Could not confirm payment.', 'error');
|
|
}
|
|
} catch (err) {
|
|
showStatus(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Currency selector
|
|
document.getElementById('currency-select').addEventListener('change', (e) => {
|
|
selectedCurrency = e.target.value;
|
|
renderOptions(currentOptions, currentDiscount);
|
|
});
|
|
|
|
// Initialize
|
|
(async () => {
|
|
try {
|
|
await loadAdminInfo();
|
|
await loadOptions();
|
|
await confirmIfNeeded();
|
|
} catch (err) {
|
|
showStatus(err.message, 'error');
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<footer style="margin-top: 80px; padding: 40px 24px; border-top: 1px solid #e1e3e5; text-align: center; color: #6d7175; font-size: 0.875rem;">
|
|
<p>© 2026 Plugin Compass. Admin test page with inline checkout.</p>
|
|
</footer>
|
|
</body>
|
|
|
|
</html>
|