feat(payment): add H5/mobile payment support

Cherry-picked from PR branch (feat/payment-system-v2).
- EasyPay: parse payurl2 for H5 mobile links, prefer on mobile
- EasyPay: add device=mobile for popup mode on mobile
- Backend: expand isMobile() to detect iPad/iPod
- Frontend: auto-redirect on mobile instead of popup
- Frontend: fallback to redirect when popup blocked
- Stripe: use mobile_web client for WeChat Pay on mobile
- StripePopup: typed interface, extractApiErrorMessage

backend/internal/handler/payment_handler.go

@@ -412,5 +412,10 @@ func requireAuth(c *gin.Context) (middleware2.AuthSubject, bool) {
 // isMobile detects mobile user agents.
 func isMobile(c *gin.Context) bool {
 	ua := strings.ToLower(c.GetHeader("User-Agent"))
-	return strings.Contains(ua, "mobile") || strings.Contains(ua, "android") || strings.Contains(ua, "iphone")
+	for _, kw := range []string{"mobile", "android", "iphone", "ipad", "ipod"} {
+		if strings.Contains(ua, kw) {
+			return true
+		}
+	}
+	return false
 }

backend/internal/payment/provider/easypay.go

@@ -81,6 +81,9 @@ func (e *EasyPay) createRedirectPayment(req payment.CreatePaymentRequest) (*paym
 	if cid := e.resolveCID(req.PaymentType); cid != "" {
 		params["cid"] = cid
 	}
+	if req.IsMobile {
+		params["device"] = deviceMobile
+	}
 	params["sign"] = easyPaySign(params, e.config["pkey"])
 	params["sign_type"] = signTypeMD5
 
@@ -120,6 +123,7 @@ func (e *EasyPay) createAPIPayment(ctx context.Context, req payment.CreatePaymen
 		Msg     string `json:"msg"`
 		TradeNo string `json:"trade_no"`
 		PayURL  string `json:"payurl"`
+		PayURL2 string `json:"payurl2"` // H5 mobile payment URL
 		QRCode  string `json:"qrcode"`
 	}
 	if err := json.Unmarshal(body, &resp); err != nil {
@@ -128,7 +132,11 @@ func (e *EasyPay) createAPIPayment(ctx context.Context, req payment.CreatePaymen
 	if resp.Code != easypayCodeSuccess {
 		return nil, fmt.Errorf("easypay error: %s", resp.Msg)
 	}
-	return &payment.CreatePaymentResponse{TradeNo: resp.TradeNo, PayURL: resp.PayURL, QRCode: resp.QRCode}, nil
+	payURL := resp.PayURL
+	if req.IsMobile && resp.PayURL2 != "" {
+		payURL = resp.PayURL2
+	}
+	return &payment.CreatePaymentResponse{TradeNo: resp.TradeNo, PayURL: payURL, QRCode: resp.QRCode}, nil
 }
 
 // resolveURLs returns (notifyURL, returnURL) preferring request values,

frontend/src/utils/device.ts

@@ -0,0 +1,11 @@
+/**
+ * Detect whether the current device is mobile.
+ * Uses navigator.userAgentData (modern API) with UA regex fallback.
+ */
+export function isMobileDevice(): boolean {
+  const nav = navigator as unknown as Record<string, unknown>
+  if (nav.userAgentData && typeof (nav.userAgentData as Record<string, unknown>).mobile === 'boolean') {
+    return (nav.userAgentData as Record<string, unknown>).mobile as boolean
+  }
+  return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
+}

frontend/src/views/user/PaymentView.vue

@@ -263,6 +263,7 @@ import { useSubscriptionStore } from '@/stores/subscriptions'
 import { useAppStore } from '@/stores'
 import { paymentAPI } from '@/api/payment'
 import { extractApiErrorMessage } from '@/utils/apiError'
+import { isMobileDevice } from '@/utils/device'
 import type { SubscriptionPlan, CheckoutInfoResponse } from '@/types/payment'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import AmountInput from '@/components/payment/AmountInput.vue'
@@ -528,7 +529,10 @@ async function createOrder(orderAmount: number, orderType: string, planId?: numb
       plan_id: planId,
     })
     const openWindow = (url: string) => {
-      window.open(url, 'paymentPopup', POPUP_WINDOW_FEATURES)
+      const win = window.open(url, 'paymentPopup', POPUP_WINDOW_FEATURES)
+      if (!win || win.closed) {
+        window.location.href = url
+      }
     }
     if (result.client_secret) {
       // Stripe: show Payment Element inline (user picks method → confirms → redirect if needed)
@@ -539,6 +543,17 @@ async function createOrder(orderAmount: number, orderType: string, planId?: numb
         orderType,
       }
       paymentPhase.value = 'stripe'
+    } else if (isMobileDevice() && result.pay_url) {
+      // Mobile + pay_url: redirect directly instead of QR/popup (mobile browsers block popups)
+      paymentState.value = {
+        orderId: result.order_id, qrCode: '', expiresAt: result.expires_at || '',
+        paymentType: selectedMethod.value, payUrl: result.pay_url,
+        clientSecret: '', payAmount: 0,
+        orderType,
+      }
+      paymentPhase.value = 'paying'
+      window.location.href = result.pay_url
+      return
     } else if (result.qr_code) {
       // QR mode: show QR code inline
       paymentState.value = {

frontend/src/views/user/StripePaymentView.vue

@@ -100,6 +100,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { usePaymentStore } from '@/stores/payment'
 import { paymentAPI } from '@/api/payment'
 import { extractApiErrorMessage } from '@/utils/apiError'
+import { isMobileDevice } from '@/utils/device'
 import type { PaymentOrder } from '@/types/payment'
 import type { Stripe, StripeElements } from '@stripe/stripe-js'
 import AppLayout from '@/components/layout/AppLayout.vue'
@@ -191,7 +192,7 @@ async function confirmWechatPay(stripe: Stripe, clientSecret: string) {
   const { paymentIntent, error } = await (stripe as Stripe & {
     confirmWechatPayPayment: (cs: string, opts: Record<string, unknown>) => Promise<{ paymentIntent?: { status: string; next_action?: { wechat_pay_display_qr_code?: { image_data_url?: string } } }; error?: { message?: string } }>
   }).confirmWechatPayPayment(clientSecret, {
-    payment_method_options: { wechat_pay: { client: 'web' } },
+    payment_method_options: { wechat_pay: { client: isMobileDevice() ? 'mobile_web' : 'web' } },
   })
 
   if (error) {

frontend/src/views/user/StripePopupView.vue

@@ -56,6 +56,12 @@
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
+import { extractApiErrorMessage } from '@/utils/apiError'
+import { isMobileDevice } from '@/utils/device'
+
+interface StripeWithWechatPay {
+  confirmWechatPayPayment(clientSecret: string, options: Record<string, unknown>): Promise<{ error?: { message?: string }; paymentIntent?: { status: string } }>
+}
 
 const METHOD_COLORS: Record<string, string> = {
   alipay: '#00AEEF',
@@ -123,8 +129,8 @@ async function initStripe(clientSecret: string, publishableKey: string) {
     } 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' } },
+      const result = await (stripe as unknown as StripeWithWechatPay).confirmWechatPayPayment(clientSecret, {
+        payment_method_options: { wechat_pay: { client: isMobileDevice() ? 'mobile_web' : 'web' } },
       })
       if (result.error) {
         error.value = result.error.message || t('payment.result.failed')
@@ -137,7 +143,7 @@ async function initStripe(clientSecret: string, publishableKey: string) {
       }
     }
   } catch (err: unknown) {
-    error.value = err instanceof Error ? err.message : t('payment.stripeLoadFailed')
+    error.value = extractApiErrorMessage(err, t('payment.stripeLoadFailed'))
   }
 }