# Wise Payment Integration - Frontend Updates

## Overview
Updated the KSA-ORACLE project's cardSelection component to support both Stripe and Wise payment methods, matching the implementation in the oracle project.

## Changes Made

### 1. **cardSelection.vue** (`resources/js/pages/cards/cardSelection.vue`)

#### Added Wise Payment Support
- Updated `handleSelection()` function to accept a `provider` parameter (`'stripe' | 'wise'`)
- Added new `redirectToWisePayment()` function that:
  - Creates a payment record via `/create-wise-payment` endpoint
  - Stores the `clientSessionId` in sessionStorage
  - Redirects to the Wise payment link

#### Updated UI
- Changed single payment buttons to dual payment buttons for 6-card and 18-card options
- **6-card option (9.99 €)**: Now shows two buttons side-by-side:
  - "Stripe" button (outlined style)
  - "Wise" button (filled style)
- **18-card option (99€)**: Now shows two buttons side-by-side:
  - "Stripe" button (outlined style)
  - "Wise" button (filled style)

### 2. **WiseController.php** (`app/Http/Controllers/WiseController.php`)

Added complete Wise payment controller with:
- `createPaymentSession()` - Creates payment records and returns Wise payment links
- `handleWebhook()` - Processes Wise webhook notifications
- `validatePayment()` - Manual payment validation for redirect flow
- Webhook signature verification
- Support for different Wise event types

Configuration:
- Uses environment variables for payment links per draw count
- Stores payments with `payment_provider = 'wise'`
- Tracks payments via `client_session_id` and `wise_session_id`

### 3. **Routes** (`routes/web.php`)

Added new Wise payment routes:
```php
Route::post('/create-wise-payment', [WiseController::class, 'createPaymentSession']);
Route::post('/wise/webhook', [WiseController::class, 'handleWebhook']);
Route::get('/wise/validate-payment', [WiseController::class, 'validatePayment']);
Route::get('/wise/verify', function () {
    return Inertia::render('wise/VerifyPayment');
})->name('wise.verify');
```

Updated `/success` route to:
- Check for pending Wise payments
- Redirect to Pending page if payment is still processing
- Pass `paymentProvider` prop to success page

### 4. **Frontend Views**

Added new Vue components:
- **Pending.vue** (`resources/js/pages/payments/Pending.vue`)
  - Shows "Payment is being processed" message
  - Polls payment status for Wise payments
  - Auto-redirects when payment succeeds

- **VerifyPayment.vue** (`resources/js/pages/wise/VerifyPayment.vue`)
  - Manual payment verification page
  - Allows users to check payment status

### 5. **TypeScript Actions**

Added **WiseController.ts** (`resources/js/actions/App/Http/Controllers/WiseController.ts`)
- Type-safe route helpers for Wise endpoints
- Auto-generated from Laravel routes

## Environment Configuration

Add these variables to your `.env` file:

```bash
# Wise Payment Links (Simplified Integration)
WISE_PAYMENT_LINK_6_CARDS=https://wise.com/pay/r/YOUR_6_CARDS_LINK
WISE_PAYMENT_LINK_18_CARDS=https://wise.com/pay/r/YOUR_18_CARDS_LINK

# Wise Webhook Configuration
WISE_WEBHOOK_SECRET=your_webhook_secret_here
```

## User Experience Flow

### Stripe Flow (unchanged)
1. User clicks "Stripe" button
2. Backend creates Stripe checkout session
3. User redirects to Stripe checkout page
4. After payment, redirects back to `/success`

### Wise Flow (new)
1. User clicks "Wise" button
2. Backend creates payment record with `status='pending'`
3. Returns Wise payment link URL
4. Frontend stores `client_session_id` in sessionStorage
5. User redirects to Wise payment page
6. After payment on Wise, user returns to `/success`
7. If payment still pending, shows Pending page
8. Pending page polls backend until payment confirmed via webhook
9. When confirmed, redirects to success page

## Webhook Setup

To receive payment confirmations:

1. Go to https://wise.com/settings/webhooks
2. Create a new webhook
3. Set URL to: `https://yourdomain.com/wise/webhook`
4. Select event types:
   - `transfer_state_change`
   - `balance_credit`
5. Copy the webhook secret to your `.env` file as `WISE_WEBHOOK_SECRET`

## Testing

To test the integration:

1. Configure test payment links in `.env`
2. Start the development server
3. Navigate to the card selection page
4. Click "Wise" button for either 6 or 18 cards
5. Complete payment on Wise
6. Verify redirect back to success page

## Payment Links Configuration

Get your Wise payment links:

1. Log into your Wise business account
2. Go to "Request payment" or "Payment Links"
3. Create payment links for:
   - 9.99 EUR (6 cards)
   - 15.90 EUR (18 cards) - *Update this value based on your pricing*
4. Copy the links and add to `.env`

## Database Fields Used

The following Payment model fields are used for Wise:
- `payment_provider` = 'wise'
- `wise_session_id` - Unique session identifier
- `client_session_id` - Client-side tracking ID
- `wise_payment_id` - Wise transaction ID (from webhook)
- `status` - Payment status (pending, succeeded, failed, etc.)
- `amount` - Payment amount
- `currency` - Payment currency (EUR)
- `draw_count` - Number of cards (6 or 18)

---

**Integration Status**: ✅ Complete
**Last Updated**: October 14, 2025
**Project**: KSA-ORACLE (/media/creator/6226b912-8ba7-45dc-88a2-4b10d3dd1655/kandra/successkey/KSA-ORACLE)