For the engineers

How this site works under the hood.

This site uses the same storefront code included in the starter download. Here is how checkout, verification, delivery, and themes work.

The payment-verified delivery loop

Pagemage checks payment with Stripe before returning a download. Checkout, verification, and delivery use three API endpoints:

1. Checkout. /api/create-checkout-session takes a tier, maps it to a Stripe Price ID from environment variables, and creates a hosted Checkout Session. Success redirects to /success.html?session_id=….
2. Verification. The success page calls /api/verify-session, which retrieves the session from Stripe and checks its payment status and product identity before reporting the result.
3. Delivery. The download button points at /api/download?session_id=…, which re-verifies the session server-side before streaming the archive. It rejects malformed session IDs before contacting Stripe.

The endpoint serves the latest available starter build to verified buyers. Customers can use their purchase link again when an update is released. They should keep that link private.

The product archive ships inside the function

The ZIP lives in api/assets/ and is bundled with the download function. Vercel does not serve api/ as a static directory. scripts/make-zip.mjs selects the shipped files and creates the archive; npm run check-package checks a freshly extracted copy.

Zero third-party requests

Browsing pages loads fonts, styles, and scripts from this site. The Content Security Policy restricts those resources to the same origin. Checkout opens on Stripe. Server-side functions contact Stripe for payments and GitHub for optional private storage.

Eight palettes in one stylesheet

Every color on this page routes through design tokens at the top of styles.css. The eight palettes are Paper, Midnight, Plum, Sand, Slate, Forest, Frutiger Aero, and Ocean. Paper uses the default tokens; the others override them under [data-theme]. Frutiger Aero adds sky gradients, glass panels, and glossy buttons. Switching themes is a single attribute write, which is why the demo switcher on the sales page can re-theme the whole site instantly and remember your choice per visitor.

Constraints we chose on purpose

• No build step. The pages use plain HTML, CSS, and JavaScript. Node dependencies support API functions and development checks.
• Server-side checks and storage. API functions handle payments, verified downloads, optional lead storage, and owner operations. Credentials stay on the server.
• Browser fallbacks. The starter includes print styles, no-JavaScript content fallbacks, keyboard controls, and reduced-motion support. Checkout needs JavaScript.
• Guarded by tests. npm run check validates every internal link, anchor, JSON file, and structured-data block; npm run smoke exercises each API's failure paths without needing real keys.

See it for yourself

Read the setup guide to configure your own copy. The field guide covers product, delivery, and seller responsibilities. The build log links to the release history.

Get Pagemage