IPTV E-commerce Platform

Alpha TV

🎯 Problem Solved: Built an e-commerce platform with abandoned cart recovery system that captures lost leads through WhatsApp rescue popups. 💡 Technical Challenges: Implemented 5 smart triggers (exit intent, 30s timer, inactivity, tab switch, back button) for lead capture. Built backend proxy architecture so Stripe API keys never touch the client (XSS prevention). Integrated Google Sheets webhook for progressive form tracking (started → typing → abandoned → completed). Multi-platform analytics with Meta Pixel + TikTok Pixel + Google Analytics. 🔐 Security: Backend proxy for Stripe, HMAC webhook verification, input sanitization. 📈 Business Impact: Real-time order automation (MAC/PIN → Google Sheets → WhatsApp auto-message), 100% Lighthouse SEO score with Astro SSG, bilingual FR/EN support.

Astro 5 React Islands TailwindCSS 4 Stripe API Apple Pay Google Pay Vercel Serverless Google Sheets API WhatsApp API Meta Pixel TikTok Events API
🔐 Backend Proxy 🔐 HMAC Webhooks 🔐 Input Sanitization
View Live Demo Technical Details
🎯 The Problem

High cart abandonment rates were causing lost sales. Needed multi-channel analytics and secure payment processing.

💡 The Solution

Implemented 5 smart triggers (exit intent, 30s timer, inactivity, tab switch, back button) for lead capture. Backend proxy architecture for Stripe. Google Sheets webhook integration.

📈 The Impact

Real-time order automation (MAC/PIN → Google Sheets → WhatsApp auto-message). 100% Lighthouse SEO score. Bilingual FR/EN support.

💡 Technical Challenges Solved
  • 1

    5-trigger WhatsApp rescue: scroll-to-top exit, inactivity detection, tab switch, back button, 30s timer

  • 2

    TikTok/Meta pixel deduplication with event_id pattern prevents double-counting

  • 3

    Real-time lead tracking as user types (debounced 1s) for instant follow-up

  • 4

    Stripe subscription with 24h free trial and Apple Pay/Google Pay

  • 5

    Google Sheets webhook for instant order automation

  • 6

    ttclid/fbclid attribution preservation in localStorage for accurate campaign tracking

  • 7

    Mobile-optimized triggers (90% of traffic is mobile)

Technical Architecture

Frontend Stack

  • • Astro 5 Static
  • • React Islands
  • • TailwindCSS
  • • Stripe Elements
  • • Responsive design

Backend & Database

  • • Vercel Serverless
  • • Stripe Webhooks
  • • Google Sheets API
  • • WhatsApp Business API

Infrastructure

  • • Vercel Edge
  • • Meta Conversions API
  • • TikTok Events API
  • • Google Analytics

📸 Screenshots

Homepage Hero
Homepage Hero 🖥️
Mobile Homepage
Mobile Homepage 📱
Checkout Flow
Checkout Flow 🖥️
Mobile Checkout
Mobile Checkout 📱
WhatsApp Popup
WhatsApp Popup 🖥️
Pricing Section
Pricing Section 🖥️

🚀 Use the buttons above to explore: Live Demo , and Full Technical Details