186 lines
8.3 KiB
Vue
186 lines
8.3 KiB
Vue
<script setup lang="ts">
|
|
import { router } from '@inertiajs/vue3';
|
|
import axios from 'axios';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const checking = ref(true);
|
|
const paymentStatus = ref<'pending' | 'succeeded' | 'failed' | null>(null);
|
|
const errorMessage = ref('');
|
|
const clientSessionId = ref('');
|
|
|
|
// Check payment status
|
|
const checkPayment = async () => {
|
|
try {
|
|
// Get client session ID from sessionStorage
|
|
const storedSessionId = sessionStorage.getItem('wise_client_session_id');
|
|
|
|
if (!storedSessionId) {
|
|
errorMessage.value = 'Session non trouvée. Veuillez recommencer le processus de paiement.';
|
|
checking.value = false;
|
|
return;
|
|
}
|
|
|
|
clientSessionId.value = storedSessionId;
|
|
|
|
// Check payment status via API
|
|
const response = await axios.get('/wise/validate-payment', {
|
|
params: { client_session_id: storedSessionId },
|
|
});
|
|
|
|
if (response.data.success) {
|
|
paymentStatus.value = 'succeeded';
|
|
|
|
// Clear session storage
|
|
sessionStorage.removeItem('wise_client_session_id');
|
|
|
|
// Redirect to success page after 2 seconds
|
|
setTimeout(() => {
|
|
window.location.href = `/success?client_session_id=${storedSessionId}`;
|
|
}, 2000);
|
|
} else {
|
|
paymentStatus.value = response.data.status || 'pending';
|
|
errorMessage.value = response.data.message || 'Le paiement est en cours de vérification...';
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Error checking payment:', error);
|
|
paymentStatus.value = 'failed';
|
|
errorMessage.value = error.response?.data?.message || 'Erreur lors de la vérification du paiement.';
|
|
} finally {
|
|
checking.value = false;
|
|
}
|
|
};
|
|
|
|
const retryCheck = () => {
|
|
checking.value = true;
|
|
paymentStatus.value = null;
|
|
errorMessage.value = '';
|
|
setTimeout(checkPayment, 1000);
|
|
};
|
|
|
|
const goHome = () => {
|
|
sessionStorage.removeItem('wise_client_session_id');
|
|
router.visit('/');
|
|
};
|
|
|
|
onMounted(() => {
|
|
// Check payment status after 1 second
|
|
setTimeout(checkPayment, 1000);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-[var(--light-ivory)] via-white to-[var(--linen)] px-4">
|
|
<div class="w-full max-w-md rounded-2xl border border-[var(--linen)] bg-white/90 p-8 shadow-xl backdrop-blur-sm">
|
|
<!-- Loading State -->
|
|
<div v-if="checking" class="text-center">
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="relative h-20 w-20">
|
|
<svg class="animate-spin text-[var(--subtle-gold)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path
|
|
class="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="mb-4 text-2xl font-bold text-[var(--midnight-blue)]">Vérification du paiement...</h1>
|
|
<p class="text-[var(--spiritual-earth)]">Veuillez patienter pendant que nous vérifions votre paiement Wise.</p>
|
|
</div>
|
|
|
|
<!-- Success State -->
|
|
<div v-else-if="paymentStatus === 'succeeded'" class="text-center">
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
|
|
<svg class="h-12 w-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="mb-4 text-2xl font-bold text-green-600">Paiement réussi ! 🎉</h1>
|
|
<p class="text-[var(--spiritual-earth)]">Votre paiement a été confirmé. Vous allez être redirigé vers vos cartes...</p>
|
|
</div>
|
|
|
|
<!-- Pending State -->
|
|
<div v-else-if="paymentStatus === 'pending'" class="text-center">
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100">
|
|
<svg class="h-12 w-12 text-yellow-600" 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" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="mb-4 text-2xl font-bold text-yellow-600">Paiement en cours</h1>
|
|
<p class="mb-6 text-[var(--spiritual-earth)]">
|
|
{{ errorMessage || 'Votre paiement est en cours de traitement. Cela peut prendre quelques minutes.' }}
|
|
</p>
|
|
<div class="flex flex-col gap-3">
|
|
<button
|
|
@click="retryCheck"
|
|
class="w-full rounded-full bg-[var(--subtle-gold)] px-6 py-3 font-semibold text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
|
|
>
|
|
Vérifier à nouveau
|
|
</button>
|
|
<button
|
|
@click="goHome"
|
|
class="w-full rounded-full border-2 border-[var(--midnight-blue)] bg-transparent px-6 py-3 font-semibold text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--midnight-blue)] hover:text-white"
|
|
>
|
|
Retour à l'accueil
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Failed State -->
|
|
<div v-else-if="paymentStatus === 'failed'" class="text-center">
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-red-100">
|
|
<svg class="h-12 w-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="mb-4 text-2xl font-bold text-red-600">Erreur de paiement</h1>
|
|
<p class="mb-6 text-[var(--spiritual-earth)]">
|
|
{{ errorMessage || 'Une erreur est survenue lors de la vérification du paiement.' }}
|
|
</p>
|
|
<div class="flex flex-col gap-3">
|
|
<button
|
|
@click="retryCheck"
|
|
class="w-full rounded-full bg-[var(--subtle-gold)] px-6 py-3 font-semibold text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
|
|
>
|
|
Réessayer
|
|
</button>
|
|
<button
|
|
@click="goHome"
|
|
class="w-full rounded-full border-2 border-[var(--midnight-blue)] bg-transparent px-6 py-3 font-semibold text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--midnight-blue)] hover:text-white"
|
|
>
|
|
Retour à l'accueil
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Session ID Info -->
|
|
<div v-if="clientSessionId && !checking" class="mt-6 rounded-lg bg-gray-50 p-3">
|
|
<p class="text-center text-xs text-gray-600">
|
|
ID de session:
|
|
<br />
|
|
<code class="block font-mono text-[10px] break-all">{{ clientSessionId }}</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
</style>
|