I'm always excited to take on new projects and collaborate with innovative minds.

Website

https://krafton.my.id

Social Links

Project

TeePay Developer Docs

The developer documentation for TeePay's payments API: quickstarts, a full API reference, signed webhooks, hosted checkout, payouts and MCP tools so AI agents can create real checkout links.

Client

TeePay (own product)
TeePay Developer Docs

docs.teepay.me is where developers integrate TeePay. It takes a developer from an API key to a verified payment: authenticate, create a collection that sends a USSD push to the customer's phone, or redirect to hosted checkout, then receive a signed webhook once the payment is confirmed. The docs cover guides and an interactive API reference generated from the OpenAPI specification, environments (sandbox and live), idempotency, errors and limits, webhooks and signature verification, Control Numbers, payouts and an MCP server so AI agents can create payment links. A built-in developer film shows one request end to end, and every code sample is copy-ready.

Engineering case study

  1. The business challenge

    Developers in Africa often find payment documentation thin, out of date or locked behind sales calls. For TeePay to win builders, a developer needed to go from zero to a confirmed payment quickly, with examples that actually match the live API.

  2. Engineering approach

    The docs were treated as part of the product. The API reference is generated from the same OpenAPI specification the API uses, guides are written in MDX next to real request and response examples, and every example uses the real field names, statuses and webhook headers. The docs state clearly what is not available yet (for example sandbox money movement) instead of hiding gaps.

  3. Solution architecture

    - Next.js app using Fumadocs with MDX content and an OpenAPI-driven API reference.
    - Syntax-highlighted, copyable code samples (cURL, Node.js) and webhook signature verification examples.
    - Sections for environments, authentication, idempotency, errors, webhooks, payments, Control Numbers, payouts and AI/MCP.
    - A custom "hacker" visual layer (code rain, custom cursor, motion buttons) that respects reduced-motion settings.
    - Deployed as its own container behind Nginx at docs.teepay.me.

  4. Technologies involved

    Next.js, React, TypeScript, MDX, OpenAPI, Tailwind CSS, Shiki, WebGL, Docker, Nginx.

  5. Outcome

    A public, searchable documentation site at docs.teepay.me that walks a developer from an API key to a verified, webhook-confirmed payment, documents MCP tools for AI agents, and stays consistent with the live API because the reference is generated from the specification.

  6. Lessons learned

    - Generate the reference from the spec; hand-written references drift.
    - Say what isn't available yet — developers trust honest docs.
    - One clear end-to-end example (one request, start to finish) does more than many fragments.

Share

Leave a comment

Your email address will not be published. Required fields are marked *

Your experience on this site will be improved by allowing cookies. Cookie Policy