Context
LightForce needed a client-facing portal where businesses could register, manage payment methods and view invoices without relying only on emails or separate accounting access.
← Back to case studies
Case study / LightForce
From manual billing coordination to a connected client payment portal.
LightForce needed a secure way to connect clients, invoices and payment workflows. MT Software delivered a full-stack PWA that gives customers clearer invoice visibility while the backend coordinates Xero, Stripe and GoCardless-ready payment workflows behind the scenes.
System overview
Workflow model
LightForce flow from invoice event to payment visibility
Input
Xero invoices
Authorized invoice events enter the backend as billing triggers for customer and payment review.
Review
Billing orchestration
The API matches customers, stores invoice state, checks payment methods and routes payment handling.
Handoff
Portal visibility
Clients and admins see invoice status, payment state and required actions in a protected portal.
System-level workflow representation showing how accounting events, payment methods and client-facing
visibility connect.
Overview
From disconnected invoice handling to a connected billing workflow.
LightForce needed a dedicated portal for client payments, invoice visibility and backend billing automation connected to accounting and payment provider events.
Challenge
The workflow had to connect Xero invoice events, client records, payment terms, Stripe cards, prepared GoCardless support and asynchronous webhook updates without exposing administrative controls.
Solution
MT Software structured a Vue/Quasar PWA backed by a NestJS API for authentication, invoice mirroring, customer management, payment method handling and billing orchestration.
Outcome snapshot
A clearer operational layer for invoices, clients and payments.
The case focuses on structural outcomes: centralized client access, payment status synchronization and a maintainable backend layer for billing automation.
Client payment visibility
Clients can access issued invoices, due dates, balances, payment status and payment method workflows in one portal.
Status synchronization
Xero and payment provider events feed the backend so local invoice and payment state can stay aligned.
Role-based operations
Admin and client capabilities are separated so customer access, payment terms and billing actions remain controlled.
Solution design
A client portal designed around secure billing coordination.
The solution focused on one practical workflow: help clients understand invoice status, keep payment details current and give LightForce a backend capable of coordinating billing events.
Client access
Authenticated registration, login, profile access and protected routes create a secure customer portal foundation.
Invoice visibility
Clients can review invoice numbers, due dates, paid amounts, outstanding balances, line items and status badges.
Payment methods
Stripe card management and prepared GoCardless bank-link support give the portal structured payment method handling.
Billing orchestration
NestJS services mirror Xero invoices, evaluate customer setup, process payment state and record operational errors.
Billing model
A system-level view of invoice-triggered payment workflows.
The visual model shows how invoice events move through customer matching, payment method review, provider handling and client-facing status updates.
Billing orchestration
Invoice and payment status workflow.
Xero trigger
Invoice events start the backend billing workflow.
Xero webhooks act as triggers for invoice lookup, local mirroring and customer matching.
Payment state
Provider events keep local payment status aligned.
Stripe and prepared GoCardless flows support payment state updates through signed webhooks.
Delivery path
A practical delivery sequence for a billing automation portal.
The work moved from workflow mapping to portal implementation, API integrations, webhook handling and operational handoff for a portable VPS deployment model.
-
Phase 01
Billing workflow mapping
Map client registration, Xero invoice events, payment terms, customer matching and required portal permissions.
-
Phase 02
PWA portal implementation
Build authenticated client screens for profile access, invoice visibility, payment methods and admin client management.
-
Phase 03
API integrations and webhooks
Implement NestJS modules for Xero, Stripe, GoCardless-ready flows, invoice mirroring and payment status updates.
-
Handoff
Deployment documentation
Document the Nginx, PM2, Node.js, SQLite and VPS runtime model needed to rebuild the environment.
Technical direction
Technical structure that supports secure invoice and payment workflows.
The technical direction focused on authenticated portal access, signed webhook handling, invoice state mirroring, payment provider integration and a portable deployment model using Nginx, PM2 and Node.js.
Vue/Quasar PWA
NestJS API
Xero sync
Stripe payments
GoCardless-ready
RBAC
Project takeaway
“The strongest value of the project was not just a customer portal, but a billing workflow that connects invoice events, payment methods and operational visibility.”
