158 lines
5.2 KiB
Markdown
158 lines
5.2 KiB
Markdown
# 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)
|