283 lines
19 KiB
Markdown
283 lines
19 KiB
Markdown
# 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.
|