Payedge

Payment flow simulation • Developer tools

An interactive payment flow simulator that helps engineering teams understand checkout behavior through a deterministic state machine. Model success paths, failure scenarios, and recovery flows without touching production.

View work

Payedge cover image

The Goal

Build an interactive tool that models payment states as a finite state machine, allowing engineers and product teams to manually trigger and observe payment lifecycle changes with real-time feedback through a live event log.

  • -Model payment states as a finite state machine
  • -Allow manual triggering and observation of payment lifecycle changes
  • -Provide real-time feedback through a live event log
  • -Render realistic checkout UI that reflects current payment state

What I Built

A three-panel layout consisting of a payment form, state inspector, and event log. The state machine drives all payment transitions from idle through processing to success or failure states, with retry capabilities. A mock API layer simulates network delays, failures, and edge cases.

Payedge demo video

  • -Three-panel layout: payment form, state inspector, event log
  • -State machine driving all transitions (idle → processing → success/failed → retry)
  • -Mock API layer simulating network delays and failures
  • -Scenarios: network timeout retry, card declined, idempotency handling, partial failures

Technical Approach

Implemented using useReducer with typed actions and states to ensure predictable state transitions. The mock API layer supports configurable delays and failure modes. Component composition keeps concerns separated between PaymentForm, StateInspector, and EventLog.

  • -State machine via useReducer with typed actions and states
  • -Mock API layer with configurable delays and failure modes
  • -Component composition: PaymentForm, StateInspector, EventLog
  • -TypeScript for state transition validation

The Result

Frontend engineers can now test edge cases without a backend. Product managers can visualize payment flows for specifications. QA can trigger specific failure modes for testing. New team members can learn payment architecture interactively.

  • -Frontend engineers can test edge cases without backend
  • -Product managers can visualize payment flows for specs
  • -QA can trigger specific failure modes for testing
  • -New team members learn payment architecture interactively

Next project

Onekard’s Blog

Content platform • CMS integration

A CMS-powered content platform enabling OneKard’s marketing team to publish and manage content independently with excellent performance and SEO.

View next project