firefrost-gaming/firefrost-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement Stripe JavaScript checkout on subscribe page

Browse Source 
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>
This commit is contained in:
Claude (Chronicler #57)
2026-04-03 15:59:20 +00:00
parent ac99b90fdd
commit 243b9d41f0
1 changed files with 50 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
subscribe.njk
View File

@@ -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>