admin/zemailnator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(payment): implement beautiful payment confirmation page with real-time status checking

Browse Source 
- 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
This commit is contained in:
idevakk
2025-12-04 11:59:09 -08:00
parent 75086ad83b
commit 8950988eac
7 changed files with 781 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
resources/views/livewire/payment-confirmation.blade.php Normal file
View File

@@ -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>

131
resources/views/payment/success.blade.php Normal file
View File

@@ -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>