ZaydAntony/payflow-frontend

Frontend to visualize my Mpesa STK push as copy paste components. # PayFlow **STK push, as copy-paste components.** You know that feeling when a customer says "I'll pay via M-Pesa" and you suddenly remember you have to deal with OAuth tokens, Base64 passwords, and a callback URL that Safaricom will silently reject if it's not HTTPS? Yeah. PayFlow exists so you never have to feel that again as a vibecoder. Connect your till or paybill once. Get a payment link. Your customer's phone buzzes with a real STK prompt. You get paid. That's the whole pitch. --- ## What's actually in here - 🔐 **Multi-provider payments** — Daraja (M-Pesa) today, KCB Buni too. One `PaymentProfile`, one adapter interface, zero if/else spaghetti. - 💳 **Checkout pages** — fixed price, "pay what you want," or fully API-driven. Shareable links, or embed the code directly. - 📊 **Live transactions dashboard** — watches pending payments flip to completed in real time, no manual refresh required. - 🔒 **Secrets encrypted at rest** — every credential, every provider, no exceptions. - ⚡ **A frontend that doesn't look like a Bootstrap tutorial** — jade, parchment, and mango, with a signature ripple animation that shows up wherever something's actually happening. ## The stack **Backend:** Django + DRF, JWT auth via Djoser, MySQL, Fernet encryption for every stored secret. **Frontend:** React + Vite + Tailwind, React Router, all wired against the real API — no mock data anywhere. ## Get it running ### Backend ```bash git clone github.com cd Payflow-backend pipenv install Fill in your own .env credentials # fill in your DB + Daraja/KCB credentials python manage.py migrate python manage.py runserver ``` ### Frontend ```bash cd payflow-frontend npm install cp .env.example .env # point VITE_API_BASE_URL at your backend npm run dev ``` ### The one gotcha that will eat an hour of your life if you skip this Safaricom's sandbox **will not** call back to `localhost`. Tunnel your backend (`ngrok http 8000`) and access it through …