# darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2 architecture

> Architecture diagram of the GitHub repository darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2
- Repository: https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2

## Overview

This is a browser-based TP-Link Omada captive-portal payment page for buying KLCiS vouchers with GCash, Maya, or ShopeePay. The intended workflow is to select a voucher price, complete payment, and obtain internet access; the README documents these capabilities, while the payment implementation is obfuscated and its detailed handoffs cannot be verified from the excerpts. The sampled Omada script separately loads portal settings and submits authentication to Omada endpoints. Dashed, uncited edges mark relationships that are plausible from the product description but not visible in the sampled source.

Main entry points: [`index.html`](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/index.html) (Payment page), [`resources/klcis.js`](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/klcis.js) (KLCiS checkout), [`resources/index.js`](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.js) (Portal settings), [`resources/qr.js`](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/qr.js) (QR generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portal page"]
  node_portal["Payment page<br/>[index.html]"]
  node_price["Voucher selection<br/>[index.html]"]
end

subgraph group_payment["Voucher payment"]
  node_checkout["KLCiS checkout<br/>[klcis.js]"]
  node_providers["Payment providers"]
  node_qr["QR generation<br/>[qr.js]"]
  node_alerts["Payment alerts<br/>[alert.js]"]
end

subgraph group_omada["Omada access"]
  node_omada_page["Portal settings<br/>[index.js]"]
  node_auth["Portal authentication<br/>[index.js]"]
end

subgraph group_experience["Browser experience"]
  node_browser["Browser guidance<br/>[forced_browser.js]"]
  node_styling["Page styling<br/>[index.css]"]
end

node_visitor(("Wi-Fi visitor"))
node_controller["Omada controller"]

node_visitor -.->|"opens"| node_portal
node_portal -.->|"offers"| node_price
node_price -.->|"starts payment"| node_checkout
node_checkout -.->|"supports payment"| node_providers
node_checkout -.->|"uses QR"| node_qr
node_checkout -.->|"shows alerts"| node_alerts
node_portal -.->|"loads portal logic"| node_omada_page
node_omada_page -->|"requests settings"| node_controller
node_omada_page -->|"configures authentication"| node_auth
node_auth -->|"submits credentials"| node_controller
node_portal -.->|"handles mini browsers"| node_browser
node_portal -.->|"uses styles"| node_styling

click node_portal "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/index.html"
click node_price "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/index.html"
click node_checkout "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/klcis.js"
click node_qr "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/qr.js"
click node_alerts "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/alert.js"
click node_omada_page "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.js"
click node_auth "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.js"
click node_browser "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/forced_browser.js"
click node_styling "https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_portal,node_price toneBlue
class node_checkout,node_providers,node_qr,node_alerts toneAmber
class node_omada_page,node_auth toneMint
class node_browser,node_styling toneRose
class node_visitor,node_controller toneIndigo
```

## Components

### Portal page

- [Payment page](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/index.html): `index.html`
- [Voucher selection](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/index.html): `index.html`

### Voucher payment

- [KLCiS checkout](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/klcis.js): `resources/klcis.js`
- **Payment providers**
- [QR generation](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/qr.js): `resources/qr.js`
- [Payment alerts](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/alert.js): `resources/alert.js`

### Omada access

- [Portal settings](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.js): `resources/index.js`
- [Portal authentication](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.js): `resources/index.js`

### Browser experience

- [Browser guidance](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/forced_browser.js): `resources/forced_browser.js`
- [Page styling](https://github.com/darkhoundz/klcis-tp-link-omada-hotspot-e-payment--v2/blob/master/resources/index.css): `resources/index.css`

### Other components

- **Wi-Fi visitor**
- **Omada controller**

## Connections

- Wi-Fi visitor → Payment page: opens
- Payment page → Voucher selection: offers (evidence: `README.md`)
- Voucher selection → KLCiS checkout: starts payment (evidence: `README.md`)
- KLCiS checkout → Payment providers: supports payment (evidence: `README.md`)
- KLCiS checkout → QR generation: uses QR
- KLCiS checkout → Payment alerts: shows alerts
- Payment page → Portal settings: loads portal logic
- Portal settings → Omada controller: requests settings (evidence: `resources/index.js`)
- Portal settings → Portal authentication: configures authentication (evidence: `resources/index.js`)
- Portal authentication → Omada controller: submits credentials (evidence: `resources/index.js`)
- Payment page → Browser guidance: handles mini browsers
- Payment page → Page styling: uses styles