Yogiyo unified checkout
In the Yogiyo app, I merged payment flows that were separate for each order type, and app-to-web connections that differed between Android and iOS, into one structure shared by several teams.
4Stages in one shared order flow that carries every order type
- 2023.04 ~ 2024.10
- Wonderful Imagination Inc. (Yogiyo)
- Checkout architecture and shared SDK
Core value
The Yogiyo app now handles very different order types, from robot delivery to dining in, through one checkout flow.
Outcomes
- Became the internal standard, also used for partner integrations such as KakaoTalk
- One shared toolkit (SDK) replaced separate Android and iOS connection code, cutting setup for new projects
- Matched server and phone clocks, off by hundreds of milliseconds, so discounts apply at the right moment
Tech stack
Context
In the Customer Tribe, I designed the Yogiyo app’s checkout and its shared frontend infrastructure. Discounts, cart, and recommendations ran as separate services, so data dependencies and consistency between them had to be managed. Fragmented Android and iOS bridges forced every project to handle platform branches and callbacks on its own, and just before an order completed, a clock offset between server and client misaligned the moment a discount applied.
Decisions and implementation
- Unified checkout: I designed a unified checkout that handles many ways of ordering as one flow. I chose Selector-based caching over a global store to keep data dependencies between services to a minimum.
- I abstracted the order process into a four-stage lifecycle and personally persuaded the scattered teams involved until they agreed.
- I folded robot-delivery address selection, in-store table reservations, and the recommended-menu data flow into the same structure.
- Shared frontend infrastructure (Customer-js and WebApp Client): I designed a native communication interface for several teams to share and brought the teams to agreement on it.
- I wrapped the callback-based native bridge in Promises and abstracted it into one interface with an Observer pattern that tracks both sending and receiving state. I judged that two-way state tracking fit callback flows better than one-way publish-subscribe.
- A RequestManager stabilized asynchronous communication and callback control, and a Turborepo monorepo with tsup, Vitest, and Changesets automated builds and deployments.
- Checkout best price guarantee (BPR): NTP-based time sync corrected gaps of several hundred milliseconds between server and client to align when discounts applied.
- I cached discount results and calculated only the items needed at the time, which reduced rendering load. I moved six or more order validation checks into a middleware layer, separating their responsibility from discount calculation.