Payments are handled on the server
The browser only gets a one-time code to open the Paystack window. Before marking an order paid, the server checks that the amount, currency and reference match what Paystack reports.
All work
E-commercePaymentsAdmin dashboard
OT Collectives Atelier
OT Collectives is a fashion label in Lagos. I designed and built their online store, including Paystack payments and an admin the owner uses every day on their phone.
- Role
- Design and full-stack engineering
- Timeline
- Under a week, delivered on time
- Stack
- Next.js 16 · TypeScript · Supabase Postgres · Paystack
- Live
- Live store
What the founder asked for
The brand’s motto is “Dress different. Normal is boring,” and the founder wanted a store that looked the part. Customers had to be able to pay by card, bank transfer or USSD, and get their order updates on WhatsApp.
The founder also wanted to run the store without calling a developer. That meant adding new pieces, marking a size as sold out and moving orders along, all from a phone.
Architecture
Next.js 16TypeScriptSupabase PostgresPaystackVercelSentry
- 01StorefrontNext.js 16 with server components and cached pages
- 02Server actionsThe cart is re-priced from the database before an order is created
- 03PaymentsPaystack transaction, then a signed webhook and a verify call
- 04DatabaseSupabase Postgres with row-level security, plus storage for photos
- 05HostingVercel, with Sentry for errors
01 · Shopping
Live size availability
Each product page shows which sizes are still available and crosses out the ones that have sold. On a phone you can add to your bag in one tap, and the bag shows how close you are to free delivery.
02 · Payments
Checkout
Customers pay with Paystack by card, transfer or USSD. The browser never gets a payment key. The server creates the transaction, and only marks the order as paid after Paystack confirms it.
03 · Admin
An admin built for a phone
The owner sees new orders and moves each one to packed, shipped or delivered with a tap. They can also add products, change sizes and stock, and edit the homepage. Changes show up on the store straight away.
Engineering decisions
Security lives in the database
I used Postgres row-level security, so only the admin can change products and orders. Even if the UI had a bug, the database would refuse the write.
Cached pages that refresh on save
Pages are served from cache and refresh as soon as the owner saves a change in the admin.
Alerts on stuck payments
Sentry tells me about errors, and about any payment that went through without its order being confirmed.
Results
- Live within 3 days of the first commit
- The owner runs it without a developer
“Told you what I want and you delivered. Thought I’d have issues, but it’s 💯. You even got it done on time.”
What I’d build next
I’d track stock for each size so sizes sell out on their own, and send WhatsApp updates automatically when an order moves.