From 8950988eac6545db2b5b4725b1c31a03dfb068a8 Mon Sep 17 00:00:00 2001
From: idevakk <219866223+idevakk@users.noreply.github.com>
Date: Thu, 4 Dec 2025 11:59:09 -0800
Subject: [PATCH] feat(payment): implement beautiful payment confirmation page
 with real-time status checking

   - Add PaymentSuccessController with authentication and subscription selection logic
   - Create PaymentConfirmation Livewire component with polling mechanism
   - Implement real-time subscription status verification via Polar provider API
   - Add confetti animation for successful payment confirmation
   - Design responsive payment success page with dark mode support
   - Fix Polar provider field mapping (updated_at -> modified_at)
   - Add comprehensive error handling and logging
   - Support multiple subscription status states (verifying, activated, pending, error)
   - Implement automatic polling with 30-second intervals (max 5 attempts)
   - Add fallback redirects and user-friendly status messages
---
 .../Controllers/PaymentSuccessController.php  |  64 +++++
 app/Livewire/PaymentConfirmation.php          | 254 +++++++++++++++++
 app/Services/Payments/PaymentOrchestrator.php |  59 ++++
 .../Payments/Providers/PolarProvider.php      |  11 +-
 .../livewire/payment-confirmation.blade.php   | 259 ++++++++++++++++++
 resources/views/payment/success.blade.php     | 131 +++++++++
 routes/payment.php                            |   5 +-
 7 files changed, 781 insertions(+), 2 deletions(-)
 create mode 100644 app/Http/Controllers/PaymentSuccessController.php
 create mode 100644 app/Livewire/PaymentConfirmation.php
 create mode 100644 resources/views/livewire/payment-confirmation.blade.php
 create mode 100644 resources/views/payment/success.blade.php

diff --git a/app/Http/Controllers/PaymentSuccessController.php b/app/Http/Controllers/PaymentSuccessController.php
new file mode 100644
index 0000000..ff88301
--- /dev/null
+++ b/app/Http/Controllers/PaymentSuccessController.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Subscription;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+use Illuminate\View\View;
+
+class PaymentSuccessController extends Controller
+{
+    // Middleware is now registered in bootstrap/app.php for Laravel 12
+
+    /**
+     * Show payment confirmation page after successful checkout
+     */
+    public function show(Request $request): View
+    {
+        $user = $request->user();
+        $sessionToken = $request->get('customer_session_token');
+
+        Log::info('PaymentSuccessController: Showing payment confirmation', [
+            'user_id' => $user->id,
+            'session_token' => $sessionToken,
+        ]);
+
+        // Get the most recent subscription for this user created in the last 15 minutes
+        // This ensures we're checking the subscription from the current payment session
+        $recentMinutes = 15;
+        $subscription = Subscription::where('user_id', $user->id)
+            ->where('created_at', '>=', now()->subMinutes($recentMinutes))
+            ->whereIn('status', ['pending_payment', 'incomplete', 'trialing', 'active']) // Likely statuses for new subscriptions
+            ->orderBy('created_at', 'desc')
+            ->first();
+
+        // If no recent subscription found, fall back to the most recent one overall
+        if (! $subscription) {
+            Log::info('PaymentSuccessController: No recent subscription found, falling back to most recent', [
+                'user_id' => $user->id,
+                'minutes_checked' => $recentMinutes,
+            ]);
+
+            $subscription = Subscription::where('user_id', $user->id)
+                ->orderBy('created_at', 'desc')
+                ->first();
+        }
+
+        Log::info('PaymentSuccessController: Subscription selected for status checking', [
+            'user_id' => $user->id,
+            'subscription_id' => $subscription?->id,
+            'provider_subscription_id' => $subscription?->provider_subscription_id,
+            'provider' => $subscription?->provider,
+            'status' => $subscription?->status,
+            'created_at' => $subscription?->created_at,
+            'is_recent' => $subscription && $subscription->created_at->diffInMinutes(now()) <= $recentMinutes,
+        ]);
+
+        return view('payment.success', [
+            'user' => $user,
+            'subscription' => $subscription,
+            'sessionToken' => $sessionToken,
+        ]);
+    }
+}
diff --git a/app/Livewire/PaymentConfirmation.php b/app/Livewire/PaymentConfirmation.php
new file mode 100644
index 0000000..6aa35f2
--- /dev/null
+++ b/app/Livewire/PaymentConfirmation.php
@@ -0,0 +1,254 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Subscription;
+use App\Services\Payments\PaymentOrchestrator;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Facades\Log;
+use Livewire\Component;
+
+class PaymentConfirmation extends Component
+{
+    public $subscription;
+
+    public $sessionToken;
+
+    public $status = 'verifying';
+
+    public $pollCount = 0;
+
+    public $maxPolls = 5;
+
+    public $showConfetti = false;
+
+    public $errorMessage = null;
+
+    protected $listeners = ['$refresh'];
+
+    public function mount($subscription = null, $sessionToken = null): void
+    {
+        $this->subscription = $subscription;
+        $this->sessionToken = $sessionToken;
+
+        // Validate that we have a subscription to check
+        if (! $this->subscription) {
+            Log::warning('PaymentConfirmation: No subscription provided', [
+                'user_id' => auth()->id(),
+                'session_token' => $sessionToken,
+            ]);
+
+            $this->status = 'error';
+            $this->errorMessage = 'No subscription found for this payment session.';
+
+            return;
+        }
+
+        // Validate subscription belongs to current user
+        if ($this->subscription->user_id !== auth()->id()) {
+            Log::warning('PaymentConfirmation: Subscription does not belong to current user', [
+                'user_id' => auth()->id(),
+                'subscription_user_id' => $this->subscription->user_id,
+                'subscription_id' => $this->subscription->id,
+            ]);
+
+            $this->status = 'error';
+            $this->errorMessage = 'Invalid subscription for this user.';
+
+            return;
+        }
+
+        Log::info('PaymentConfirmation: Mounted with subscription', [
+            'user_id' => auth()->id(),
+            'subscription_id' => $this->subscription->id,
+            'provider' => $this->subscription->provider,
+            'provider_subscription_id' => $this->subscription->provider_subscription_id,
+            'current_status' => $this->subscription->status,
+            'created_at' => $this->subscription->created_at,
+            'minutes_ago' => $this->subscription->created_at->diffInMinutes(now()),
+        ]);
+
+        // Initial status check
+        $this->checkSubscriptionStatus();
+
+        // Debug: If subscription is already active, show confetti immediately
+        if ($this->subscription && $this->subscription->status === 'active') {
+            $this->status = 'activated';
+            $this->showConfetti = true;
+            $this->pollCount = $this->maxPolls;
+
+            Log::info('PaymentConfirmation: Active subscription detected, showing confetti immediately', [
+                'subscription_id' => $this->subscription->id,
+                'status' => $this->subscription->status,
+            ]);
+        }
+    }
+
+    /**
+     * Check subscription status via payment provider
+     */
+    public function checkSubscriptionStatus(): void
+    {
+        if (! $this->subscription || $this->pollCount >= $this->maxPolls) {
+            if ($this->pollCount >= $this->maxPolls) {
+                Log::info('PaymentConfirmation: Max polls reached, redirecting to dashboard', [
+                    'subscription_id' => $this->subscription?->id,
+                    'poll_count' => $this->pollCount,
+                ]);
+
+                $this->redirect(route('dashboard'));
+            }
+
+            return;
+        }
+
+        // Increment poll count first
+        $this->pollCount++;
+
+        try {
+            $orchestrator = app(PaymentOrchestrator::class);
+            $user = auth()->user();
+
+            Log::info('PaymentConfirmation: Checking subscription status', [
+                'subscription_id' => $this->subscription->id,
+                'provider_subscription_id' => $this->subscription->provider_subscription_id,
+                'provider' => $this->subscription->provider,
+                'poll_count' => $this->pollCount,
+            ]);
+
+            // Check status via provider
+            $statusResult = $orchestrator->checkSubscriptionStatus(
+                $user,
+                $this->subscription->provider,
+                $this->subscription->provider_subscription_id
+            );
+
+            if ($statusResult['success']) {
+                $providerStatus = $statusResult['status'];
+
+                Log::info('PaymentConfirmation: Provider status received', [
+                    'provider_status' => $providerStatus,
+                    'subscription_id' => $this->subscription->id,
+                ]);
+
+                // Update local subscription if status changed
+                if ($providerStatus !== $this->subscription->status) {
+                    $this->subscription->status = $providerStatus;
+                    $this->subscription->save();
+
+                    Log::info('PaymentConfirmation: Updated local subscription status', [
+                        'old_status' => $this->subscription->getOriginal('status'),
+                        'new_status' => $providerStatus,
+                    ]);
+                }
+
+                // Check if subscription is now active
+                if ($providerStatus === 'active') {
+                    $this->status = 'activated';
+                    $this->showConfetti = true;
+
+                    // Stop polling when activated
+                    $this->pollCount = $this->maxPolls;
+
+                    Log::info('PaymentConfirmation: Subscription activated successfully', [
+                        'subscription_id' => $this->subscription->id,
+                    ]);
+
+                    return;
+                }
+            }
+
+            // Continue polling if not active and max polls not reached
+            if ($this->pollCount < $this->maxPolls) {
+                $this->status = 'verifying';
+            } else {
+                // Max polls reached, check final status
+                $this->status = in_array($this->subscription->status, ['active', 'trialing'])
+                    ? 'activated'
+                    : 'pending';
+
+                Log::info('PaymentConfirmation: Max polls reached, final status determined', [
+                    'final_status' => $this->status,
+                    'subscription_status' => $this->subscription->status,
+                ]);
+            }
+
+        } catch (\Exception $e) {
+            Log::error('PaymentConfirmation: Error checking subscription status', [
+                'subscription_id' => $this->subscription->id,
+                'error' => $e->getMessage(),
+                'poll_count' => $this->pollCount,
+            ]);
+
+            // Don't immediately set error status, continue trying unless max polls reached
+            if ($this->pollCount >= $this->maxPolls) {
+                $this->errorMessage = 'Unable to verify payment status after multiple attempts. Please check your subscription page.';
+                $this->status = 'error';
+            }
+        }
+    }
+
+    /**
+     * Get polling interval in milliseconds
+     */
+    public function getPollingIntervalProperty(): int
+    {
+        return 30000; // 30 seconds
+    }
+
+    /**
+     * Check if polling should continue
+     */
+    public function getShouldContinuePollingProperty(): bool
+    {
+        return $this->status === 'verifying' && $this->pollCount < $this->maxPolls;
+    }
+
+    /**
+     * Get status display text
+     */
+    public function getStatusTextProperty(): string
+    {
+        return match ($this->status) {
+            'verifying' => 'Verifying your payment...',
+            'activated' => 'Payment successful! Your subscription is now active.',
+            'pending' => 'Payment is being processed. Please check your subscription page.',
+            'error' => 'Unable to verify payment status.',
+            default => 'Checking payment status...',
+        };
+    }
+
+    /**
+     * Get status icon
+     */
+    public function getStatusIconProperty(): string
+    {
+        return match ($this->status) {
+            'verifying' => 'clock',
+            'activated' => 'check-circle',
+            'pending' => 'clock',
+            'error' => 'exclamation-triangle',
+            default => 'clock',
+        };
+    }
+
+    /**
+     * Get status color
+     */
+    public function getStatusColorProperty(): string
+    {
+        return match ($this->status) {
+            'verifying' => 'blue',
+            'activated' => 'green',
+            'pending' => 'yellow',
+            'error' => 'red',
+            default => 'gray',
+        };
+    }
+
+    public function render(): Factory|View
+    {
+        return view('livewire.payment-confirmation');
+    }
+}
diff --git a/app/Services/Payments/PaymentOrchestrator.php b/app/Services/Payments/PaymentOrchestrator.php
index dc96ab2..1de5b95 100644
--- a/app/Services/Payments/PaymentOrchestrator.php
+++ b/app/Services/Payments/PaymentOrchestrator.php
@@ -938,4 +938,63 @@ class PaymentOrchestrator
             'avg_extension_days' => $totalExtensions > 0 ? $totalDaysExtended / $totalExtensions : 0,
         ];
     }
+
+    /**
+     * Check subscription status via provider
+     */
+    public function checkSubscriptionStatus(User $user, string $providerName, string $providerSubscriptionId): array
+    {
+        try {
+            $provider = $this->providerRegistry->get($providerName);
+
+            if (! $provider) {
+                return [
+                    'success' => false,
+                    'error' => "Provider {$providerName} not found",
+                ];
+            }
+
+            if (! $provider->isActive()) {
+                return [
+                    'success' => false,
+                    'error' => "Provider {$providerName} is not active",
+                ];
+            }
+
+            Log::info('PaymentOrchestrator: Checking subscription status', [
+                'user_id' => $user->id,
+                'provider' => $providerName,
+                'provider_subscription_id' => $providerSubscriptionId,
+            ]);
+
+            // Get subscription details from provider
+            $details = $provider->getSubscriptionDetails($providerSubscriptionId);
+
+            if (empty($details)) {
+                return [
+                    'success' => false,
+                    'error' => 'Unable to fetch subscription details from provider',
+                ];
+            }
+
+            return [
+                'success' => true,
+                'status' => $details['status'] ?? 'unknown',
+                'details' => $details,
+            ];
+
+        } catch (Exception $e) {
+            Log::error('PaymentOrchestrator: Error checking subscription status', [
+                'user_id' => $user->id,
+                'provider' => $providerName,
+                'provider_subscription_id' => $providerSubscriptionId,
+                'error' => $e->getMessage(),
+            ]);
+
+            return [
+                'success' => false,
+                'error' => $e->getMessage(),
+            ];
+        }
+    }
 }
diff --git a/app/Services/Payments/Providers/PolarProvider.php b/app/Services/Payments/Providers/PolarProvider.php
index 2b8776e..6670907 100644
--- a/app/Services/Payments/Providers/PolarProvider.php
+++ b/app/Services/Payments/Providers/PolarProvider.php
@@ -461,10 +461,19 @@ class PolarProvider implements PaymentProviderContract
 
             if (! $response->successful()) {
                 Log::error('Failed to retrieve Polar subscription: '.$response->body());
+                throw new \Exception('Polar subscription not found: '.$response->status());
             }
 
             $polarSubscription = $response->json();
 
+            if (! $polarSubscription || ! isset($polarSubscription['id'])) {
+                Log::error('Invalid Polar subscription response', [
+                    'subscription_id' => $providerSubscriptionId,
+                    'response' => $polarSubscription,
+                ]);
+                throw new \Exception('Invalid Polar subscription response');
+            }
+
             return [
                 'id' => $polarSubscription['id'],
                 'status' => $polarSubscription['status'],
@@ -476,7 +485,7 @@ class PolarProvider implements PaymentProviderContract
                 'trial_start' => $polarSubscription['trial_start'] ?? null,
                 'trial_end' => $polarSubscription['trial_end'] ?? null,
                 'created_at' => $polarSubscription['created_at'],
-                'updated_at' => $polarSubscription['updated_at'],
+                'updated_at' => $polarSubscription['modified_at'] ?? null,
             ];
 
         } catch (\Exception $e) {
diff --git a/resources/views/livewire/payment-confirmation.blade.php b/resources/views/livewire/payment-confirmation.blade.php
new file mode 100644
index 0000000..44adb5e
--- /dev/null
+++ b/resources/views/livewire/payment-confirmation.blade.php
@@ -0,0 +1,259 @@
+<div>
+    <!-- Status Display -->
+    <div class="mb-8"></div>
+
+    <!-- Verifying Status -->
+    @if ($status === 'verifying')
+        <div class="text-center">
+            <div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4">
+                <svg class="w-10 h-10 text-blue-600 dark:text-blue-400 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+            </div>
+
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                {{ $this->statusText }}
+            </h2>
+
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
+                We're confirming your payment with the provider. This usually takes a few seconds.
+            </p>
+
+            <!-- Progress Indicator -->
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
+                <div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
+                <div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
+            </div>
+
+            <p class="text-sm text-gray-500 dark:text-gray-500">
+                Check {{ $pollCount }} of {{ $maxPolls }} • Retrying in 30 seconds...
+            </p>
+        </div>
+    @endif
+
+    <!-- Activated Status -->
+    @if ($status === 'activated')
+        <div class="text-center">
+            <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 dark:bg-green-900/20 rounded-full mb-4 success-glow">
+                <svg class="w-10 h-10 text-green-600 dark:text-green-400 animate-pulse-scale" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+            </div>
+
+            <h2 class="text-2xl font-bold text-green-600 dark:text-green-400 mb-2">
+                {{ $this->statusText }}
+            </h2>
+
+            <p class="text-gray-600 dark:text-gray-400 mb-6">
+                Your subscription is now active and you have access to all premium features!
+            </p>
+
+            <!-- Action Buttons -->
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="{{ route('dashboard') }}"
+                   class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Go to Dashboard
+                </a>
+
+                <a href="{{ route('dashboard') }}"
+                   class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    View Subscription
+                </a>
+            </div>
+        </div>
+    @endif
+
+    <!-- Pending Status -->
+    @if ($status === 'pending')
+        <div class="text-center">
+            <div class="inline-flex items-center justify-center w-20 h-20 bg-yellow-100 dark:bg-yellow-900/20 rounded-full mb-4">
+                <svg class="w-10 h-10 text-yellow-600 dark:text-yellow-400 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+            </div>
+
+            <h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mb-2">
+                {{ $this->statusText }}
+            </h2>
+
+            <p class="text-gray-600 dark:text-gray-400 mb-6">
+                Your payment is being processed. You'll receive an email once your subscription is active.
+            </p>
+
+            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
+                <div class="flex items-center">
+                    <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <p class="text-sm text-yellow-800 dark:text-yellow-200">
+                        This can take a few minutes. You can check your subscription status from the dashboard.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Action Button -->
+            <div class="flex justify-center">
+                <a href="{{ route('dashboard') }}"
+                   class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+                    </svg>
+                    Continue to Dashboard
+                </a>
+            </div>
+        </div>
+    @endif
+
+    <!-- Error Status -->
+    @if ($status === 'error')
+        <div class="text-center">
+            <div class="inline-flex items-center justify-center w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-full mb-4">
+                <svg class="w-10 h-10 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
+                </svg>
+            </div>
+
+            <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">
+                {{ $this->statusText }}
+            </h2>
+
+            @if ($errorMessage)
+                <p class="text-gray-600 dark:text-gray-400 mb-6">{{ $errorMessage }}</p>
+            @endif
+
+            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+                <div class="flex items-center">
+                    <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <p class="text-sm text-red-800 dark:text-red-200">
+                        If you continue to see this message, please contact our support team.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button wire:click="checkSubscriptionStatus"
+                        class="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-all duration-200">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                    </svg>
+                    Try Again
+                </button>
+
+                <a href="{{ route('dashboard') }}"
+                   class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
+    @endif
+
+    <!-- Subscription Details (if available) -->
+    @if ($subscription)
+        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6 mt-8">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Subscription Details</h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Subscription ID</p>
+                    <p class="font-mono text-sm">{{ $subscription->provider_subscription_id }}</p>
+                </div>
+
+                <div>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Provider</p>
+                    <p class="font-medium">{{ ucfirst($subscription->provider) }}</p>
+                </div>
+
+                <div>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Status</p>
+                    <div class="mt-1">
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+                              @if ($status === 'activated')
+                                  bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400
+                              @else
+                                  bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400
+                              @endif">
+                            {{ ucfirst($subscription->status) }}
+                        </span>
+                    </div>
+                </div>
+
+                <div>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Created</p>
+                    <p class="font-medium">{{ $subscription->created_at->format('M j, Y H:i') }}</p>
+                </div>
+            </div>
+        </div>
+    @endif
+
+    <!-- Polling Indicator - temporarily disabled -->
+    @if ($this->shouldContinuePolling)
+        <!-- <div wire:poll.30000ms
+             wire:key="subscription-poll-{{ $subscription->id ?? 'none' }}-{{ $pollCount }}">
+        </div> -->
+    @endif
+</div>
+
+<!-- Confetti Script -->
+<script>
+    @if ($showConfetti)
+        console.log('Confetti should be shown - showConfetti is true');
+
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, starting confetti');
+
+            // Check if confetti function is available
+            if (typeof confetti === 'function') {
+                console.log('Confetti function is available');
+
+                // Create confetti effect
+                var duration = 3000;
+                var animationEnd = Date.now() + duration;
+                var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+                function randomInRange(min, max) {
+                    return Math.random() * (max - min) + min;
+                }
+
+                var interval = setInterval(function() {
+                    var timeLeft = animationEnd - Date.now();
+
+                    if (timeLeft <= 0) {
+                        return clearInterval(interval);
+                    }
+
+                    var particleCount = 50 * (timeLeft / duration);
+
+                    // Create two bursts for better effect
+                    confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
+                    confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
+                }, 250);
+
+                // Additional celebration burst after 1 second
+                setTimeout(function() {
+                    confetti({
+                        particleCount: 100,
+                        spread: 70,
+                        origin: { y: 0.6 }
+                    });
+                }, 1000);
+            } else {
+                console.error('Confetti function is not available');
+            }
+        });
+    @else
+        console.log('Confetti should NOT be shown - showConfetti is false');
+    @endif
+</script>
\ No newline at end of file
diff --git a/resources/views/payment/success.blade.php b/resources/views/payment/success.blade.php
new file mode 100644
index 0000000..c838875
--- /dev/null
+++ b/resources/views/payment/success.blade.php
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Payment Confirmation - {{ config('app.name') }}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js?v=20251204"></script>
+    <script>
+        // Initialize dark mode detection
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    </script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+    <!-- Navigation Header -->
+    <header class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
+        <div class="container mx-auto px-4">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center gap-3">
+                    <div class="flex items-center gap-2">
+                        <div class="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
+                            <span class="text-white font-bold text-sm">Z</span>
+                        </div>
+                        <h1 class="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                            Zemailnator
+                        </h1>
+                    </div>
+                </div>
+                <a href="{{ route('dashboard') }}"
+                   class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+                    </svg>
+                    Back to Dashboard
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex items-center justify-center min-h-[calc(100vh-4rem)] p-4">
+        <div class="w-full max-w-2xl">
+            <!-- Payment Status Card -->
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden">
+                <!-- Success Header -->
+                <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-8 text-center">
+                    <div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-full mb-4">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </div>
+                    <h2 class="text-2xl font-bold text-white mb-2">
+                        Payment Received
+                    </h2>
+                    <p class="text-blue-100 text-lg">
+                        Thank you for your subscription! We're confirming your payment status.
+                    </p>
+                </div>
+
+                <!-- Livewire Component -->
+                <div class="p-8">
+                    @livewire('payment-confirmation', [
+                        'subscription' => $subscription,
+                        'sessionToken' => $sessionToken
+                    ])
+                </div>
+            </div>
+
+            <!-- Info Section -->
+            <div class="mt-6 text-center">
+                <div class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg">
+                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                        Session: {{ $sessionToken ? substr($sessionToken, 0, 20) . '...' : 'Not provided' }}
+                    </span>
+                </div>
+            </div>
+
+            <!-- Footer Links -->
+            <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="{{ route('dashboard') }}"
+                   class="inline-flex items-center gap-2 px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Dashboard
+                </a>
+
+                <a href="{{ route('mailbox') }}"
+                   class="inline-flex items-center gap-2 px-6 py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                    </svg>
+                    Inbox
+                </a>
+            </div>
+        </div>
+    </main>
+
+    <!-- Custom Styles -->
+    <style>
+        @keyframes pulse-scale {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        @keyframes spin-slow {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .animate-pulse-scale {
+            animation: pulse-scale 2s ease-in-out infinite;
+        }
+
+        .animate-spin-slow {
+            animation: spin-slow 3s linear infinite;
+        }
+
+        .success-glow {
+            box-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/routes/payment.php b/routes/payment.php
index b9f5f70..e9c95f8 100644
--- a/routes/payment.php
+++ b/routes/payment.php
@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\PaymentController;
 use App\Http\Controllers\PaymentProviderController;
+use App\Http\Controllers\PaymentSuccessController;
 use App\Http\Controllers\WebhookController;
 use Illuminate\Support\Facades\Route;
 
@@ -12,7 +13,9 @@ use Illuminate\Support\Facades\Route;
 */
 
 Route::prefix('payment')->name('payment.')->group(function () {
-    Route::get('/success', [PaymentController::class, 'success'])->name('success');
+    Route::get('/success', [PaymentSuccessController::class, 'show'])
+        ->middleware(['auth', 'verified'])
+        ->name('success');
     Route::get('/cancel', [PaymentController::class, 'cancel'])->name('cancel');
 
     // UNIFIED: Payment processing endpoints (new unified payment system)