Audiophile

Story

What should checkout say when no money moved?

There were a few key web flows I wanted to figure out, and payment was one of them. I picked this storefront design because its catalog, cart and checkout were already designed, so I didn't have to write up the UI and could focus on the payment setup. I set my review checklist as the bar, and AI coding agents wrote the code, in Next.js with TypeScript.

The first version reached the end of the journey quickly. A visitor could browse headphones, speakers or earphones, keep a cart and check out. The problem appeared at confirmation: the last screen sounded like a paid order, even though nothing had been charged. So confirmation became a state, not a celebration. An order is pending until something actually pays it.

Then came the second journey, the one I'd picked the design for. Cards went through Stripe in test mode, with live keys refused. Bank transfer, Zelle and pay in person joined them, and those three wait for a person to confirm the money arrived. The shop never marks them paid on its own.

I also called a card acquirer to see what taking real cards would need. Before I could even try their API, they wanted a business website, a logo and social media. I parked that and kept the store in test mode.

That left one honest gap: I don't have products to sell. I wanted to test everything without actually selling anything, so the store became an explicit demo. Every page says nothing is sold, charged or shipped, and orders are saved without anyone's personal details.

Where it stands: taking real money would need a merchant account and a business behind it.

Audiophile taught me that the hard part of a store isn't the catalog. It's being honest about money: what was paid, what's still pending, and who confirms it.

Design: Frontend Mentor's Audiophile e-commerce website (opens in a new tab). Build: Royer Adames, with AI agents.