Full-stack e-commerce platform for an Indonesian specialty coffee roastery direct ordering with dual payment flows (Doku + manual transfer), order tracking, and a custom admin CMS with payment verification built in.
Himawari Roastery is a complete ecommerce platform for a specialty coffee brand selling single origin Gayo coffee from Aceh. It gives the business its own direct sales channel and reduces its dependence on third party marketplaces.
The platform combines an interactive storefront, a multistep checkout process, and a fully integrated headless CMS. Everything from the product catalog and brewing guides to marketplace and social media links can be managed through the admin panel without changing the source code.
The payment system supports two checkout methods. Customers can pay automatically through DOKU Payment Gateway using credit cards, digital wallets, QRIS, virtual accounts, or convenience stores. Payment status is confirmed through verified webhook notifications. Customers can also choose manual bank transfer and upload their payment receipt for review by the admin.
Both payment methods use the same order state system, which manages the complete order lifecycle from pending payment to completion, including verification, cancellation, rejection, and refunds.
Every order triggers automatic notifications. The owner receives a WhatsApp message through Fonnte, while the admin receives an HTML email through Resend with a direct verification button. Customers also receive confirmation or rejection emails based on their payment status. These notifications run asynchronously, so they do not slow down the checkout process.
Customers receive a public tracking link that refreshes the order status every 30 seconds and can be shared through WhatsApp. They can also check their order using the order number on a dedicated lookup page.
The custom admin panel extends Payload CMS with dedicated React components. It includes real time dashboard metrics for daily orders, completed payments, pending verifications, and monthly completed orders. Admins can preview payment receipts and approve or reject payments directly from the order list. The order detail panel also provides direct links to the customer’s WhatsApp number and a tracking URL that can be copied instantly.
RajaOngkir API integration calculates shipping costs in real time across six Indonesian couriers, including JNE, J&T, SiCepat, POS Indonesia, TIKI, and AnterAja. Product pages can also link directly to checkout with the selected product and quantity already added to the cart.
What was built
Designed and developed a high-converting landing page for a specialty coffee brand.
Implemented smooth animations and responsive layout for all screen sizes.
Built a dual-path payment system: Midtrans Snap integration (8+ payment methods) with SHA512-verified webhook auto-confirmation, alongside a manual transfer flow with proof upload and an admin verification pipeline — both unified under one 9-state order state machine.
Designed a 3-step checkout with deep-link support (?add=slug:qty) letting product pages pre-fill the cart and skip straight to shipping details, plus real-time shipping rates from RajaOngkir across 6 couriers.
Implemented a multi-channel notification system — WhatsApp (Fonnte) to the owner, HTML emails (Resend) to admin and customers with 4 purpose-built templates — all fire-and-forget so notifications never block order creation.
Extended Payload CMS with custom admin UX: a metrics dashboard, an inline verification panel with expandable payment proofs and one-click approve/reject, and per-order sidebars with clickable WhatsApp links and shareable tracking URLs.
Shipped a public order tracker with 30-second auto-polling and order lookup by human-readable order number (HMW-YYYYMMDD-XXXX), designed to be shared as a WhatsApp link.
Fully CMS-driven configuration — bank accounts, QRIS image, marketplace links, notification emails — so the owner manages everything without touching code.
