KSNE Landing Page & Mercado Pago Subscription Flow

A modern, high-end subscription landing page for the KSNE SaaS Platform (Key Sales & Net Earnings). It features user subscription onboarding powered by Mercado Pago API (Checkout Pro), styled with dark mode glassmorphism.

Tech Stack

• Backend: FastAPI (Python 3.14+)
• WSGI/ASGI Server: Uvicorn
• Payments: mercadopago Python SDK
• Templates: Jinja2 (HTML5)
• Styling: Premium Vanilla CSS (custom variables, Outfit & Plus Jakarta Sans typography, responsive layout, glassmorphism)

---

Installation & Setup

1. Activate the Virtual Environment

   source venv/bin/activate
   

2. Configure Environment Variables Create a .env file or modify the existing one:

   MP_ACCESS_TOKEN=YOUR_MERCADO_PAGO_ACCESS_TOKEN
   MP_PUBLIC_KEY=YOUR_MERCADO_PAGO_PUBLIC_KEY
   BASE_URL=http://localhost:8000
   PORT=8000
   

   Note: If no valid token is provided, the application will run in Demo Mode, generating mock payment preferences and auto-approving transactions for test visualization.

3. Run the Server Start the application with Uvicorn:

   python3 main.py
   

   Or:

   uvicorn main:app --reload --port 8000
   

---

Integration Details

• Create Preference (/create-preference): When a user selects a plan and inputs their email, a backend call is made to create a Mercado Pago Checkout Preference. The response contains the init_point, which redirects the user directly to the Mercado Pago checkout.
• Redirects: The user is redirected back to the platform via back_urls configured for /payment/success, /payment/failure, and /payment/pending.
• Webhooks (/webhook): The app is pre-configured to handle async webhooks from Mercado Pago (IPN notifications).

Project Structure

landing/
│
├── venv/                 # Virtual environment
├── static/
│   ├── css/
│   │   └── style.css     # Dark mode CSS with glowing highlights & glassmorphism
│   └── js/
│       └── main.js       # Client-side modal handler & preference requests
│
├── templates/
│   ├── index.html        # Main landing page & plan comparison table
│   ├── success.html      # Successful payment checkout landing
│   ├── failure.html      # Unsuccessful payment checkout landing
│   └── pending.html      # Pending payment/offline cash checkout landing
│
├── .env                  # Configuration variables
├── main.py               # FastAPI server application
└── README.md             # This guide