System Architecture

The TriPay system is designed to securely and reliably process payment transactions for end-users through APIs and interact with a Laravel + Vue web app through a separate server setup, according to its use case.

Component Breakdown

1. End-User: End-users interact with Tripay website for registration, merchant configuration, and viewing transaction details.
2. Merchant Server: Merchant server that integrates Tripay API to process transactions.
3. Cloudflare Layer: All inbound and outbound traffic is routed through Cloudflare to provide DDoS protection, IP filtering rules, and resource caching.
4. Colocation Server:
   • Webhook Service: Sends asynchronous notifications (callbacks) from Tripay to merchant server related to transaction status updates.
   • Web App: Laravel monolith application that handles both frontend (Vue.js) and backend services, including user interface, business logic processing, and API endpoints for merchant integration.
   • Database: Relational database system to store user data, transaction records, settings, and logs.
5. Payment Providers: TriPay system connects to several payment providers and banks to process a wide range of bank/QRIS payments.
6. Bank: Final destination of transaction funds; actual money movement occurs here via the payment provider integration.
7. Third-Party Integrations & Tools:
   • Email and Storage: Amazon SES for transactional email delivery and S3 for storing files and user data.
   • Analytics: Google Analytics, Microsoft Clarity, and PostHog for user activity tracking, product analytics, and heatmaps.
   • Third Party Services: Verihubs and Gemini for identity verification/KYC, WhatsApp API for customer notifications.
   • Other Tools: n8n for workflow automation, Metabase for data analytics/dashboard, OpnForm for form management and internal use cases.