feat(payment): lightweight Stripe popup with postMessage credentials

Create StripePopupView.vue - a standalone minimal page (no AppLayout)
that receives clientSecret/publishableKey via postMessage from parent:
- Alipay: auto-calls confirmAlipayPayment(), shows "正在跳转..."
- WeChat: calls confirmWechatPayPayment(), shows QR code inline
- Much faster than loading full StripePaymentView (no API calls needed)

frontend/src/components/payment/StripePaymentInline.vue

@@ -120,18 +120,31 @@ onUnmounted(() => {
 async function handlePay() {
   if (!stripeInstance || !elementsInstance || submitting.value) return
 
-  // For popup-based methods (Alipay redirect / WeChat QR): open popup with direct confirm
+  // For popup-based methods (Alipay redirect / WeChat QR): open lightweight popup
   if (POPUP_METHODS.has(selectedType.value)) {
-    const stripeUrl = router.resolve({
-      path: '/payment/stripe',
+    const popupUrl = router.resolve({
+      path: '/payment/stripe-popup',
       query: {
         order_id: String(props.orderId),
-        client_secret: props.clientSecret,
         method: selectedType.value,
+        amount: String(props.payAmount),
       },
     }).href
-    window.open(stripeUrl, 'paymentPopup', STRIPE_POPUP_WINDOW_FEATURES)
-    emit('redirect', props.orderId, stripeUrl)
+    const popup = window.open(popupUrl, 'paymentPopup', STRIPE_POPUP_WINDOW_FEATURES)
+
+    // Wait for popup ready, then send credentials via postMessage
+    const onReady = (event: MessageEvent) => {
+      if (event.source !== popup || event.data?.type !== 'STRIPE_POPUP_READY') return
+      window.removeEventListener('message', onReady)
+      popup?.postMessage({
+        type: 'STRIPE_POPUP_INIT',
+        clientSecret: props.clientSecret,
+        publishableKey: props.publishableKey,
+      }, window.location.origin)
+    }
+    window.addEventListener('message', onReady)
+
+    emit('redirect', props.orderId, popupUrl)
     return
   }
 

frontend/src/i18n/locales/en.ts

@@ -5164,6 +5164,12 @@ export default {
     },
     stripePay: 'Pay Now',
     stripeSuccessProcessing: 'Payment successful, processing your order...',
+    stripePopup: {
+      redirecting: 'Redirecting to payment page...',
+      loadingQr: 'Loading WeChat Pay QR code...',
+      timeout: 'Timed out waiting for payment credentials, please retry',
+      qrFailed: 'Failed to get WeChat Pay QR code',
+    },
     subscribeNow: 'Subscribe Now',
     planFeatures: 'Features',
     planCard: {

frontend/src/i18n/locales/zh.ts

@@ -5361,6 +5361,12 @@ export default {
     },
     stripePay: '立即支付',
     stripeSuccessProcessing: '支付成功，正在处理订单...',
+    stripePopup: {
+      redirecting: '正在跳转到支付页面...',
+      loadingQr: '正在获取微信支付二维码...',
+      timeout: '等待支付凭证超时，请重试',
+      qrFailed: '未能获取微信支付二维码',
+    },
     subscribeNow: '立即开通',
     planFeatures: '功能特性',
     planCard: {

frontend/src/router/index.ts

@@ -250,6 +250,17 @@ const routes: RouteRecordRaw[] = [
       requiresPayment: true
     }
   },
+  {
+    path: '/payment/stripe-popup',
+    name: 'StripePopup',
+    component: () => import('@/views/user/StripePopupView.vue'),
+    meta: {
+      requiresAuth: true,
+      requiresAdmin: false,
+      title: 'Payment',
+      requiresPayment: true
+    }
+  },
   {
     path: '/custom/:id',
     name: 'CustomPage',

frontend/src/views/user/StripePopupView.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-gray-50 p-4 dark:bg-dark-900">
+    <div class="w-full max-w-sm space-y-4">
+      <div class="card overflow-hidden text-center">
+        <!-- Amount -->
+        <div v-if="amount" class="bg-gradient-to-br from-[#635bff] to-[#4f46e5] px-6 py-5">
+          <p class="text-3xl font-bold text-white">&yen;{{ amount }}</p>
+          <p v-if="orderId" class="mt-1 text-xs text-indigo-200">{{ t('payment.orders.orderId') }}: {{ orderId }}</p>
+        </div>
+        <!-- Status -->
+        <div class="p-6">
+          <!-- 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-800 dark:bg-red-900/30 dark:text-red-400">
+              {{ error }}
+            </div>
+            <button class="text-sm text-gray-500 underline dark:text-gray-400" @click="closeWindow">{{ t('common.close') }}</button>
+          </div>
+          <!-- WeChat QR -->
+          <div v-else-if="wechatQrUrl" class="space-y-3">
+            <img :src="wechatQrUrl" alt="WeChat QR" class="mx-auto h-56 w-56 rounded-lg" />
+            <p class="text-xs text-gray-400 dark:text-gray-500">{{ t('payment.qr.scanWxpayHint') }}</p>
+          </div>
+          <!-- Success -->
+          <div v-else-if="success" class="space-y-2 py-2">
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+              <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+            </div>
+            <p class="text-sm font-medium text-green-600 dark:text-green-400">{{ t('payment.result.success') }}</p>
+          </div>
+          <!-- Loading / Redirecting -->
+          <div v-else class="flex items-center justify-center gap-3 py-4">
+            <div class="h-6 w-6 animate-spin rounded-full border-3 border-gray-200 border-t-[#635bff] dark:border-dark-600 dark:border-t-[#818cf8]"></div>
+            <span class="text-sm text-gray-500 dark:text-gray-400">{{ hint }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+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 error = ref('')
+const success = ref(false)
+const wechatQrUrl = ref('')
+const hint = ref(t('payment.stripePopup.redirecting'))
+
+let pollTimer: ReturnType<typeof setInterval> | null = null
+
+function closeWindow() { window.close() }
+
+onMounted(() => {
+  // Listen for credentials from parent
+  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)
+
+  // Signal parent that popup is ready
+  if (window.opener) {
+    window.opener.postMessage({ type: 'STRIPE_POPUP_READY' }, window.location.origin)
+  }
+
+  // Timeout
+  setTimeout(() => {
+    if (!error.value && !wechatQrUrl.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') {
+      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') {
+      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')
+        return
+      }
+      const pi = result.paymentIntent
+      if (pi?.status === 'succeeded') {
+        success.value = true
+        setTimeout(closeWindow, 2000)
+        return
+      }
+      const qrUrl = pi?.next_action?.wechat_pay_display_qr_code?.image_data_url
+      if (qrUrl) {
+        wechatQrUrl.value = qrUrl
+        startPolling()
+      } else {
+        error.value = t('payment.stripePopup.qrFailed')
+      }
+    }
+  } 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
+        wechatQrUrl.value = ''
+        setTimeout(closeWindow, 2000)
+      }
+    } catch { /* ignore */ }
+  }, 3000)
+}
+</script>