diff --git a/src/passport/pay/index.config.ts b/src/passport/pay/index.config.ts
new file mode 100644
index 0000000..656a5fe
--- /dev/null
+++ b/src/passport/pay/index.config.ts
@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '确认支付',
+  navigationBarTextStyle: 'black',
+  navigationBarBackgroundColor: '#ffffff'
+}
diff --git a/src/passport/pay/index.tsx b/src/passport/pay/index.tsx
new file mode 100644
index 0000000..c118654
--- /dev/null
+++ b/src/passport/pay/index.tsx
@@ -0,0 +1,280 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Button, Cell, Price, Divider } from '@nutui/nutui-react-taro'
+import { Check, Close, Tips, Clock } from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
+import { request } from '@/utils/request'
+
+/**
+ * 小程序支付页面
+ * 接收参数 subscriptionNo，完成 JSAPI 支付
+ */
+interface SubscriptionDetail {
+  id: number
+  subscriptionNo: string
+  productId: number
+  productName: string
+  productLogo?: string
+  productIcon?: string
+  status: string
+  priceType: string
+  payPrice: number
+  subscriptionPeriod?: string
+}
+
+interface JsapiPayParams {
+  timeStamp: string
+  nonceStr: string
+  package: string
+  signType: string
+  paySign: string
+  outTradeNo: string
+}
+
+const PayPage: React.FC = () => {
+  const [loading, setLoading] = useState(true)
+  const [paying, setPaying] = useState(false)
+  const [detail, setDetail] = useState<SubscriptionDetail | null>(null)
+  const [errorMsg, setErrorMsg] = useState('')
+  const [paid, setPaid] = useState(false)
+
+  // 从页面参数中获取 subscriptionNo
+  const getSubscriptionNo = useCallback(() => {
+    const instance = Taro.getCurrentInstance()
+    const params = instance?.router?.params || {}
+    return params.subscriptionNo || ''
+  }, [])
+
+  // 获取订阅详情
+  const fetchDetail = useCallback(async () => {
+    const subscriptionNo = getSubscriptionNo()
+    if (!subscriptionNo) {
+      setErrorMsg('缺少订单参数')
+      setLoading(false)
+      return
+    }
+
+    try {
+      const res: any = await request({
+        url: `/app/subscription/detail-by-no/${subscriptionNo}`,
+        method: 'GET'
+      })
+
+      if (res?.code === 200 || res?.code === 0) {
+        const data = res.data || res
+
+        if (data.status === 'active') {
+          setPaid(true)
+          setDetail(data)
+        } else {
+          setDetail(data)
+        }
+      } else {
+        setErrorMsg(res?.message || '获取订单信息失败')
+      }
+    } catch (err: any) {
+      setErrorMsg(err?.message || '网络异常，请重试')
+    } finally {
+      setLoading(false)
+    }
+  }, [getSubscriptionNo])
+
+  useEffect(() => {
+    fetchDetail()
+  }, [fetchDetail])
+
+  // 执行支付
+  const handlePay = async () => {
+    if (!detail) return
+
+    setPaying(true)
+    try {
+      // 1. 获取登录凭证（code）并换取 openid
+      const loginRes = await Taro.login()
+      if (!loginRes.code) {
+        throw new Error('获取登录凭证失败')
+      }
+
+      // 2. 通过 code 获取 openid（使用现有的 loginByOpenId 接口）
+      const openid = Taro.getStorageSync('openid') || ''
+
+      // 3. 请求后端创建 JSAPI 预支付订单
+      const prepayRes: any = await request({
+        url: `/app/subscription/mp-prepay/${detail.id}`,
+        method: 'POST',
+        data: { openid }
+      })
+
+      if (prepayRes?.code !== 200 && prepayRes?.code !== 0) {
+        throw new Error(prepayRes?.message || '创建支付订单失败')
+      }
+
+      const payParams: JsapiPayParams = prepayRes.data || prepayRes
+
+      if (!payParams.timeStamp || !payParams.package || !payParams.paySign) {
+        throw new Error('支付参数不完整')
+      }
+
+      // 4. 调用微信支付
+      await Taro.requestPayment({
+        timeStamp: payParams.timeStamp,
+        nonceStr: payParams.nonceStr,
+        package: payParams.package,
+        signType: (payParams.signType || 'RSA') as any,
+        paySign: payParams.paySign
+      })
+
+      // 5. 支付成功后通知后端确认
+      try {
+        await request({
+          url: `/app/subscription/mp-confirm/${detail.subscriptionNo}`,
+          method: 'POST',
+          data: {}
+        })
+      } catch (confirmErr) {
+        console.warn('支付确认通知失败，等待轮询:', confirmErr)
+      }
+
+      // 6. 显示成功状态
+      setPaid(true)
+      Taro.showToast({ title: '支付成功', icon: 'success' })
+
+    } catch (err: any) {
+      console.error('支付失败:', err)
+
+      if (err?.errMsg?.includes('cancel')) {
+        Taro.showToast({ title: '支付已取消', icon: 'none' })
+      } else {
+        const msg = err?.message || err?.errMsg || '支付失败，请重试'
+        Taro.showToast({ title: msg, icon: 'error', duration: 2000 })
+      }
+    } finally {
+      setPaying(false)
+    }
+  }
+
+  // 返回
+  const handleBack = () => {
+    Taro.navigateBack({ delta: 1 }).catch(() => {
+      Taro.switchTab({ url: '/pages/user/user' })
+    })
+  }
+
+  // 格式化价格描述
+  const getPriceDesc = () => {
+    if (!detail) return ''
+    if (detail.priceType === 'one_time') return '永久买断'
+    if (detail.priceType === 'subscription') {
+      return detail.subscriptionPeriod === 'year' ? '按年订阅' : '按月订阅'
+    }
+    return ''
+  }
+
+  // --- 加载中 ---
+  if (loading) {
+    return (
+      <View className="pay-page min-h-screen bg-gray-50 flex items-center justify-center">
+        <View className="text-center">
+          <Clock className="text-blue-500 mb-4" size="48" />
+          <Text className="block text-gray-500">加载订单信息...</Text>
+        </View>
+      </View>
+    )
+  }
+
+  // --- 错误 ---
+  if (errorMsg) {
+    return (
+      <View className="pay-page min-h-screen bg-gray-50 flex items-center justify-center">
+        <View className="text-center p-8">
+          <Close className="text-red-500 mb-4" size="48" />
+          <Text className="block text-gray-800 text-lg mb-2">获取订单失败</Text>
+          <Text className="block text-gray-500 mb-6">{errorMsg}</Text>
+          <Button type="primary" onClick={handleBack}>返回</Button>
+        </View>
+      </View>
+    )
+  }
+
+  // --- 已支付 ---
+  if (paid) {
+    return (
+      <View className="pay-page min-h-screen bg-gray-50 flex items-center justify-center">
+        <View className="text-center p-8">
+          <View className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Check className="text-green-500" size="40" />
+          </View>
+          <Text className="block text-green-600 text-xl font-bold mb-2">支付成功</Text>
+          <Text className="block text-gray-500 mb-2">{detail?.productName || '应用订阅'}</Text>
+          {detail?.payPrice ? (
+            <Text className="block text-gray-400 mb-6">
+              已支付 ¥{Number(detail.payPrice).toFixed(2)}
+            </Text>
+          ) : null}
+          <Button type="primary" onClick={handleBack}>完成</Button>
+        </View>
+      </View>
+    )
+  }
+
+  // --- 支付确认 ---
+  return (
+    <View className="pay-page min-h-screen bg-gray-50">
+      <View className="p-4">
+        {/* 订单信息 */}
+        <View className="bg-white rounded-lg shadow-sm p-4 mb-4">
+          <Text className="block text-lg font-bold text-gray-800 mb-3">确认支付</Text>
+
+          <Cell title="商品名称" description={detail?.productName || '-'} />
+          <Cell title="价格类型" description={getPriceDesc()} />
+
+          <View className="flex items-center justify-between px-4 py-3">
+            <Text className="text-gray-600">支付金额</Text>
+            <Price
+              price={detail?.payPrice}
+              size="large"
+              thousands
+              color="#e53e3e"
+            />
+          </View>
+
+          <Divider />
+
+          <View className="flex items-start px-4 py-2">
+            <Tips className="text-orange-500 mr-2 mt-0.5" size="16" />
+            <Text className="text-sm text-gray-500">
+              支付成功后即可在「已购产品」中使用该应用
+            </Text>
+          </View>
+        </View>
+
+        {/* 支付按钮 */}
+        <View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
+          <View className="flex gap-3">
+            <Button
+              block
+              onClick={handleBack}
+              className="flex-1"
+            >
+              取消
+            </Button>
+            <Button
+              type="primary"
+              block
+              loading={paying}
+              onClick={handlePay}
+              className="flex-1"
+            >
+              {paying ? '支付中...' : '立即支付'}
+            </Button>
+          </View>
+        </View>
+      </View>
+
+      {/* 底部安全距离占位 */}
+      <View style={{ height: '100px' }} />
+    </View>
+  )
+}
+
+export default PayPage