diff --git a/frontend/src/features/listings/ListingDetailPage.tsx b/frontend/src/features/listings/ListingDetailPage.tsx
index 197c891..74c6761 100644
--- a/frontend/src/features/listings/ListingDetailPage.tsx
+++ b/frontend/src/features/listings/ListingDetailPage.tsx
@@ -235,12 +235,8 @@ export function ListingDetailPage() {
     try {
       const order = await createOrder(data.id)
       setConfirmOpen(false)
-      modal.success({
-        title: '订单已创建',
-        content: '订单已生成，接下来请完成支付；支付成功后才进入交接流程。',
-        okText: '去支付',
-        onOk: () => navigate(`/orders/${order.id}`),
-      })
+      message.success('订单已创建，请完成支付')
+      navigate(`/orders/${order.id}?pay=1`)
     } catch (error) {
       modal.error({
         title: '下单失败',
diff --git a/frontend/src/features/orders/OrderActionPanel.tsx b/frontend/src/features/orders/OrderActionPanel.tsx
index 9514f5f..aabfec2 100644
--- a/frontend/src/features/orders/OrderActionPanel.tsx
+++ b/frontend/src/features/orders/OrderActionPanel.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Alert,
   App,
@@ -58,15 +58,23 @@ interface ActionFormValues {
 interface OrderActionPanelProps {
   order: UserOrderDetail
   onChanged: () => void | Promise<void>
+  autoPay?: boolean
+  onAutoPayHandled?: () => void
 }
 
-export function OrderActionPanel({ order, onChanged }: OrderActionPanelProps) {
+export function OrderActionPanel({
+  order,
+  onChanged,
+  autoPay = false,
+  onAutoPayHandled,
+}: OrderActionPanelProps) {
   const { message, modal } = App.useApp()
   const [form] = Form.useForm<ActionFormValues>()
   const user = useSessionStore(state => state.user)
   const [dialog, setDialog] = useState<DialogKind>(null)
   const [busy, setBusy] = useState<string | null>(null)
   const [payURL, setPayURL] = useState('')
+  const autoPayTriggered = useRef(false)
   const actions = getOrderActionAvailability(order, user?.id)
   const checkout = order.checkout
 
@@ -127,6 +135,14 @@ export function OrderActionPanel({ order, onChanged }: OrderActionPanelProps) {
     setDialog(kind)
   }
 
+  useEffect(() => {
+    if (!autoPay || autoPayTriggered.current || !actions.canPay) return
+    autoPayTriggered.current = true
+    openDialog('pay')
+    onAutoPayHandled?.()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoPay, actions.canPay])
+
   const run = async (key: string, fn: () => Promise<void>) => {
     setBusy(key)
     try {
diff --git a/frontend/src/features/orders/OrderDetailPage.tsx b/frontend/src/features/orders/OrderDetailPage.tsx
index aad9fbc..c712edd 100644
--- a/frontend/src/features/orders/OrderDetailPage.tsx
+++ b/frontend/src/features/orders/OrderDetailPage.tsx
@@ -15,7 +15,7 @@ import {
 } from 'antd'
 import { ArrowLeftOutlined, CopyOutlined, MessageOutlined } from '@ant-design/icons'
 import { useQueryClient } from '@tanstack/react-query'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
 import { BrandLogo } from '@/components/BrandLogo'
 import { OrderActionPanel } from '@/features/orders/OrderActionPanel'
@@ -52,6 +52,8 @@ function toneColor(tone: string) {
 export function OrderDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const autoPay = searchParams.get('pay') === '1'
   const queryClient = useQueryClient()
   const { message } = App.useApp()
   const token = useSessionStore(state => state.token)
@@ -400,6 +402,12 @@ export function OrderDetailPage() {
             </Button>
             <OrderActionPanel
               order={order}
+              autoPay={autoPay}
+              onAutoPayHandled={() => {
+                const next = new URLSearchParams(searchParams)
+                next.delete('pay')
+                setSearchParams(next, { replace: true })
+              }}
               onChanged={async () => {
                 await Promise.all([query.refetch(), handoffQuery.refetch()])
                 await queryClient.invalidateQueries({ queryKey: ['pc-my-orders'] })
diff --git a/frontend/src/features/orders/OrderListPage.tsx b/frontend/src/features/orders/OrderListPage.tsx
index b6d7fc3..a1f900a 100644
--- a/frontend/src/features/orders/OrderListPage.tsx
+++ b/frontend/src/features/orders/OrderListPage.tsx
@@ -54,9 +54,11 @@ function toneColor(tone: string) {
 function OrderCard({
   order,
   onOpen,
+  onPay,
 }: {
   order: UserOrderListItem
   onOpen: () => void
+  onPay?: () => void
 }) {
   const status = orderStatusMeta(order.status)
   const handoff = handoffStatusMeta(order.handoff_status)
@@ -116,6 +118,18 @@ function OrderCard({
           <span className="pc-order-card__detail">
             查看详情 <RightOutlined />
           </span>
+          {order.status === 'pending_payment' && onPay ? (
+            <Button
+              type="primary"
+              size="small"
+              onClick={event => {
+                event.stopPropagation()
+                onPay()
+              }}
+            >
+              去支付
+            </Button>
+          ) : null}
         </div>
       </div>
     </article>
@@ -242,6 +256,7 @@ export function OrderListPage() {
                 key={order.id}
                 order={order}
                 onOpen={() => navigate(`/orders/${order.id}`)}
+                onPay={() => navigate(`/orders/${order.id}?pay=1`)}
               />
             ))}
           </div>