19 KiB
19 KiB
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.