Case Study 1: A Multilingual Landing + Payments Page

The idea

A friend sells a $29 PDF guide to expats moving to Korea. She wanted a single page that loaded fast worldwide, spoke English, Korean, and Chinese, and took card payments without her touching a server.

The spec

We kept the spec to one paragraph before writing any code:

Build a single-page marketing site for a $29 digital product.
Three languages (en/ko/zh), auto-detected from the browser but
switchable with a toggle. One "Buy" button that opens Stripe
Checkout and redirects to a thank-you page on success. No backend
server I have to maintain. Must load fast from anywhere.

Notice what the spec does not say: no framework, no design system, no analytics, no email capture. Every one of those would have been a reasonable feature, and every one would have slowed the first launch. The discipline of a one-paragraph spec is mostly the discipline of leaving things out.

The stack

"No backend I maintain" plus "fast worldwide" pointed straight at static hosting on an edge CDN (Content Delivery Network — copies of your files kept in data centers worldwide so each visitor loads from a nearby one) with a tiny serverless function for the one thing that needs a secret: creating the Stripe session. We chose a static site on Cloudflare Pages with a single Pages Function. The whole architecture fits in a sentence — a static page that calls one function that talks to Stripe — and that simplicity is what made it debuggable later.

The key prompts

We started broad and let the AI propose structure:

Scaffold a static landing page (plain HTML/CSS/JS, no framework)
with a language toggle for en/ko/zh. Store the copy in a single
JS object keyed by language. Detect the default from
navigator.language. Keep it to one index.html plus one main.js.

Then the payment path, where the secret lives:

Add a Cloudflare Pages Function at /api/checkout that creates a
Stripe Checkout session for a single $29 product and returns the
redirect URL. Read STRIPE_SECRET_KEY from the environment, never
hardcode it. The Buy button should POST to this function and then
window.location to the returned URL.

The phrase "never hardcode it" earns its place. Left to its own defaults, an AI will happily drop a placeholder key inline to make the example "work," and a placeholder has a way of becoming a real key that ships. Saying it out loud once, in the prompt, is cheaper than catching it in review.

The obstacle

The first live test failed: the Buy button did nothing, and the browser console showed a CORS (Cross-Origin Resource Sharing — the browser's rule about which sites are allowed to call which) error. We didn't guess. We pasted the exact error back:

Clicking Buy logs: "Access to fetch at '/api/checkout' blocked
by CORS policy." The function and page are on the same domain.
Here's the function code: [pasted]. What's actually wrong?

The AI spotted it instantly: the function was returning the Stripe URL as JSON (JavaScript Object Notation — a simple, readable text format programs use to swap structured data) but the fetch was being made before the function's OPTIONS preflight was handled, because we'd deployed the static page and the function to two different Pages projects by mistake. The real fix was deployment topology, not code. We moved the function into the same project's /functions directory and the error vanished.

The lesson is worth dwelling on: the symptom was in the code (a CORS error from a fetch), but the cause was in the infrastructure (two projects instead of one). If we'd let the AI "fix the CORS error" without pasting the setup, it would have bolted on Access-Control-Allow-Origin headers — a fix that compiles, papers over the symptom, and leaves the real bug live. Paste the literal error and the surrounding context, and don't accept the first plausible explanation if it doesn't match your setup.

The launch

We added the live Stripe keys as encrypted environment variables in the Pages dashboard (never in the repo), pointed her domain's DNS (Domain Name System, the internet's address book that maps a name to a server) at Pages, and ran one real $29 test purchase with a card, then refunded it. We also clicked through the failure path on purpose — a declined test card — to confirm she wasn't charged and saw a sane message instead of a blank screen. Live in an afternoon. She made her first sale that evening.