System Architecture Documentation

🔧 Complete System Architecture

graph TB %% ===== CLIENT LAYER ===== A[1. 🖥️ Client Application] --> B[2. 🌐 Frontend UI] %% ===== API GATEWAY LAYER ===== B --> C[3. 🚪 Internal API Gateway] C --> D[3.1 🔐 JWT Authentication] C --> E[3.2 ⚡ Rate Limiting] C --> F[3.3 ✅ Request Validation] C --> G[3.4 🔄 Webhook Handler] %% ===== SECURITY & SECRETS LAYER ===== D --> H[4. 🗝️ External Secrets Manager] H --> I[4.1 🔑 API Keys Storage] H --> J[4.2 🗃️ Database Credentials] H --> K[4.3 🌐 External Service Tokens] H --> L[4.4 📝 Webhook Secrets] %% ===== DATABASE LAYER ===== F --> M[5. 🗄️ PostgreSQL Database] J --> M M --> N[5.1 💼 Business Data] M --> O[5.2 👥 User Data] M --> P[5.3 💰 Transaction Data] M --> Q[5.4 📨 Webhook Events] %% ===== EXTERNAL SERVICES LAYER ===== F --> R[6. 🔗 External API Integrations] K --> R R --> S[6.1 💳 NicePay Gateway] R --> T[6.2 🛒 Lazada API] R --> U[6.3 🤖 AI Services] R --> V[6.4 📦 Request API] %% ===== WEBHOOK SERVICES ===== G --> W[7. 📡 Webhook Processing] L --> W W --> X[7.1 💳 Payment Webhooks] W --> Y[7.2 🛒 E-commerce Webhooks] W --> Z[7.3 🤖 AI Service Webhooks] %% ===== NOTIFICATION LAYER ===== W --> AA[8. 📢 Notification System] X --> AA Y --> AA Z --> AA AA --> AB[8.1 📧 Email Alerts] AA --> AC[8.2 💬 SMS Notifications] AA --> AD[8.3 📱 Push Notifications] %% ===== MONITORING LAYER ===== C --> AE[9. 📊 Audit Logging] H --> AE R --> AE W --> AE AE --> AF[9.1 🛡️ Security Monitoring] AE --> AG[9.2 📈 Performance Analytics] AE --> AH[9.3 🔍 Webhook Analytics] style A fill:#2962FF,color:white style B fill:#2962FF,color:white style C fill:#FF6D00,color:white style H fill:#00C853,color:white style M fill:#AA00FF,color:white style R fill:#C51162,color:white style W fill:#6200EA,color:white style AA fill:#009688,color:white style AE fill:#FF9800,color:white

💳 Payment Flow Sequence Diagram

sequenceDiagram participant C as 1. 👤 Customer participant F as 2. 🌐 Frontend participant API as 3. 🚪 Internal API participant SEC as 4. 🗝️ Secrets Manager participant DB as 5. 🗄️ Database participant NP as 6. 💳 NicePay participant WH as 7. 📡 Webhook Handler participant NOTIFY as 8. 📢 Notification System participant BANK as 9. 🏦 Bank Network Note over C, SEC: PHASE 1: AUTHENTICATION C->>F: 1.1 Login Request F->>API: 1.2 Send Credentials API->>SEC: 1.3 Request JWT Secret SEC-->>API: 1.4 Return JWT Key API->>API: 1.5 Generate JWT Token API-->>F: 1.6 Return Auth Token F-->>C: 1.7 Login Success Note over C, SEC: PHASE 2: PAYMENT INITIATION C->>F: 2.1 Initiate Payment F->>API: 2.2 Payment Request + JWT API->>API: 2.3 Validate Request API->>SEC: 2.4 Get Payment API Keys SEC-->>API: 2.5 Return Payment Keys API->>NP: 2.6 Create Payment NP->>BANK: 2.7 Process Transaction BANK-->>NP: 2.8 Authorization Note over NP, WH: PHASE 3: WEBHOOK PROCESSING NP->>WH: 3.1 Payment Webhook WH->>SEC: 3.2 Validate Webhook Secret SEC-->>WH: 3.3 Signature Valid WH->>DB: 3.4 Store Webhook Event DB-->>WH: 3.5 Store Confirmed WH->>API: 3.6 Update Payment Status NP-->>API: 3.7 Payment Result API->>DB: 3.8 Record Transaction DB-->>API: 3.9 Confirm Save API-->>F: 3.10 Payment Status F-->>C: 3.11 Payment Complete NOTIFY-->>C: 3.12 Confirmation Notification

🪙 Coinbase Commerce Crypto Payment Flow

sequenceDiagram participant C as 1. 👤 Customer participant F as 2. 🌐 Frontend participant API as 3. 🚪 Internal API participant CB as 4. 🪙 Coinbase Commerce participant WH as 5. 📡 Webhook Handler participant BC as 6. ⛓️ Blockchain participant NOTIFY as 7. 📢 Notification System Note over C, CB: PHASE 1: PAYMENT INITIATION C->>F: 1.1 Select Crypto Payment F->>API: 1.2 Create Payment Request API->>CB: 1.3 Create Charge CB->>CB: 1.4 Generate Crypto Addresses CB-->>API: 1.5 Payment Details API->>F: 1.6 Show Payment Instructions F-->>C: 1.7 Display Crypto Addresses Note over C, BC: PHASE 2: BLOCKCHAIN TRANSACTION C->>BC: 2.1 Send Crypto BC->>BC: 2.2 Validate Transaction BC-->>CB: 2.3 Blockchain Confirmation CB->>CB: 2.4 Detect Payment Note over CB, WH: PHASE 3: WEBHOOK & CONFIRMATION CB->>WH: 3.1 Payment Webhook WH->>WH: 3.2 Verify Signature & Amount WH->>API: 3.3 Payment Confirmed API->>NOTIFY: 3.4 Send Confirmation NOTIFY-->>C: 3.5 Success Notification Note over API, BC: PHASE 4: ON-CHAIN VERIFICATION API->>BC: 4.1 Verify Transaction BC-->>API: 4.2 TX Details API->>API: 4.3 Finalize Payment

🚀 Deployed Automatically via Netlify | 📧 Contact: admin@company.com