# Wise Payment Integration - Flow Diagram ## Complete User Journey ``` ┌─────────────────────────────────────────────────────────────────┐ │ User Visits Card Selection │ │ (cardSelection.vue) │ └──────────────────────────┬──────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ Three Options Displayed: │ │ │ │ ┌──────────────┐ ┌─────────────────┐ ┌──────────────────┐ │ │ │ Free Draw │ │ Profilage (6) │ │ Quadrige (18) │ │ │ │ Gratuit │ │ 9.99€ │ │ 15.90€ │ │ │ │ │ │ [Stripe][Wise] │ │ [Stripe][Wise] │ │ │ └──────┬───────┘ └────────┬────────┘ └────────┬─────────┘ │ └─────────┼──────────────────┼────────────────────┼──────────────┘ │ │ │ │ (Free) │ (Paid) │ (Paid) │ │ │ ▼ ▼ ▼ Proceed to Click "Wise" Click "Wise" Card Drawing Button Button │ │ │ │ └────────┬───────────┘ │ │ │ ▼ │ ┌────────────────────────────────┐ │ │ POST /create-wise-payment │ │ │ WiseController::create...() │ │ └────────────┬───────────────────┘ │ │ │ ▼ │ ┌────────────────────────────────┐ │ │ Wise API Calls: │ │ │ 1. Create Quote │ │ │ 2. Create Recipient │ │ │ 3. Create Transfer │ │ └────────────┬───────────────────┘ │ │ │ ▼ │ ┌────────────────────────────────┐ │ │ Save to Database: │ │ │ - payment_provider: 'wise' │ │ │ - status: 'pending' │ │ │ - wise_payment_id: 12345 │ │ │ - client_session_id: UUID │ │ └────────────┬───────────────────┘ │ │ │ ▼ │ ┌────────────────────────────────┐ │ │ Redirect User to: │ │ │ Wise Payment Page │ │ │ (or Pending page) │ │ └────────────┬───────────────────┘ │ │ │ ┌───────────┴───────────┐ │ │ │ │ ▼ ▼ │ User Completes User on Pending │ Payment on Wise Page (polls status) │ │ │ │ │ │ (auto-refresh │ │ │ every 10s) │ │ │ │ ▼ │ │ ┌──────────────────┐ │ │ │ Wise Processes │ │ │ │ Payment │ │ │ └─────────┬────────┘ │ │ │ │ │ ▼ │ │ ┌──────────────────┐ │ │ │ POST /wise/ │ │ │ │ webhook │ │ │ │ (from Wise) │ │ │ └─────────┬────────┘ │ │ │ │ │ ▼ │ │ ┌──────────────────────────┐ │ │ │ WiseController:: │ │ │ │ handleWebhook() │ │ │ │ 1. Verify signature │ │ │ │ 2. Check event type │ │ │ │ 3. Update payment │ │ │ └─────────┬────────────────┘ │ │ │ │ │ ▼ │ │ ┌──────────────────────────┐ │ │ │ Database Update: │ │ │ │ status: 'succeeded' │ │ │ └─────────┬────────────────┘ │ │ │ │ │ │◄───────────────────┘ │ │ (polling detects │ │ success) │ │ │ ▼ │ ┌──────────────────────────┐ │ │ Redirect to: │ │ │ /success?client_ │ │ │ session_id=UUID │ │ └─────────┬────────────────┘ │ │ └──────────────┴───────────────────────┐ │ ┌────────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ Success Page │ │ 1. Validates payment status │ │ 2. Shows success message │ │ 3. Enables "Proceed to Cards" button │ └────────────┬───────────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ User Can Now Draw Cards! │ │ - Access granted based on payment │ │ - Cards drawn from database │ │ - Results displayed │ └────────────────────────────────────────┘ ``` ## Payment States ``` ┌──────────┐ Payment Created ┌──────────┐ │ │─────────────────────▶ │ │ │ NEW │ │ PENDING │ │ │ │ │ └──────────┘ └────┬─────┘ │ ┌───────────────────┼───────────────────┐ │ │ │ Webhook: │ Webhook: │ Webhook: │ Success │ Refund │ Failed │ │ │ │ ▼ ▼ ▼ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │SUCCEEDED │ │ REFUNDED │ │ FAILED │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ ▼ ┌─────────────────────┐ │ User Can Draw │ │ Cards │ └─────────────────────┘ ``` ## Key Components Interaction ``` ┌─────────────────────────────────────────────────────────────────┐ │ Frontend (Vue.js) │ │ │ │ ┌────────────────┐ ┌───────────────┐ ┌─────────────────┐ │ │ │ cardSelection │ │ Pending.vue │ │ Success.vue │ │ │ │ .vue │──▶│ (auto-refresh)│──▶│ (validate) │ │ │ └────────┬───────┘ └───────────────┘ └─────────────────┘ │ └───────────┼──────────────────────────────────────────────────────┘ │ POST /create-wise-payment ▼ ┌─────────────────────────────────────────────────────────────────┐ │ Backend (Laravel) │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ WiseController │ │ │ │ │ │ │ │ createPaymentSession() ─────▶ Wise API │ │ │ │ handleWebhook() ◀───────────── Wise Webhook │ │ │ │ validatePayment() ──────────▶ Database Query │ │ │ └──────────────┬───────────────────────────────────────────┘ │ │ │ │ │ ▼ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Payment Model │ │ │ │ │ │ │ │ payment_provider: 'wise' │ │ │ │ wise_payment_id: string │ │ │ │ wise_session_id: string │ │ │ │ status: pending|succeeded|failed|refunded │ │ │ │ draw_count: int │ │ │ └──────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ Database (SQLite) │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ payments table │ │ │ │ │ │ │ │ - All payment records with provider tracking │ │ │ │ - Status management │ │ │ │ - Card draw count tracking │ │ │ └──────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ External Service │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Wise API │ │ │ │ │ │ │ │ - Receives payment requests │ │ │ │ - Processes transfers │ │ │ │ - Sends webhooks on status change │ │ │ └──────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ## Security Flow ``` ┌─────────────────────────────────────────────────────────────────┐ │ Webhook Security │ └─────────────────────────────────────────────────────────────────┘ Wise sends webhook: POST /wise/webhook Headers: X-Signature-SHA256: abc123... Body: {"event_type": "transfer_state_change", ...} │ ▼ ┌──────────────────────────┐ │ WiseController │ │ handleWebhook() │ └────────┬─────────────────┘ │ ▼ ┌──────────────────────────┐ │ Verify Signature: │ │ 1. Get payload │ │ 2. Get signature │ │ 3. Calculate HMAC │ │ 4. Compare hashes │ └────────┬─────────────────┘ │ ┌────┴────┐ │ │ Invalid Valid │ │ ▼ ▼ Return Process 400 Event & Update DB ``` ## Error Handling ``` User Action → Try to Draw Cards │ ▼ ┌───────────────────┐ │ Check Payment │ │ Status │ └────────┬──────────┘ │ ┌────────────┼────────────┐ │ │ │ Missing Pending Succeeded │ │ │ ▼ ▼ ▼ Error Pending Allow Page Page Drawing (404) (auto-refresh) ``` --- This diagram shows the complete flow from user selection to successful card drawing, including all the backend components, webhook handling, and state management.