From 243b9d41f0243b66085c3526888369fc73b4721c Mon Sep 17 00:00:00 2001
From: "Claude (Chronicler #57)" <claude@firefrostgaming.com>
Date: Fri, 3 Apr 2026 15:59:20 +0000
Subject: [PATCH] feat: implement Stripe JavaScript checkout on subscribe page

Replaced all Paymenter links with JavaScript-powered Stripe checkout flow
per Gemini architectural consultation verdict (Option 2).

WHAT WAS DONE:
- Converted all 10 subscribe links from <a> tags to <button> tags
- Added onclick handlers: handleSubscribe(event, tier_level)
- Implemented Gemini's JavaScript checkout function at bottom of page
- Added proper error handling and button state management

THE GEMINI VERDICT - WHY OPTION 2:
Critical insight: THE DOUBLE-CLICK DANGER
- Option 1 (direct links): 800ms-1.5s wait with NO visual feedback
- Gamers click again when nothing happens = multiple checkout sessions
- Option 2 (JavaScript): Button disables INSTANTLY, prevents double-clicks
- Industry standard per Stripe official documentation

FILES MODIFIED:
- subscribe.njk (10 button updates + 41 lines JavaScript added)

SOFT LAUNCH: 11 days remaining (April 15, 2026 target)

Signed-off-by: Claude (Chronicler #57) <claude@firefrostgaming.com>
---
 subscribe.njk | 60 ++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 50 insertions(+), 10 deletions(-)

diff --git a/subscribe.njk b/subscribe.njk
index f608ddb..f131fa3 100644
--- a/subscribe.njk
+++ b/subscribe.njk
@@ -27,7 +27,7 @@ description: Choose your tier and join the Firefrost Gaming community
         <h2 style="font-size: 2.5em; margin: 0 0 10px 0; color: white;">The Awakened</h2>
         <p style="font-size: 1.8em; font-weight: 700; color: #FFD600; margin: 0 0 20px 0;">$1.00 <span style="font-size: 0.6em; font-weight: 400; color: rgba(255,255,255,0.7);">one-time</span></p>
         <p style="font-size: 1.2em; color: rgba(255,255,255,0.9); margin: 0 0 30px 0; line-height: 1.6;">The Handshake. Unlock whitelist access to all 13+ Minecraft servers. 1 home. Choose your path at Elemental tier.</p>
-        <a href="https://billing.firefrostgaming.com/products/subscriptions/the-awakened" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 18px 50px; font-size: 1.2em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe Now</a>
+        <button onclick="handleSubscribe(event, 1)" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 18px 50px; font-size: 1.2em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe Now</button>
     </div>
 </div>
 
@@ -47,7 +47,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ Join GingerFury's Flamecrafter community</li>
                 <li>✓ Fire-exclusive Discord channels</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/fire-elemental" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 2)" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
         <!-- Frost Elemental -->
@@ -61,7 +61,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ Join Frostystyle's Crystal Engineer community</li>
                 <li>✓ Frost-exclusive Discord channels</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/frost-elemental" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 3)" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
     </div>
@@ -82,7 +82,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ 4 force-loaded chunks</li>
                 <li>✓ /rtp 30min cooldown</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/fire-knight" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 4)" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
         <!-- Frost Knight -->
@@ -95,7 +95,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ 4 force-loaded chunks</li>
                 <li>✓ /rtp 30min cooldown</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/frost-knight" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 5)" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
     </div>
@@ -116,7 +116,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ 9 force-loaded chunks</li>
                 <li>✓ /rtp 15min cooldown</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/fire-master" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 6)" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
         <!-- Frost Master -->
@@ -129,7 +129,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ 9 force-loaded chunks</li>
                 <li>✓ /rtp 15min cooldown</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/frost-master" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 7)" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
     </div>
@@ -150,7 +150,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ 16 force-loaded chunks</li>
                 <li>✓ /rtp 10min cooldown</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/fire-legend" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 8)" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #FF4D00 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
         <!-- Frost Legend -->
@@ -163,7 +163,7 @@ description: Choose your tier and join the Firefrost Gaming community
                 <li>✓ 16 force-loaded chunks</li>
                 <li>✓ /rtp 10min cooldown</li>
             </ul>
-            <a href="https://billing.firefrostgaming.com/products/subscriptions/frost-legend" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s;">Subscribe</a>
+            <button onclick="handleSubscribe(event, 9)" style="display: inline-block; background: linear-gradient(135deg, #4ECDC4 0%, #00E5FF 100%); color: white; padding: 15px 40px; font-size: 1.1em; font-weight: 600; text-decoration: none; border-radius: 8px; transition: transform 0.2s; cursor: pointer; border: none;">Subscribe</button>
         </div>
 
     </div>
@@ -185,7 +185,7 @@ description: Choose your tier and join the Firefrost Gaming community
             <li>✓ <strong>Exclusive Founder channels (The Nexus)</strong></li>
             <li>✓ <strong>Lifetime access — Never pay again</strong></li>
         </ul>
-        <a href="https://billing.firefrostgaming.com/products/subscriptions/sovereign-founder" style="display: inline-block; background: linear-gradient(135deg, #FFD600 0%, #FFA000 100%); color: #1a1a1a; padding: 20px 60px; font-size: 1.3em; font-weight: 700; text-decoration: none; border-radius: 8px; box-shadow: 0 4px 15px rgba(255,214,0,0.4); transition: transform 0.2s;">Claim Founder Status</a>
+        <button onclick="handleSubscribe(event, 10)" style="display: inline-block; background: linear-gradient(135deg, #FFD600 0%, #FFA000 100%); color: #1a1a1a; padding: 20px 60px; font-size: 1.3em; font-weight: 700; text-decoration: none; border-radius: 8px; box-shadow: 0 4px 15px rgba(255,214,0,0.4); transition: transform 0.2s; cursor: pointer; border: none;">Claim Founder Status</button>
     </div>
 </div>
 
@@ -195,3 +195,43 @@ description: Choose your tier and join the Firefrost Gaming community
     <p style="font-size: 1.2em; color: rgba(255,255,255,0.9); margin: 0 0 25px 0; line-height: 1.6;">All subscriptions are processed securely through Stripe. Cancel anytime. Questions? <a href="/contact" style="color: #A855F7; text-decoration: none; font-weight: 600;">Contact us</a>.</p>
     <p style="font-size: 1em; color: rgba(255,255,255,0.7); margin: 0;"><em>Fire + Frost + Foundation = Where Love Builds Legacy</em></p>
 </div>
+
+<!-- Stripe Checkout JavaScript Handler -->
+<script>
+async function handleSubscribe(event, tierLevel) {
+  const button = event.currentTarget;
+  const originalText = button.innerHTML;
+  
+  // 1. Lock the button immediately (Prevent double-clicks)
+  button.disabled = true;
+  button.style.opacity = '0.7';
+  button.style.cursor = 'wait';
+  button.innerHTML = 'Connecting to Stripe...';
+  
+  try {
+    const response = await fetch('https://discord-bot.firefrostgaming.com/stripe/create-checkout-session', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tier_level: tierLevel })
+    });
+    
+    if (!response.ok) throw new Error('Network response was not ok');
+    
+    const data = await response.json();
+    
+    // 2. Redirect to Stripe
+    window.location.href = data.checkout_url;
+    
+  } catch (error) {
+    // 3. Graceful Error Recovery
+    console.error('Checkout Error:', error);
+    alert('Unable to connect to the billing system. Please try again or contact The Trinity in Discord.');
+    
+    // Reset button
+    button.disabled = false;
+    button.style.opacity = '1';
+    button.style.cursor = 'pointer';
+    button.innerHTML = originalText;
+  }
+}
+</script>