feat(payment): add complete payment system with multi-provider support
Add a full payment and subscription system supporting EasyPay (Alipay/WeChat), Stripe, and direct Alipay/WeChat Pay providers with multi-instance load balancing.
This commit is contained in:
erio
164
frontend/src/views/user/StripePopupView.vue
Normal file
164
frontend/src/views/user/StripePopupView.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen items-center justify-center bg-slate-50 p-4 dark:bg-slate-950">
|
||||
<div
|
||||
class="w-full max-w-md space-y-4 rounded-2xl border border-slate-200 bg-white p-6 shadow-lg dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<!-- Amount + Order ID -->
|
||||
<div v-if="amount" class="text-center">
|
||||
<p class="text-3xl font-bold" :style="{ color: methodColor }">¥{{ amount }}</p>
|
||||
<p v-if="orderId" class="mt-1 text-sm text-gray-500 dark:text-slate-400">
|
||||
{{ t('payment.orders.orderId') }}: {{ orderId }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-if="error" class="space-y-3">
|
||||
<div
|
||||
class="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400"
|
||||
>
|
||||
{{ error }}
|
||||
</div>
|
||||
<button
|
||||
class="w-full text-sm underline dark:text-blue-400 dark:hover:text-blue-300"
|
||||
:style="{ color: methodColor }"
|
||||
@click="closeWindow"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Success -->
|
||||
<div v-else-if="success" class="space-y-3 py-4 text-center">
|
||||
<div class="text-5xl text-green-600 dark:text-green-400">✓</div>
|
||||
<p class="text-sm text-gray-500 dark:text-slate-400">{{ t('payment.result.success') }}</p>
|
||||
<button
|
||||
class="text-sm underline dark:text-blue-400 dark:hover:text-blue-300"
|
||||
:style="{ color: methodColor }"
|
||||
@click="closeWindow"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading / Redirecting -->
|
||||
<div v-else class="flex items-center justify-center py-8">
|
||||
<div
|
||||
class="h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
|
||||
:style="{ borderColor: methodColor, borderTopColor: 'transparent' }"
|
||||
/>
|
||||
<span class="ml-3 text-sm text-gray-500 dark:text-slate-400">{{ hint }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const METHOD_COLORS: Record<string, string> = {
|
||||
alipay: '#00AEEF',
|
||||
wechat_pay: '#07C160',
|
||||
}
|
||||
const DEFAULT_METHOD_COLOR = '#635bff'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const orderId = String(route.query.order_id || '')
|
||||
const method = String(route.query.method || 'alipay')
|
||||
const amount = String(route.query.amount || '')
|
||||
|
||||
const methodColor = computed(() => METHOD_COLORS[method] || DEFAULT_METHOD_COLOR)
|
||||
|
||||
const error = ref('')
|
||||
const success = ref(false)
|
||||
const hint = ref(t('payment.stripePopup.redirecting'))
|
||||
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function closeWindow() { window.close() }
|
||||
|
||||
onMounted(() => {
|
||||
const handler = (event: MessageEvent) => {
|
||||
if (event.origin !== window.location.origin) return
|
||||
if (event.data?.type !== 'STRIPE_POPUP_INIT') return
|
||||
window.removeEventListener('message', handler)
|
||||
initStripe(event.data.clientSecret, event.data.publishableKey)
|
||||
}
|
||||
window.addEventListener('message', handler)
|
||||
|
||||
if (window.opener) {
|
||||
window.opener.postMessage({ type: 'STRIPE_POPUP_READY' }, window.location.origin)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (!error.value && !success.value) {
|
||||
error.value = t('payment.stripePopup.timeout')
|
||||
}
|
||||
}, 15000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
})
|
||||
|
||||
async function initStripe(clientSecret: string, publishableKey: string) {
|
||||
if (!clientSecret || !publishableKey) {
|
||||
error.value = t('payment.stripeMissingParams')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const { loadStripe } = await import('@stripe/stripe-js')
|
||||
const stripe = await loadStripe(publishableKey)
|
||||
if (!stripe) { error.value = t('payment.stripeLoadFailed'); return }
|
||||
|
||||
const returnUrl = window.location.origin + '/payment/result?order_id=' + orderId + '&status=success'
|
||||
|
||||
if (method === 'alipay') {
|
||||
// Alipay: redirect this popup to Alipay payment page
|
||||
const { error: err } = await stripe.confirmAlipayPayment(clientSecret, { return_url: returnUrl })
|
||||
if (err) error.value = err.message || t('payment.result.failed')
|
||||
} else if (method === 'wechat_pay') {
|
||||
// WeChat: Stripe shows its built-in QR dialog, user scans, promise resolves
|
||||
hint.value = t('payment.stripePopup.loadingQr')
|
||||
const result = await (stripe as any).confirmWechatPayPayment(clientSecret, {
|
||||
payment_method_options: { wechat_pay: { client: 'web' } },
|
||||
})
|
||||
if (result.error) {
|
||||
error.value = result.error.message || t('payment.result.failed')
|
||||
} else if (result.paymentIntent?.status === 'succeeded') {
|
||||
success.value = true
|
||||
setTimeout(closeWindow, 2000)
|
||||
} else {
|
||||
// Payment not completed (user closed QR dialog)
|
||||
startPolling()
|
||||
}
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : t('payment.stripeLoadFailed')
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
const token = document.cookie.split('; ').find(c => c.startsWith('token='))?.split('=')[1]
|
||||
|| localStorage.getItem('token') || ''
|
||||
const res = await fetch('/api/v1/payment/orders/' + orderId, {
|
||||
headers: token ? { Authorization: 'Bearer ' + token } : {},
|
||||
credentials: 'include',
|
||||
})
|
||||
if (!res.ok) return
|
||||
const data = await res.json()
|
||||
const status = data?.data?.status
|
||||
if (status === 'COMPLETED' || status === 'PAID') {
|
||||
if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
|
||||
success.value = true
|
||||
setTimeout(closeWindow, 2000)
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user