2136 lines
64 KiB
HTML
2136 lines
64 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>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">
|
|
|
|
<!-- 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>
|
|
|
|
<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', // Shopify Green
|
|
950: '#004c3f',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--green: #008060;
|
|
--green-dark: #004c3f;
|
|
--shopify-green: #008060;
|
|
--shopify-green-dark: #004c3f;
|
|
--shopify-green-light: #e3f5ef;
|
|
--border: #e5e7eb;
|
|
--muted: #6b7280;
|
|
--bg: #f8fafc;
|
|
--panel: #ffffff;
|
|
}
|
|
|
|
* {
|
|
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: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 24px 64px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
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: linear-gradient(135deg, #008060 0%, #004c3f 100%);
|
|
color: #fff;
|
|
border: none;
|
|
box-shadow: 0 4px 14px rgba(0, 128, 96, 0.25);
|
|
font-weight: 600;
|
|
padding: 14px 24px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: linear-gradient(135deg, #00664d 0%, #003d33 100%);
|
|
box-shadow: 0 6px 20px rgba(0, 128, 96, 0.35);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn.primary:disabled {
|
|
background: #9ca3af;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
position: relative;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 128, 96, 0.1), 0 10px 10px -5px rgba(0, 128, 96, 0.04);
|
|
border-color: rgba(0, 128, 96, 0.3);
|
|
}
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
|
color: #15803d;
|
|
border: 1px solid rgba(0, 128, 96, 0.2);
|
|
width: fit-content;
|
|
}
|
|
|
|
.muted {
|
|
color: #4b5563;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price {
|
|
font-size: 42px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
color: #0f172a;
|
|
line-height: 1;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.old-price {
|
|
color: #9ca3af;
|
|
text-decoration: line-through;
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.discount {
|
|
color: #15803d;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.products-label {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
color: #0f172a;
|
|
text-align: center;
|
|
}
|
|
|
|
.payment-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 100000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.payment-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.payment-modal {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
width: 95vw;
|
|
max-width: 1100px;
|
|
max-height: 96vh;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
transform: scale(0.95) translateY(8px);
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: auto;
|
|
.payment-modal-overlay.active .payment-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
|
|
.payment-modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.payment-modal-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.payment-modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.payment-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
color: #0f172a;
|
|
}
|
|
|
|
/* Make the frame container flexible and scrollable so iframe content fills the modal and isn't clipped */
|
|
.payment-frame-container {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
overflow: auto; /* allow internal scrolling when needed */
|
|
min-height: 60vh;
|
|
background: #f8fafc;
|
|
height: auto;
|
|
}
|
|
|
|
.payment-frame-container iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: calc(96vh - 72px);
|
|
max-height: calc(96vh - 72px);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.payment-modal {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
border-radius: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.payment-frame-container {
|
|
min-height: calc(100vh - 70px);
|
|
}
|
|
}
|
|
|
|
.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-mark {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--green), var(--green-dark));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.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-menu-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.user-menu-popup {
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
right: 0;
|
|
background: #fff;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
z-index: 10000;
|
|
min-width: 180px;
|
|
display: none;
|
|
padding: 6px;
|
|
animation: menuFadeIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes menuFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.user-menu-popup.active {
|
|
display: block;
|
|
}
|
|
|
|
.user-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
text-decoration: none;
|
|
color: #495057;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.user-menu-item:hover {
|
|
background: #f8f9fa;
|
|
color: var(--shopify-green);
|
|
}
|
|
|
|
.user-menu-item svg {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.user-menu-item:hover svg {
|
|
color: var(--shopify-green);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Custom Checkout Modal Styles */
|
|
.custom-checkout-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 1000000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.custom-checkout-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.custom-checkout-modal {
|
|
background: #fff;
|
|
border-radius: 20px;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
max-height: 90vh;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
transform: scale(0.9) translateY(20px);
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-checkout-modal-overlay.active .custom-checkout-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
|
|
.custom-checkout-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px 28px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.custom-checkout-header h3 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.custom-checkout-header h3 svg {
|
|
color: var(--shopify-green);
|
|
}
|
|
|
|
.custom-checkout-close {
|
|
background: #f8fafc;
|
|
border: 1px solid #e5e7eb;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: #64748b;
|
|
padding: 8px 12px;
|
|
border-radius: 10px;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.custom-checkout-close:hover {
|
|
background: #f1f5f9;
|
|
border-color: #cbd5e1;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.custom-checkout-body {
|
|
padding: 28px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.checkout-order-summary {
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
|
border: 1px solid #bbf7d0;
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.checkout-order-summary h4 {
|
|
margin: 0 0 16px 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #166534;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.checkout-summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.checkout-summary-row:not(:last-child) {
|
|
border-bottom: 1px solid rgba(0, 128, 96, 0.1);
|
|
}
|
|
|
|
.checkout-summary-label {
|
|
color: #166534;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkout-summary-value {
|
|
color: #15803d;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.checkout-summary-total {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 2px solid rgba(0, 128, 96, 0.2);
|
|
}
|
|
|
|
.checkout-summary-total .checkout-summary-label {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #14532d;
|
|
}
|
|
|
|
.checkout-summary-total .checkout-summary-value {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #15803d;
|
|
}
|
|
|
|
.checkout-discount-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: #166534;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.checkout-form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.checkout-form-group label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.checkout-input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
background: #fff;
|
|
}
|
|
|
|
.checkout-input:focus {
|
|
outline: none;
|
|
border-color: var(--shopify-green);
|
|
box-shadow: 0 0 0 4px rgba(0, 128, 96, 0.1);
|
|
}
|
|
|
|
.checkout-input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.checkout-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.checkout-card-input {
|
|
position: relative;
|
|
}
|
|
|
|
.checkout-card-icon {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.checkout-secure-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 14px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.checkout-secure-badge svg {
|
|
color: #10b981;
|
|
}
|
|
|
|
.checkout-secure-badge span {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkout-btn {
|
|
width: 100%;
|
|
padding: 16px 24px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.checkout-btn-primary {
|
|
background: var(--shopify-green);
|
|
color: #fff;
|
|
box-shadow: 0 4px 14px rgba(0, 128, 96, 0.3);
|
|
}
|
|
|
|
.checkout-btn-primary:hover:not(:disabled) {
|
|
background: var(--shopify-green-dark);
|
|
box-shadow: 0 6px 20px rgba(0, 128, 96, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.checkout-btn-primary:disabled {
|
|
background: #94a3b8;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.checkout-btn-secondary {
|
|
background: #f8fafc;
|
|
color: #475569;
|
|
border: 2px solid #e5e7eb;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.checkout-btn-secondary:hover {
|
|
background: #f1f5f9;
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
.checkout-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.checkout-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid #e5e7eb;
|
|
border-top-color: var(--shopify-green);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.checkout-loading h4 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.checkout-loading p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.checkout-success {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.checkout-success-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 24px;
|
|
}
|
|
|
|
.checkout-success-icon svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
color: #15803d;
|
|
}
|
|
|
|
.checkout-success h4 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #15803d;
|
|
}
|
|
|
|
.checkout-success p {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
color: #64748b;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.checkout-error {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.checkout-error svg {
|
|
color: #ef4444;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.checkout-error p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #991b1b;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.payment-methods {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.payment-method-btn {
|
|
flex: 1;
|
|
padding: 14px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.payment-method-btn:hover {
|
|
border-color: #cbd5e1;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.payment-method-btn.active {
|
|
border-color: var(--shopify-green);
|
|
background: #f0fdf4;
|
|
}
|
|
|
|
.payment-method-btn svg {
|
|
color: #64748b;
|
|
}
|
|
|
|
.payment-method-btn.active svg {
|
|
color: var(--shopify-green);
|
|
}
|
|
|
|
.payment-method-btn span {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
}
|
|
|
|
.payment-method-btn.active span {
|
|
color: #166534;
|
|
}
|
|
|
|
/* Mobile portrait: show only avatar to save space */
|
|
@media (max-width: 640px) and (orientation: portrait) {
|
|
|
|
.user-chip .user-chip-status,
|
|
.user-chip .user-chip-email {
|
|
display: none !important;
|
|
}
|
|
|
|
.user-chip {
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.user-chip-avatar {
|
|
width: 32px;
|
|
height: 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="Account & settings">
|
|
<div class="user-chip-avatar" id="topup-user-avatar">?</div>
|
|
<div style="display:flex; flex-direction:column; gap:2px; min-width:0;">
|
|
<span class="user-chip-status">Signed in</span>
|
|
<span class="user-chip-email" id="topup-user-email">Checking account…</span>
|
|
</div>
|
|
</div>
|
|
<div class="user-menu-popup" id="user-menu-popup">
|
|
<a href="/apps" class="user-menu-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg>
|
|
My Apps
|
|
</a>
|
|
<a href="/settings" class="user-menu-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
|
</path>
|
|
</svg>
|
|
Settings
|
|
</a>
|
|
<a href="/feature-requests" class="user-menu-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
|
</svg>
|
|
Feature Requests
|
|
</a>
|
|
<a href="/topup" class="user-menu-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path>
|
|
<path d="M12 18V6"></path>
|
|
</svg>
|
|
Tokens Top-up
|
|
</a>
|
|
<div style="margin: 4px 0; border-top: 1px solid #f1f3f5;"></div>
|
|
<a href="#" class="user-menu-item" id="logout-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
<polyline points="16 17 21 12 16 7"></polyline>
|
|
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
</svg>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="shell">
|
|
<div class="topbar">
|
|
<div>
|
|
<div class="crumb">Billing & Credits</div>
|
|
<h1 class="title">Token Top-ups</h1>
|
|
<p class="subtitle">Purchase additional AI credits with automatic plan discounts (Professional: 2.5% off, Enterprise: 5% off)</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="products-label">Available Top-up Packages</div>
|
|
<div id="cards" class="grid"></div>
|
|
</div>
|
|
|
|
<!-- Custom Checkout Modal -->
|
|
<div id="custom-checkout-overlay" class="custom-checkout-modal-overlay">
|
|
<div class="custom-checkout-modal" id="custom-checkout-modal">
|
|
<div class="custom-checkout-header">
|
|
<h3 id="checkout-title">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
|
|
<line x1="1" y1="10" x2="23" y2="10"></line>
|
|
</svg>
|
|
Complete Payment
|
|
</h3>
|
|
<button class="custom-checkout-close" id="custom-checkout-close">×</button>
|
|
</div>
|
|
<div class="custom-checkout-body" id="custom-checkout-body">
|
|
<!-- Content will be dynamically inserted -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const statusEl = document.getElementById('status');
|
|
const cardsEl = document.getElementById('cards');
|
|
let plan = 'hobby';
|
|
let loading = false;
|
|
let currentOptions = [];
|
|
let currentDiscount = 0;
|
|
let selectedCurrency = 'USD';
|
|
|
|
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;
|
|
}
|
|
|
|
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 });
|
|
if (res.status === 401) {
|
|
window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
|
|
return null;
|
|
}
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
const error = data.error || 'Request failed';
|
|
throw new Error(error);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
async function loadUser() {
|
|
const data = await fetchJson('/api/me');
|
|
plan = (data?.user?.plan || 'hobby').toLowerCase();
|
|
return data;
|
|
}
|
|
|
|
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 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';
|
|
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>`;
|
|
} 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)}%` : 'Standard price';
|
|
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…' : 'Purchase top-up';
|
|
button.disabled = loading;
|
|
button.onclick = () => startCheckout(opt.tier, opt.currency);
|
|
|
|
card.appendChild(badge);
|
|
card.appendChild(priceLine);
|
|
card.appendChild(tokenLine);
|
|
card.appendChild(discount);
|
|
card.appendChild(button);
|
|
cardsEl.appendChild(card);
|
|
});
|
|
}
|
|
|
|
async function loadOptions() {
|
|
try {
|
|
const data = await fetchJson('/api/topups/options');
|
|
if (data && data.options) {
|
|
renderOptions(data.options, data.discountRate || 0);
|
|
} else {
|
|
throw new Error('Invalid options response');
|
|
}
|
|
} 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');
|
|
}
|
|
}
|
|
|
|
async function startCheckout(tier, currency) {
|
|
if (loading) return;
|
|
loading = true;
|
|
renderOptions(currentOptions, currentDiscount);
|
|
clearStatus();
|
|
|
|
try {
|
|
const res = await fetch('/api/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_topup_session_id', data.sessionId);
|
|
localStorage.setItem('dodo_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);
|
|
}
|
|
}
|
|
|
|
function openInlineCheckout(checkoutUrl, sessionId) {
|
|
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(15, 23, 42, 0.75);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 1000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`;
|
|
|
|
const checkoutContainer = document.createElement('div');
|
|
checkoutContainer.id = 'checkout-container';
|
|
checkoutContainer.style.cssText = `
|
|
width: 100%;
|
|
max-width: 520px;
|
|
max-height: 90vh;
|
|
background: white;
|
|
border-radius: 16px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
|
|
`;
|
|
|
|
const closeButton = document.createElement('button');
|
|
closeButton.innerHTML = '×';
|
|
closeButton.style.cssText = `
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border: 2px solid #e5e7eb;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
z-index: 1000002;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #1f2937;
|
|
transition: all 0.15s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
`;
|
|
closeButton.onmouseover = () => {
|
|
closeButton.style.background = '#f8fafc';
|
|
closeButton.style.borderColor = '#008060';
|
|
closeButton.style.color = '#008060';
|
|
};
|
|
closeButton.onmouseout = () => {
|
|
closeButton.style.background = 'rgba(255, 255, 255, 0.95)';
|
|
closeButton.style.borderColor = '#e5e7eb';
|
|
closeButton.style.color = '#1f2937';
|
|
};
|
|
|
|
const loadingIndicator = document.createElement('div');
|
|
loadingIndicator.style.cssText = `
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #008060;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
z-index: 1001;
|
|
background: white;
|
|
padding: 20px 30px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
`;
|
|
loadingIndicator.textContent = 'Loading secure payment...';
|
|
|
|
modalOverlay.appendChild(checkoutContainer);
|
|
modalOverlay.appendChild(closeButton);
|
|
document.body.appendChild(modalOverlay);
|
|
checkoutContainer.appendChild(loadingIndicator);
|
|
|
|
setTimeout(() => modalOverlay.classList.add('active'), 10);
|
|
showStatus('Complete your payment in the modal below...', 'pending');
|
|
|
|
async function ensureDodoPaymentsLoaded() {
|
|
const SDK = window.DodoPaymentsCheckout?.DodoPayments;
|
|
if (SDK) {
|
|
return SDK;
|
|
}
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js';
|
|
script.onload = () => {
|
|
const loadedSDK = window.DodoPaymentsCheckout?.DodoPayments;
|
|
if (loadedSDK) {
|
|
resolve(loadedSDK);
|
|
} else {
|
|
reject(new Error('Dodo Payments SDK not available after load'));
|
|
}
|
|
};
|
|
script.onerror = () => reject(new Error('Failed to load Dodo Payments SDK'));
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
async function initCheckout() {
|
|
try {
|
|
const SDK = await ensureDodoPaymentsLoaded();
|
|
|
|
if (loadingIndicator.parentNode) {
|
|
loadingIndicator.parentNode.removeChild(loadingIndicator);
|
|
}
|
|
|
|
if (SDK) {
|
|
SDK.Checkout.open({
|
|
checkoutUrl: checkoutUrl,
|
|
elementId: 'checkout-container',
|
|
options: {
|
|
themeConfig: {
|
|
light: {
|
|
bgPrimary: '#FFFFFF',
|
|
bgSecondary: '#F8FAFC',
|
|
textPrimary: '#0F172A',
|
|
textSecondary: '#475569',
|
|
textPlaceholder: '#94A3B8',
|
|
textError: '#DC2626',
|
|
textSuccess: '#008060',
|
|
borderPrimary: '#E2E8F0',
|
|
borderSecondary: '#CBD5E1',
|
|
inputFocusBorder: '#008060',
|
|
buttonPrimary: '#008060',
|
|
buttonPrimaryHover: '#006650',
|
|
buttonTextPrimary: '#FFFFFF',
|
|
buttonSecondary: '#F8FAFC',
|
|
buttonSecondaryHover: '#E2E8F0',
|
|
buttonTextSecondary: '#0F172A'
|
|
},
|
|
dark: {
|
|
bgPrimary: '#FFFFFF',
|
|
bgSecondary: '#F8FAFC',
|
|
textPrimary: '#0F172A',
|
|
textSecondary: '#475569',
|
|
textPlaceholder: '#94A3B8',
|
|
textError: '#DC2626',
|
|
textSuccess: '#008060',
|
|
borderPrimary: '#E2E8F0',
|
|
borderSecondary: '#CBD5E1',
|
|
inputFocusBorder: '#008060',
|
|
buttonPrimary: '#008060',
|
|
buttonPrimaryHover: '#006650',
|
|
buttonTextPrimary: '#FFFFFF',
|
|
buttonSecondary: '#F8FAFC',
|
|
buttonSecondaryHover: '#E2E8F0',
|
|
buttonTextSecondary: '#0F172A'
|
|
},
|
|
radius: '8px'
|
|
},
|
|
payButtonText: 'Complete Payment',
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
showTimer: true,
|
|
showSecurityBadge: true,
|
|
redirectUrl: window.location.origin + '/topup'
|
|
}
|
|
});
|
|
} else {
|
|
throw new Error('DodoPayments SDK not available');
|
|
}
|
|
} 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: 24px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
text-align: center;
|
|
max-width: 85%;
|
|
z-index: 1001;
|
|
`;
|
|
errorMessage.innerHTML = `
|
|
<h3 style="color: #008060; margin: 0 0 12px 0; font-size: 18px; font-weight: 700;">Payment Loading</h3>
|
|
<p style="color: #475569; margin: 0 0 16px 0; line-height: 1.5;">
|
|
Please wait while we load the secure payment form...
|
|
</p>
|
|
`;
|
|
checkoutContainer.appendChild(errorMessage);
|
|
|
|
setTimeout(() => {
|
|
checkoutContainer.innerHTML = `
|
|
<div style="width: 100%; height: 100%; min-height: 500px;">
|
|
<iframe
|
|
src="${checkoutUrl}"
|
|
allowpaymentrequest="true"
|
|
style="width: 100%; height: 100%; border: none;"
|
|
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
|
|
></iframe>
|
|
</div>
|
|
`;
|
|
}, 1500);
|
|
}
|
|
}
|
|
|
|
initCheckout();
|
|
|
|
let pollCount = 0;
|
|
const maxPolls = 180;
|
|
const pollInterval = 1000;
|
|
|
|
const checkPaymentStatus = async () => {
|
|
try {
|
|
pollCount++;
|
|
|
|
const resp = await fetch(`/api/topups/confirm?session_id=${encodeURIComponent(sessionId)}`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
if (data.ok) {
|
|
clearInterval(pollTimer);
|
|
closeCheckoutModal();
|
|
showStatus(`Success! Added ${Number(data.tokensAdded || 0).toLocaleString()} credits to your account.`, 'success');
|
|
localStorage.removeItem('dodo_topup_session_id');
|
|
localStorage.removeItem('dodo_topup_session_started');
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1500);
|
|
return;
|
|
} else if (data.pending) {
|
|
}
|
|
}
|
|
|
|
if (pollCount >= maxPolls) {
|
|
clearInterval(pollTimer);
|
|
closeCheckoutModal();
|
|
showStatus('Payment confirmation timeout. Please check your account status.', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking payment status:', error);
|
|
}
|
|
};
|
|
|
|
const pollTimer = setInterval(checkPaymentStatus, pollInterval);
|
|
|
|
closeButton.onclick = () => {
|
|
clearInterval(pollTimer);
|
|
closeCheckoutModal();
|
|
showStatus('Payment cancelled', 'error');
|
|
};
|
|
|
|
modalOverlay.onclick = (e) => {
|
|
if (e.target === modalOverlay) {
|
|
closeButton.onclick();
|
|
}
|
|
};
|
|
|
|
const handleEsc = (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeButton.onclick();
|
|
}
|
|
};
|
|
document.addEventListener('keydown', handleEsc);
|
|
|
|
function closeCheckoutModal() {
|
|
document.removeEventListener('keydown', handleEsc);
|
|
modalOverlay.classList.remove('active');
|
|
setTimeout(() => {
|
|
if (modalOverlay.parentNode) {
|
|
modalOverlay.parentNode.removeChild(modalOverlay);
|
|
}
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
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');
|
|
if (!sessionId) {
|
|
if (params.get('cancel')) showStatus('Checkout canceled.', 'pending');
|
|
return;
|
|
}
|
|
showStatus('Confirming your payment…', 'pending');
|
|
try {
|
|
const data = await fetchJson('/api/topups/confirm?session_id=' + encodeURIComponent(sessionId));
|
|
if (data?.ok) {
|
|
showStatus(`Success! Added ${Number(data.tokensAdded || 0).toLocaleString()} credits to your account.`, 'success');
|
|
localStorage.removeItem('dodo_topup_session_id');
|
|
localStorage.removeItem('dodo_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');
|
|
}
|
|
}
|
|
|
|
// Auto-detect currency based on location
|
|
async function autoDetectCurrency() {
|
|
try {
|
|
const response = await fetch('https://ipapi.co/json/');
|
|
const data = await response.json();
|
|
if (data.currency && currencyConfig[data.currency]) {
|
|
selectedCurrency = data.currency;
|
|
updateCurrencyDisplay();
|
|
renderOptions(currentOptions, currentDiscount);
|
|
}
|
|
} catch (err) {
|
|
console.log('Currency detection failed, defaulting to USD');
|
|
}
|
|
}
|
|
|
|
// Currency dropdown functionality
|
|
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');
|
|
}
|
|
});
|
|
|
|
// Handle currency selection
|
|
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');
|
|
});
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', () => {
|
|
options.classList.add('hidden');
|
|
dropdown.classList.remove('open');
|
|
});
|
|
}
|
|
|
|
(async () => {
|
|
try {
|
|
setupCurrencyDropdown();
|
|
updateCurrencyDisplay();
|
|
await loadUser();
|
|
await loadOptions();
|
|
await confirmIfNeeded();
|
|
await autoDetectCurrency();
|
|
} catch (err) {
|
|
showStatus(err.message, 'error');
|
|
}
|
|
})();
|
|
|
|
// User menu functionality (similar to apps.html)
|
|
const userChip = document.getElementById('topup-user-chip');
|
|
const userChipEmail = document.getElementById('topup-user-email');
|
|
const userChipAvatar = document.getElementById('topup-user-avatar');
|
|
const userMenuPopup = document.getElementById('user-menu-popup');
|
|
const logoutLink = document.getElementById('logout-link');
|
|
|
|
if (userChip && userMenuPopup) {
|
|
userChip.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
userMenuPopup.classList.toggle('active');
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!userMenuPopup.contains(e.target) && !userChip.contains(e.target)) {
|
|
userMenuPopup.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (logoutLink) {
|
|
logoutLink.addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch('/api/logout', { method: 'POST' });
|
|
if (response.ok) {
|
|
localStorage.removeItem('shopify_ai_user');
|
|
localStorage.removeItem('wordpress_plugin_ai_user');
|
|
localStorage.removeItem('plugin_compass_onboarding_completed');
|
|
window.location.href = '/login';
|
|
}
|
|
} catch (err) {
|
|
console.error('Logout failed:', err);
|
|
window.location.href = '/login';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Load user data for the header
|
|
async function loadTopupUserChip() {
|
|
try {
|
|
const resp = await fetch('/api/account', { credentials: 'same-origin' });
|
|
if (resp.ok) {
|
|
const data = await resp.json().catch(() => ({}));
|
|
const email = data?.account?.email || '';
|
|
if (userChipEmail) userChipEmail.textContent = email || 'Guest';
|
|
if (userChipAvatar) userChipAvatar.textContent = email ? email.charAt(0).toUpperCase() : '?';
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load user data:', err);
|
|
}
|
|
}
|
|
|
|
// Initialize user data
|
|
loadTopupUserChip();
|
|
|
|
// ==========================================
|
|
// Custom Checkout Modal Implementation
|
|
// ==========================================
|
|
|
|
let customCheckoutSession = null;
|
|
let customCheckoutData = null;
|
|
let customCheckoutPollTimer = null;
|
|
|
|
const customCheckoutOverlay = document.getElementById('custom-checkout-overlay');
|
|
const customCheckoutModal = document.getElementById('custom-checkout-modal');
|
|
const customCheckoutBody = document.getElementById('custom-checkout-body');
|
|
const customCheckoutClose = document.getElementById('custom-checkout-close');
|
|
const checkoutTitle = document.getElementById('checkout-title');
|
|
|
|
function openCustomCheckout(tier, currency, optionData) {
|
|
customCheckoutData = { tier, currency, ...optionData };
|
|
customCheckoutSession = null;
|
|
|
|
renderCheckoutForm();
|
|
|
|
setTimeout(() => customCheckoutOverlay.classList.add('active'), 10);
|
|
|
|
if (customCheckoutPollTimer) {
|
|
clearInterval(customCheckoutPollTimer);
|
|
customCheckoutPollTimer = null;
|
|
}
|
|
}
|
|
|
|
function closeCustomCheckout() {
|
|
customCheckoutOverlay.classList.remove('active');
|
|
if (customCheckoutPollTimer) {
|
|
clearInterval(customCheckoutPollTimer);
|
|
customCheckoutPollTimer = null;
|
|
}
|
|
setTimeout(() => {
|
|
customCheckoutBody.innerHTML = '';
|
|
customCheckoutSession = null;
|
|
customCheckoutData = null;
|
|
}, 300);
|
|
}
|
|
|
|
function renderCheckoutForm() {
|
|
const { tier, currency, tokens, baseAmount, finalAmount } = customCheckoutData;
|
|
const config = currencyConfig[currency.toUpperCase()] || currencyConfig.USD;
|
|
const discount = currentDiscount * 100;
|
|
|
|
customCheckoutBody.innerHTML = `
|
|
<div class="checkout-discount-badge">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
${discount > 0 ? `${discount.toFixed(1)}% Plan Discount Applied` : 'Best Value'}
|
|
</div>
|
|
|
|
<div class="checkout-order-summary">
|
|
<h4>Order Summary</h4>
|
|
<div class="checkout-summary-row">
|
|
<span class="checkout-summary-label">Token Package</span>
|
|
<span class="checkout-summary-value">${Number(tokens || 0).toLocaleString()} credits</span>
|
|
</div>
|
|
<div class="checkout-summary-row">
|
|
<span class="checkout-summary-label">Plan</span>
|
|
<span class="checkout-summary-value">${plan.charAt(0).toUpperCase() + plan.slice(1)}</span>
|
|
</div>
|
|
${discount > 0 ? `
|
|
<div class="checkout-summary-row">
|
|
<span class="checkout-summary-label">Discount</span>
|
|
<span class="checkout-summary-value">-${discount.toFixed(1)}%</span>
|
|
</div>
|
|
` : ''}
|
|
<div class="checkout-summary-row checkout-summary-total">
|
|
<span class="checkout-summary-label">Total</span>
|
|
<span class="checkout-summary-value">${config.symbol}${(finalAmount / 100).toFixed(2)} ${currency}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout-secure-badge">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
<span>Secured by Dodo Payments. Your payment info is safe.</span>
|
|
</div>
|
|
|
|
<div id="checkout-error" class="checkout-error" style="display: none;">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
</svg>
|
|
<p id="checkout-error-message">An error occurred. Please try again.</p>
|
|
</div>
|
|
|
|
<form id="checkout-form">
|
|
<div class="checkout-form-group">
|
|
<label for="checkout-email">Email Address</label>
|
|
<input type="email" id="checkout-email" class="checkout-input" placeholder="your@email.com" required>
|
|
</div>
|
|
|
|
<div class="checkout-form-group">
|
|
<label for="checkout-card">Card Number</label>
|
|
<div class="checkout-card-input">
|
|
<input type="text" id="checkout-card" class="checkout-input" placeholder="1234 5678 9012 3456" maxlength="19" required>
|
|
<svg class="checkout-card-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
|
|
<line x1="1" y1="10" x2="23" y2="10"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout-row">
|
|
<div class="checkout-form-group">
|
|
<label for="checkout-expiry">Expiry Date</label>
|
|
<input type="text" id="checkout-expiry" class="checkout-input" placeholder="MM/YY" maxlength="5" required>
|
|
</div>
|
|
<div class="checkout-form-group">
|
|
<label for="checkout-cvc">CVC</label>
|
|
<input type="text" id="checkout-cvc" class="checkout-input" placeholder="123" maxlength="4" required>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="checkout-btn checkout-btn-primary" id="checkout-submit">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
Pay ${config.symbol}${(finalAmount / 100).toFixed(2)} ${currency}
|
|
</button>
|
|
</form>
|
|
|
|
<button type="button" class="checkout-btn checkout-btn-secondary" id="checkout-cancel">
|
|
Cancel
|
|
</button>
|
|
`;
|
|
|
|
document.getElementById('checkout-email').value = document.getElementById('topup-user-email')?.textContent || '';
|
|
|
|
setupCheckoutFormListeners();
|
|
}
|
|
|
|
function setupCheckoutFormListeners() {
|
|
const form = document.getElementById('checkout-form');
|
|
const cancelBtn = document.getElementById('checkout-cancel');
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
await processCustomCheckout();
|
|
});
|
|
|
|
cancelBtn.addEventListener('click', () => {
|
|
closeCustomCheckout();
|
|
showStatus('Payment cancelled', 'error');
|
|
});
|
|
|
|
const cardInput = document.getElementById('checkout-card');
|
|
cardInput.addEventListener('input', (e) => {
|
|
let value = e.target.value.replace(/\s/g, '').replace(/\D/g, '');
|
|
let formatted = '';
|
|
for (let i = 0; i < value.length; i++) {
|
|
if (i > 0 && i % 4 === 0) formatted += ' ';
|
|
formatted += value[i];
|
|
}
|
|
e.target.value = formatted;
|
|
});
|
|
|
|
const expiryInput = document.getElementById('checkout-expiry');
|
|
expiryInput.addEventListener('input', (e) => {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
if (value.length >= 2) {
|
|
value = value.substring(0, 2) + '/' + value.substring(2);
|
|
}
|
|
e.target.value = value;
|
|
});
|
|
|
|
const cvcInput = document.getElementById('checkout-cvc');
|
|
cvcInput.addEventListener('input', (e) => {
|
|
e.target.value = e.target.value.replace(/\D/g, '');
|
|
});
|
|
}
|
|
|
|
async function processCustomCheckout() {
|
|
const submitBtn = document.getElementById('checkout-submit');
|
|
const errorDiv = document.getElementById('checkout-error');
|
|
const errorMessage = document.getElementById('checkout-error-message');
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = `
|
|
<span class="checkout-spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0;"></span>
|
|
Processing...
|
|
`;
|
|
errorDiv.style.display = 'none';
|
|
|
|
try {
|
|
const res = await fetch('/api/topups/checkout', {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
tier: customCheckoutData.tier,
|
|
currency: customCheckoutData.currency,
|
|
inline: true
|
|
})
|
|
});
|
|
|
|
const data = await res.json().catch(() => ({}));
|
|
|
|
if (!res.ok) throw new Error(data.error || 'Checkout failed');
|
|
|
|
customCheckoutSession = data.sessionId;
|
|
localStorage.setItem('dodo_topup_session_id', data.sessionId);
|
|
localStorage.setItem('dodo_topup_session_started', Date.now().toString());
|
|
|
|
renderCheckoutLoading();
|
|
|
|
customCheckoutPollTimer = setInterval(() => checkCustomCheckoutStatus(), 1000);
|
|
|
|
} catch (err) {
|
|
console.error('Checkout error:', err);
|
|
errorDiv.style.display = 'flex';
|
|
errorMessage.textContent = err.message || 'Failed to process payment. Please try again.';
|
|
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = `
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
Pay ${currencyConfig[customCheckoutData.currency.toUpperCase()]?.symbol || '$'}${(customCheckoutData.finalAmount / 100).toFixed(2)} ${customCheckoutData.currency}
|
|
`;
|
|
}
|
|
}
|
|
|
|
function renderCheckoutLoading() {
|
|
const config = currencyConfig[customCheckoutData.currency.toUpperCase()] || currencyConfig.USD;
|
|
|
|
customCheckoutBody.innerHTML = `
|
|
<div class="checkout-loading">
|
|
<div class="checkout-spinner"></div>
|
|
<h4>Processing Payment</h4>
|
|
<p>Please wait while we process your payment of ${config.symbol}${(customCheckoutData.finalAmount / 100).toFixed(2)}...</p>
|
|
<p style="margin-top: 16px; font-size: 13px; color: #94a3b8;">Do not close this window.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function checkCustomCheckoutStatus() {
|
|
if (!customCheckoutSession) return;
|
|
|
|
try {
|
|
const resp = await fetch(`/api/topups/confirm?session_id=${encodeURIComponent(customCheckoutSession)}`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
|
|
if (data.ok) {
|
|
clearInterval(customCheckoutPollTimer);
|
|
customCheckoutPollTimer = null;
|
|
renderCheckoutSuccess(data.tokensAdded);
|
|
return;
|
|
} else if (data.pending) {
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error checking payment status:', error);
|
|
}
|
|
}
|
|
|
|
function renderCheckoutSuccess(tokensAdded) {
|
|
const config = currencyConfig[customCheckoutData?.currency?.toUpperCase()] || currencyConfig.USD;
|
|
|
|
customCheckoutBody.innerHTML = `
|
|
<div class="checkout-success">
|
|
<div class="checkout-success-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h4>Payment Successful!</h4>
|
|
<p>We've added <strong>${Number(tokensAdded || 0).toLocaleString()} token credits</strong> to your account.</p>
|
|
<p style="margin-top: 12px;">This window will close automatically.</p>
|
|
</div>
|
|
`;
|
|
|
|
checkoutTitle.innerHTML = `
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #22c55e;">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
Success
|
|
`;
|
|
|
|
setTimeout(() => {
|
|
closeCustomCheckout();
|
|
showStatus(`Success! Added ${Number(tokensAdded || 0).toLocaleString()} credits to your account.`, 'success');
|
|
localStorage.removeItem('dodo_topup_session_id');
|
|
localStorage.removeItem('dodo_topup_session_started');
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1500);
|
|
}, 2000);
|
|
}
|
|
|
|
customCheckoutClose.addEventListener('click', () => {
|
|
if (customCheckoutPollTimer) {
|
|
clearInterval(customCheckoutPollTimer);
|
|
}
|
|
closeCustomCheckout();
|
|
showStatus('Payment cancelled', 'error');
|
|
});
|
|
|
|
customCheckoutOverlay.addEventListener('click', (e) => {
|
|
if (e.target === customCheckoutOverlay) {
|
|
if (customCheckoutPollTimer) {
|
|
clearInterval(customCheckoutPollTimer);
|
|
}
|
|
closeCustomCheckout();
|
|
showStatus('Payment cancelled', 'error');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && customCheckoutOverlay.classList.contains('active')) {
|
|
if (customCheckoutPollTimer) {
|
|
clearInterval(customCheckoutPollTimer);
|
|
}
|
|
closeCustomCheckout();
|
|
showStatus('Payment cancelled', 'error');
|
|
}
|
|
});
|
|
|
|
// Override startCheckout to use custom checkout
|
|
const originalStartCheckout = startCheckout;
|
|
startCheckout = async function(tier, currency) {
|
|
if (loading) return;
|
|
loading = true;
|
|
renderOptions(currentOptions, currentDiscount);
|
|
clearStatus();
|
|
|
|
try {
|
|
const option = currentOptions.find(o => o.tier === tier && o.currency === currency.toLowerCase());
|
|
if (!option) throw new Error('Option not found');
|
|
|
|
openCustomCheckout(tier, currency, option);
|
|
} catch (err) {
|
|
console.error('Checkout error:', err);
|
|
showStatus(err.message || 'Failed to start checkout', 'error');
|
|
} finally {
|
|
loading = false;
|
|
renderOptions(currentOptions, currentDiscount);
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html> |