PayPerPdf

PayPerPdf

💡 Project Details

Inspiration Many creators want a simple, friction-free way to monetize single-page PDFs, cheatsheets, or code templates—like a "Buy Me a Coffee" but with an instant download lock. Additionally, as developers in regions like Bangladesh where Stripe accounts are restricted, we wanted to build a sandbox payment flow that lets developers and judges test full end-to-end webhook architecture entirely offline without needing a real Stripe account.
What it does PayPerPdf is a complete, self-contained showcase of secure digital asset delivery:

Select & Preview: Users browse a catalog of templates rendered in a premium beige editorial style. Visual Checkout Simulator: If live Stripe keys are not configured, the app redirects to a custom mock Stripe Checkout page that guides users through entering standard test card details (4242 4242...). Live Webhook Console: Clicking pay triggers a mock payment completed event that is sent directly to the local webhook endpoint. A real-time terminal panel logs the event variables (sessionId, amount, productName, etc.) and unlocks the file instantly in the browser.

How we built it Frontend & Routing: Next.js 14 App Router, styled with custom light-theme glassmorphic cards and customized Tailwind palettes (walnut text on a warm sand background). Typography: A combination of the elegant Google Font Playfair Display (for headers) and Outfit (for UI components). Backend Logic: Node.js API endpoints handling session creations, download authorization tokens, and webhook parsing. Offline Engine: A custom webhook dispatch simulator.
Challenges we ran into Integrating Stripe usually requires real account keys, which bails out for sandbox developers who don't have access to global accounts. To bypass this, we built our own visual checkout simulator page that mocks the entire Stripe Checkout screen, and engineered a fetch-based local webhook dispatcher that routes the payload locally, allowing the live logs stream to function perfectly in mock mode.
Accomplishments that we're proud of Designing a beautiful, warm light beige editorial interface that feels premium and clean. Successfully routing simulated payloads so that the developer webhook terminal is fully functional without internet connection. Creating a completely smooth, responsive layout that shifts to a 2-column view on desktop to display action and console logs side-by-side.
What we learned Deeper knowledge of Stripe webhook event schemas and metadata parsing. How to manage Next.js environment configurations and resolve CSS specificity overrides in custom Tailwind themes.
What's next for PayPerPdf We plan to add support for Lemon Squeezy (a Merchant of Record that officially supports payouts in Bangladesh), allowing local creators to deploy this exact template and receive real global card payments straight to their Payoneer or bank accounts!