KSA-ORACLE-ALLACCESSKEYS/WISE_INTEGRATION_UPDATES.md

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:

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:

# 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)