diff --git a/src/.env.example b/src/.env.example
index 18c0d62..b595454 100644
--- a/src/.env.example
+++ b/src/.env.example
@@ -64,3 +64,8 @@ tron_grid_api_key=
 solana_rpc_url=
 
 ethereum_ws_url=wss://ethereum.publicnode.com
+
+
+# epay
+epay_pid=
+epay_key=
diff --git a/src/config/config.go b/src/config/config.go
index a4bc937..fa96b18 100644
--- a/src/config/config.go
+++ b/src/config/config.go
@@ -340,3 +340,11 @@ func GetSolanaRpcUrl() string {
 func GetEthereumWsUrl() string {
 	return strings.TrimSpace(viper.GetString("ethereum_ws_url"))
 }
+
+func GetEpayPid() int {
+	return viper.GetInt("epay_pid")
+}
+
+func GetEpayKey() string {
+	return viper.GetString("epay_key")
+}
diff --git a/src/controller/comm/order_controller.go b/src/controller/comm/order_controller.go
index f745711..4c58c4d 100644
--- a/src/controller/comm/order_controller.go
+++ b/src/controller/comm/order_controller.go
@@ -1,6 +1,10 @@
 package comm
 
 import (
+	"encoding/json"
+	"fmt"
+	"log"
+
 	"github.com/assimon/luuu/model/request"
 	"github.com/assimon/luuu/model/service"
 	"github.com/assimon/luuu/util/constant"
@@ -22,3 +26,53 @@ func (c *BaseCommController) CreateTransaction(ctx echo.Context) (err error) {
 	}
 	return c.SucJson(ctx, resp)
 }
+
+// SwitchNetwork 切换支付网络，创建或返回子订单
+func (c *BaseCommController) SwitchNetwork(ctx echo.Context) (err error) {
+	req := new(request.SwitchNetworkRequest)
+	if err = ctx.Bind(req); err != nil {
+		return c.FailJson(ctx, constant.ParamsMarshalErr)
+	}
+	if err = c.ValidateStruct(ctx, req); err != nil {
+		return c.FailJson(ctx, err)
+	}
+	resp, err := service.SwitchNetwork(req)
+	if err != nil {
+		return c.FailJson(ctx, err)
+	}
+
+	jsonBytes, err := json.MarshalIndent(resp, "", "  ")
+	if err != nil {
+		return c.FailJson(ctx, err)
+	}
+
+	fmt.Printf("switch network response: \n%s", string(jsonBytes))
+
+	return c.SucJson(ctx, resp)
+}
+
+func (c *BaseCommController) CreateTransactionAndRedirect(ctx echo.Context) (err error) {
+	req := new(request.CreateTransactionRequest)
+	if err = ctx.Bind(req); err != nil {
+		log.Println("bind request error:", err)
+		return c.FailJson(ctx, constant.ParamsMarshalErr)
+	}
+	if err = c.ValidateStruct(ctx, req); err != nil {
+		log.Println("validate request error:", err)
+		return c.FailJson(ctx, err)
+	}
+	resp, err := service.CreateTransaction(req)
+	if err != nil {
+		log.Println("create transaction error:", err)
+		return c.FailJson(ctx, err)
+	}
+
+	fmt.Printf("create transaction response: %+v\n", resp)
+
+	tradeID := resp.TradeId
+
+	ctx.Redirect(302, "/pay/checkout-counter/"+tradeID)
+
+	return nil
+
+}
diff --git a/src/controller/comm/pay_controller.go b/src/controller/comm/pay_controller.go
index 1bc9ebd..66e6850 100644
--- a/src/controller/comm/pay_controller.go
+++ b/src/controller/comm/pay_controller.go
@@ -1,6 +1,8 @@
 package comm
 
 import (
+	"encoding/json"
+	"fmt"
 	"html/template"
 	"net/http"
 	"path/filepath"
@@ -30,7 +32,13 @@ func (c *BaseCommController) CheckoutCounter(ctx echo.Context) (err error) {
 	if err != nil {
 		return ctx.String(http.StatusOK, err.Error())
 	}
-	resp.Network = "TRON"
+
+	jsonByte, err := json.MarshalIndent(resp, "", "  ")
+	if err != nil {
+		return ctx.String(http.StatusOK, err.Error())
+	}
+	fmt.Printf("%v\n", string(jsonByte))
+
 	return tmpl.Execute(ctx.Response(), resp)
 }
 
diff --git a/src/model/data/order_data.go b/src/model/data/order_data.go
index b5a8e16..430264b 100644
--- a/src/model/data/order_data.go
+++ b/src/model/data/order_data.go
@@ -108,6 +108,97 @@ func UpdateOrderIsExpirationById(id uint64, expirationCutoff time.Time) (bool, e
 	return result.RowsAffected > 0, result.Error
 }
 
+// CountActiveSubOrders counts sub-orders with status=WaitPay under a parent.
+func CountActiveSubOrders(parentTradeId string) (int64, error) {
+	var count int64
+	err := dao.Mdb.Model(&mdb.Orders{}).
+		Where("parent_trade_id = ?", parentTradeId).
+		Where("status = ?", mdb.StatusWaitPay).
+		Count(&count).Error
+	return count, err
+}
+
+// GetSubOrderByTokenNetwork finds an existing active sub-order matching token+network under a parent.
+func GetSubOrderByTokenNetwork(parentTradeId string, token string, network string) (*mdb.Orders, error) {
+	order := new(mdb.Orders)
+	err := dao.Mdb.Model(order).
+		Where("parent_trade_id = ?", parentTradeId).
+		Where("token = ?", token).
+		Where("network = ?", network).
+		Where("status = ?", mdb.StatusWaitPay).
+		Limit(1).
+		Find(order).Error
+	return order, err
+}
+
+// GetSiblingSubOrders returns active sub-orders under the same parent, excluding the given trade_id.
+func GetSiblingSubOrders(parentTradeId string, excludeTradeId string) ([]mdb.Orders, error) {
+	var orders []mdb.Orders
+	err := dao.Mdb.Model(&mdb.Orders{}).
+		Where("parent_trade_id = ?", parentTradeId).
+		Where("trade_id != ?", excludeTradeId).
+		Where("status = ?", mdb.StatusWaitPay).
+		Find(&orders).Error
+	return orders, err
+}
+
+// MarkParentOrderSuccess updates the parent order with the sub-order's payment details.
+// Token and network are NOT overwritten — the parent keeps its original values.
+func MarkParentOrderSuccess(parentTradeId string, sub *mdb.Orders) (bool, error) {
+	result := dao.Mdb.Model(&mdb.Orders{}).
+		Where("trade_id = ?", parentTradeId).
+		Where("status = ?", mdb.StatusWaitPay).
+		Updates(map[string]interface{}{
+			"status":               mdb.StatusPaySuccess,
+			"block_transaction_id": sub.BlockTransactionId,
+			"callback_confirm":     mdb.CallBackConfirmNo,
+			"actual_amount":        sub.ActualAmount,
+			"receive_address":      sub.ReceiveAddress,
+		})
+	return result.RowsAffected > 0, result.Error
+}
+
+// MarkOrderSelected sets is_selected=true for the given trade_id.
+func MarkOrderSelected(tradeId string) error {
+	return dao.Mdb.Model(&mdb.Orders{}).
+		Where("trade_id = ?", tradeId).
+		Update("is_selected", true).Error
+}
+
+// RefreshOrderExpiration resets created_at to now so the expiration timer restarts.
+// Called on the parent order when a sub-order is created or returned.
+func RefreshOrderExpiration(tradeId string) error {
+	return dao.Mdb.Model(&mdb.Orders{}).
+		Where("trade_id = ?", tradeId).
+		Update("created_at", time.Now()).Error
+}
+
+// ResetCallbackConfirmOk sets callback_confirm back to Ok.
+// Prevents the callback worker from retrying a sub-order with an empty notify_url.
+func ResetCallbackConfirmOk(tradeId string) error {
+	return dao.Mdb.Model(&mdb.Orders{}).
+		Where("trade_id = ?", tradeId).
+		Update("callback_confirm", mdb.CallBackConfirmOk).Error
+}
+
+// GetActiveSubOrders returns all active sub-orders under a parent.
+func GetActiveSubOrders(parentTradeId string) ([]mdb.Orders, error) {
+	var orders []mdb.Orders
+	err := dao.Mdb.Model(&mdb.Orders{}).
+		Where("parent_trade_id = ?", parentTradeId).
+		Where("status = ?", mdb.StatusWaitPay).
+		Find(&orders).Error
+	return orders, err
+}
+
+// ExpireOrderByTradeId marks a single order as expired if still waiting.
+func ExpireOrderByTradeId(tradeId string) error {
+	return dao.Mdb.Model(&mdb.Orders{}).
+		Where("trade_id = ?", tradeId).
+		Where("status = ?", mdb.StatusWaitPay).
+		Update("status", mdb.StatusExpired).Error
+}
+
 // GetTradeIdByWalletAddressAndAmountAndToken resolves the reserved trade id by network, address, token and amount.
 func GetTradeIdByWalletAddressAndAmountAndToken(network string, address string, token string, amount float64) (string, error) {
 	scaledAmount, _ := normalizeLockAmount(amount)
diff --git a/src/model/mdb/orders_mdb.go b/src/model/mdb/orders_mdb.go
index 5d262f5..9350b2c 100644
--- a/src/model/mdb/orders_mdb.go
+++ b/src/model/mdb/orders_mdb.go
@@ -8,9 +8,14 @@ const (
 	CallBackConfirmNo = 2
 )
 
+const (
+	PaymentTypeEpay = "Epay"
+)
+
 type Orders struct {
 	TradeId            string  `gorm:"column:trade_id;uniqueIndex:orders_trade_id_uindex" json:"trade_id"`
-	OrderId            string  `gorm:"column:order_id;uniqueIndex:orders_order_id_uindex" json:"order_id"`
+	OrderId            string  `gorm:"column:order_id;uniqueIndex:orders_order_id_uindex" json:"order_id"` // the order id is generated by client, and will notify client when order is paid
+	ParentTradeId      string  `gorm:"column:parent_trade_id;index:idx_orders_parent_trade_id;default:''" json:"parent_trade_id"`
 	BlockTransactionId string  `gorm:"index:orders_block_transaction_id_index;column:block_transaction_id" json:"block_transaction_id"`
 	Amount             float64 `gorm:"column:amount" json:"amount"`
 	Currency           string  `gorm:"column:currency" json:"currency"`
@@ -21,8 +26,11 @@ type Orders struct {
 	Status             int     `gorm:"column:status;default:1" json:"status"`
 	NotifyUrl          string  `gorm:"column:notify_url" json:"notify_url"`
 	RedirectUrl        string  `gorm:"column:redirect_url" json:"redirect_url"`
+	Name               string  `gorm:"column:name" json:"name"`
 	CallbackNum        int     `gorm:"column:callback_num;default:0" json:"callback_num"`
 	CallBackConfirm    int     `gorm:"column:callback_confirm;default:2" json:"callback_confirm"`
+	IsSelected         bool    `gorm:"column:is_selected;default:false" json:"is_selected"`
+	PaymentType        string  `gorm:"column:payment_type" json:"payment_type"`
 	BaseModel
 }
 
diff --git a/src/model/mdb/wallet_address_mdb.go b/src/model/mdb/wallet_address_mdb.go
index 310b58d..c9a7dc1 100644
--- a/src/model/mdb/wallet_address_mdb.go
+++ b/src/model/mdb/wallet_address_mdb.go
@@ -8,7 +8,7 @@ const (
 const (
 	NetworkTron     = "tron"
 	NetworkSolana   = "solana"
-	NetworkEthereum = "eth"
+	NetworkEthereum = "ethereum"
 	NetworkBsc      = "bsc"
 	NetworkPolygon  = "polygon"
 	NetworkPlasma   = "plasma"
diff --git a/src/model/request/order_request.go b/src/model/request/order_request.go
index f861088..b42e38e 100644
--- a/src/model/request/order_request.go
+++ b/src/model/request/order_request.go
@@ -12,6 +12,8 @@ type CreateTransactionRequest struct {
 	NotifyUrl   string  `json:"notify_url" validate:"required"`
 	Signature   string  `json:"signature"  validate:"required"`
 	RedirectUrl string  `json:"redirect_url"`
+	Name        string  `json:"name"`
+	PaymentType string  `json:"payment_type"`
 }
 
 func (r CreateTransactionRequest) Translates() map[string]string {
@@ -36,3 +38,18 @@ type OrderProcessingRequest struct {
 	TradeId            string
 	BlockTransactionId string
 }
+
+// SwitchNetworkRequest 切换支付网络
+type SwitchNetworkRequest struct {
+	TradeId string `json:"trade_id" validate:"required"`
+	Token   string `json:"token" validate:"required"`
+	Network string `json:"network" validate:"required"`
+}
+
+func (r SwitchNetworkRequest) Translates() map[string]string {
+	return validate.MS{
+		"TradeId": "订单号",
+		"Token":   "币种",
+		"Network": "网络",
+	}
+}
diff --git a/src/model/response/order_response.go b/src/model/response/order_response.go
index a04902f..729ab7d 100644
--- a/src/model/response/order_response.go
+++ b/src/model/response/order_response.go
@@ -25,3 +25,16 @@ type OrderNotifyResponse struct {
 	Signature          string  `json:"signature"`            // 签名
 	Status             int     `json:"status"`               //  1：等待支付，2：支付成功，3：已过期
 }
+
+// OrderNotifyResponseEpay epay订单异步回调结构体
+type OrderNotifyResponseEpay struct {
+	PID         int    `json:"pid"`          // 商户ID
+	TradeNo     string `json:"trade_no"`     // 平台订单号
+	OutTradeNo  string `json:"out_trade_no"` // 商户订单号
+	Type        string `json:"type"`         // 订单类型
+	Name        string `json:"name"`         // 商品名称
+	Money       string `json:"money"`        // 订单金额，保留4位小数
+	Sign        string `json:"sign"`         // 签名
+	SignType    string `json:"sign_type"`    // 签名类型 // MD5
+	TradeStatus string `json:"trade_status"` // 订单状态 // only has "TRADE_SUCCESS" for now
+}
diff --git a/src/model/response/pay_response.go b/src/model/response/pay_response.go
index 6db0429..190194e 100644
--- a/src/model/response/pay_response.go
+++ b/src/model/response/pay_response.go
@@ -11,6 +11,7 @@ type CheckoutCounterResponse struct {
 	ExpirationTime int64   `json:"expiration_time"` // 过期时间 时间戳
 	RedirectUrl    string  `json:"redirect_url"`
 	CreatedAt      int64   `json:"created_at"` // 订单创建时间 时间戳
+	IsSelected     bool    `json:"is_selected"`
 }
 
 type CheckStatusResponse struct {
diff --git a/src/model/service/order_service.go b/src/model/service/order_service.go
index 4a78c6c..27aced1 100644
--- a/src/model/service/order_service.go
+++ b/src/model/service/order_service.go
@@ -95,6 +95,8 @@ func CreateTransaction(req *request.CreateTransactionRequest) (*response.CreateT
 		Status:         mdb.StatusWaitPay,
 		NotifyUrl:      req.NotifyUrl,
 		RedirectUrl:    req.RedirectUrl,
+		Name:           req.Name,
+		PaymentType:    req.PaymentType,
 	}
 	if err = data.CreateOrderWithTransaction(tx, order); err != nil {
 		tx.Rollback()
@@ -155,6 +157,69 @@ func OrderProcessing(req *request.OrderProcessingRequest) error {
 	if err = data.UnLockTransaction(req.Network, req.ReceiveAddress, req.Token, req.Amount); err != nil {
 		log.Sugar.Warnf("[order] unlock transaction after pay success failed, trade_id=%s, err=%v", req.TradeId, err)
 	}
+
+	// Load order to check parent-child relationship
+	order, err := data.GetOrderInfoByTradeId(req.TradeId)
+	if err != nil {
+		return nil
+	}
+
+	// Parent order paid directly: expire all sub-orders and release their locks
+	if order.ParentTradeId == "" {
+		subs, subErr := data.GetActiveSubOrders(order.TradeId)
+		if subErr != nil {
+			log.Sugar.Errorf("[order] get sub-orders for parent failed, trade_id=%s, err=%v", order.TradeId, subErr)
+			return nil
+		}
+		for _, sub := range subs {
+			if err = data.ExpireOrderByTradeId(sub.TradeId); err != nil {
+				log.Sugar.Warnf("[order] expire sub-order failed, trade_id=%s, err=%v", sub.TradeId, err)
+			}
+			if err = data.UnLockTransaction(sub.Network, sub.ReceiveAddress, sub.Token, sub.ActualAmount); err != nil {
+				log.Sugar.Warnf("[order] unlock sub-order transaction failed, trade_id=%s, err=%v", sub.TradeId, err)
+			}
+		}
+		return nil
+	}
+
+	// Sub-order should not trigger its own callback (notify_url is empty).
+	// OrderSuccessWithTransaction unconditionally sets callback_confirm=No,
+	// reset it here to prevent the callback worker from retrying an empty URL.
+	if err = data.ResetCallbackConfirmOk(order.TradeId); err != nil {
+		log.Sugar.Warnf("[order] reset sub-order callback_confirm failed, trade_id=%s, err=%v", order.TradeId, err)
+	}
+
+	parent, err := data.GetOrderInfoByTradeId(order.ParentTradeId)
+	if err != nil {
+		log.Sugar.Errorf("[order] load parent order failed, parent_trade_id=%s, err=%v", order.ParentTradeId, err)
+		return nil
+	}
+
+	// Mark parent as paid with sub-order's payment details
+	if _, err = data.MarkParentOrderSuccess(parent.TradeId, order); err != nil {
+		log.Sugar.Errorf("[order] mark parent success failed, parent_trade_id=%s, err=%v", parent.TradeId, err)
+	}
+
+	// Release parent's own wallet lock
+	if err = data.UnLockTransaction(parent.Network, parent.ReceiveAddress, parent.Token, parent.ActualAmount); err != nil {
+		log.Sugar.Warnf("[order] unlock parent transaction failed, parent_trade_id=%s, err=%v", parent.TradeId, err)
+	}
+
+	// Expire sibling sub-orders and release their locks
+	siblings, err := data.GetSiblingSubOrders(parent.TradeId, order.TradeId)
+	if err != nil {
+		log.Sugar.Errorf("[order] get sibling sub-orders failed, parent_trade_id=%s, err=%v", parent.TradeId, err)
+		return nil
+	}
+	for _, sib := range siblings {
+		if err = data.ExpireOrderByTradeId(sib.TradeId); err != nil {
+			log.Sugar.Warnf("[order] expire sibling failed, trade_id=%s, err=%v", sib.TradeId, err)
+		}
+		if err = data.UnLockTransaction(sib.Network, sib.ReceiveAddress, sib.Token, sib.ActualAmount); err != nil {
+			log.Sugar.Warnf("[order] unlock sibling transaction failed, trade_id=%s, err=%v", sib.TradeId, err)
+		}
+	}
+
 	return nil
 }
 
@@ -212,3 +277,141 @@ func GetOrderInfoByTradeId(tradeId string) (*mdb.Orders, error) {
 	}
 	return order, nil
 }
+
+const MaxSubOrders = 2
+
+// SwitchNetwork creates or returns an existing sub-order for a different token+network.
+func SwitchNetwork(req *request.SwitchNetworkRequest) (*response.CheckoutCounterResponse, error) {
+	gCreateTransactionLock.Lock()
+	defer gCreateTransactionLock.Unlock()
+
+	token := strings.ToUpper(strings.TrimSpace(req.Token))
+	network := strings.ToLower(strings.TrimSpace(req.Network))
+
+	// 1. Load parent order
+	parent, err := data.GetOrderInfoByTradeId(req.TradeId)
+	if err != nil {
+		return nil, err
+	}
+	if parent.ID <= 0 {
+		return nil, constant.OrderNotExists
+	}
+	if parent.ParentTradeId != "" {
+		return nil, constant.CannotSwitchSubOrder
+	}
+	if parent.Status != mdb.StatusWaitPay {
+		return nil, constant.OrderNotWaitPay
+	}
+
+	// 2. Same token+network as parent → mark selected and return
+	if strings.EqualFold(parent.Token, token) && strings.EqualFold(parent.Network, network) {
+		_ = data.MarkOrderSelected(parent.TradeId)
+		parent.IsSelected = true
+		return buildCheckoutResponse(parent), nil
+	}
+
+	// 3. Existing active sub-order for this token+network → return it
+	existing, err := data.GetSubOrderByTokenNetwork(parent.TradeId, token, network)
+	if err != nil {
+		return nil, err
+	}
+	if existing.ID > 0 {
+		_ = data.MarkOrderSelected(parent.TradeId)
+		_ = data.MarkOrderSelected(existing.TradeId)
+		_ = data.RefreshOrderExpiration(parent.TradeId)
+		existing.IsSelected = true
+		return buildCheckoutResponse(existing), nil
+	}
+
+	// 4. Check sub-order limit
+	count, err := data.CountActiveSubOrders(parent.TradeId)
+	if err != nil {
+		return nil, err
+	}
+	if count >= MaxSubOrders {
+		return nil, constant.SubOrderLimitExceeded
+	}
+
+	// 5. Calculate amount for the new network
+	rate := config.GetRateForCoin(strings.ToLower(token), strings.ToLower(parent.Currency))
+	if rate <= 0 {
+		return nil, constant.RateAmountErr
+	}
+	decimalPayAmount := decimal.NewFromFloat(parent.Amount)
+	decimalTokenAmount := decimalPayAmount.Mul(decimal.NewFromFloat(rate))
+	if decimalTokenAmount.Cmp(decimal.NewFromFloat(UsdtMinimumPaymentAmount)) == -1 {
+		return nil, constant.PayAmountErr
+	}
+
+	// 6. Find and lock wallet
+	walletAddress, err := data.GetAvailableWalletAddressByNetwork(network)
+	if err != nil {
+		return nil, err
+	}
+	if len(walletAddress) <= 0 {
+		return nil, constant.NotAvailableWalletAddress
+	}
+
+	subTradeID := GenerateCode()
+	amount := math.MustParsePrecFloat64(decimalTokenAmount.InexactFloat64(), 2)
+	availableAddress, availableAmount, err := ReserveAvailableWalletAndAmount(subTradeID, network, token, amount, walletAddress)
+	if err != nil {
+		return nil, err
+	}
+	if availableAddress == "" {
+		return nil, constant.NotAvailableAmountErr
+	}
+
+	// 7. Create sub-order
+	tx := dao.Mdb.Begin()
+	subOrder := &mdb.Orders{
+		TradeId:         subTradeID,
+		OrderId:         subTradeID, // sub-order uses its own trade_id as order_id (unique constraint)
+		ParentTradeId:   parent.TradeId,
+		Amount:          parent.Amount,
+		Currency:        parent.Currency,
+		ActualAmount:    availableAmount,
+		ReceiveAddress:  availableAddress,
+		Token:           token,
+		Network:         network,
+		Status:          mdb.StatusWaitPay,
+		IsSelected:      true,
+		NotifyUrl:       "",
+		RedirectUrl:     parent.RedirectUrl,
+		Name:            parent.Name,
+		CallBackConfirm: mdb.CallBackConfirmOk, // don't trigger callback on sub-order
+		PaymentType:     parent.PaymentType,
+	}
+	if err = data.CreateOrderWithTransaction(tx, subOrder); err != nil {
+		tx.Rollback()
+		_ = data.UnLockTransactionByTradeId(subTradeID)
+		return nil, err
+	}
+	if err = tx.Commit().Error; err != nil {
+		tx.Rollback()
+		_ = data.UnLockTransactionByTradeId(subTradeID)
+		return nil, err
+	}
+
+	// Mark parent as selected and refresh its expiration to match the sub-order
+	_ = data.MarkOrderSelected(parent.TradeId)
+	_ = data.RefreshOrderExpiration(parent.TradeId)
+
+	return buildCheckoutResponse(subOrder), nil
+}
+
+func buildCheckoutResponse(order *mdb.Orders) *response.CheckoutCounterResponse {
+	return &response.CheckoutCounterResponse{
+		TradeId:        order.TradeId,
+		Amount:         order.Amount,
+		ActualAmount:   order.ActualAmount,
+		Token:          order.Token,
+		Currency:       order.Currency,
+		ReceiveAddress: order.ReceiveAddress,
+		Network:        order.Network,
+		ExpirationTime: order.CreatedAt.AddMinutes(config.GetOrderExpirationTime()).TimestampMilli(),
+		RedirectUrl:    order.RedirectUrl,
+		CreatedAt:      order.CreatedAt.TimestampMilli(),
+		IsSelected:     order.IsSelected,
+	}
+}
diff --git a/src/model/service/pay_service.go b/src/model/service/pay_service.go
index c1e54bf..011707d 100644
--- a/src/model/service/pay_service.go
+++ b/src/model/service/pay_service.go
@@ -32,6 +32,7 @@ func GetCheckoutCounterByTradeId(tradeId string) (*response.CheckoutCounterRespo
 		ExpirationTime: orderInfo.CreatedAt.AddMinutes(config.GetOrderExpirationTime()).TimestampMilli(),
 		RedirectUrl:    orderInfo.RedirectUrl,
 		CreatedAt:      orderInfo.CreatedAt.TimestampMilli(),
+		IsSelected:     orderInfo.IsSelected,
 	}
 	return resp, nil
 }
diff --git a/src/mq/worker.go b/src/mq/worker.go
index 9c11dea..3797c92 100644
--- a/src/mq/worker.go
+++ b/src/mq/worker.go
@@ -2,7 +2,10 @@ package mq
 
 import (
 	"errors"
+	"fmt"
+	"io"
 	"net/http"
+	"net/url"
 	"strings"
 	"time"
 
@@ -162,36 +165,86 @@ func processCallback(tradeID string) {
 }
 
 func sendOrderCallback(order *mdb.Orders) error {
-	client := http_client.GetHttpClient()
-	orderResp := response.OrderNotifyResponse{
-		TradeId:            order.TradeId,
-		OrderId:            order.OrderId,
-		Amount:             order.Amount,
-		ActualAmount:       order.ActualAmount,
-		ReceiveAddress:     order.ReceiveAddress,
-		Token:              order.Token,
-		BlockTransactionId: order.BlockTransactionId,
-		Status:             mdb.StatusPaySuccess,
-	}
-	signature, err := sign.Get(orderResp, config.GetApiAuthToken())
-	if err != nil {
-		return err
-	}
-	orderResp.Signature = signature
 
-	resp, err := client.R().
-		SetHeader("powered-by", "Epusdt(https://github.com/GMwalletApp/epusdt)").
-		SetBody(orderResp).
-		Post(order.NotifyUrl)
-	if err != nil {
-		return err
-	}
-	if resp.StatusCode() != http.StatusOK {
-		return errors.New(resp.Status())
-	}
-	if string(resp.Body()) != "ok" {
-		return errors.New("not ok")
+	switch order.PaymentType {
+	case mdb.PaymentTypeEpay:
+		// 构造 EPay 标准回调参数
+		notifyData := response.OrderNotifyResponseEpay{
+			PID:        config.GetEpayPid(),
+			TradeNo:    order.TradeId, // epusdt 订单号作为 EPay 平台订单号
+			OutTradeNo: order.OrderId, // 注意：EPay 回调要求商户订单号使用 out_trade_no 参数
+
+			Type:        "alipay",
+			Name:        order.Name,
+			Money:       fmt.Sprintf("%.4f", order.Amount),
+			TradeStatus: "TRADE_SUCCESS",
+		}
+
+		signstr2, err := sign.Get(notifyData, config.GetEpayKey())
+		if err != nil {
+			return err
+		}
+
+		// 使用 form-encoded POST（EPay 标准协议格式）
+		formData := url.Values{
+			"pid":          {fmt.Sprintf("%d", notifyData.PID)},
+			"trade_no":     {notifyData.TradeNo},
+			"out_trade_no": {notifyData.OutTradeNo},
+			"type":         {notifyData.Type},
+			"name":         {notifyData.Name},
+			"money":        {notifyData.Money},
+			"trade_status": {notifyData.TradeStatus},
+			"sign":         {signstr2},
+			"sign_type":    {"MD5"},
+		}
+
+		resp, err := http.PostForm(order.NotifyUrl, formData)
+		if err != nil {
+			return err
+		}
+		defer resp.Body.Close()
+
+		responseBody, err := io.ReadAll(resp.Body)
+		if err != nil {
+			return err
+		}
+
+		fmt.Printf("notify_url response status: %d, body: %s\n", resp.StatusCode, string(responseBody))
+
+	default:
+
+		client := http_client.GetHttpClient()
+		orderResp := response.OrderNotifyResponse{
+			TradeId:            order.TradeId,
+			OrderId:            order.OrderId,
+			Amount:             order.Amount,
+			ActualAmount:       order.ActualAmount,
+			ReceiveAddress:     order.ReceiveAddress,
+			Token:              order.Token,
+			BlockTransactionId: order.BlockTransactionId,
+			Status:             mdb.StatusPaySuccess,
+		}
+		signature, err := sign.Get(orderResp, config.GetApiAuthToken())
+		if err != nil {
+			return err
+		}
+		orderResp.Signature = signature
+
+		resp, err := client.R().
+			SetHeader("powered-by", "Epusdt(https://github.com/GMwalletApp/epusdt)").
+			SetBody(orderResp).
+			Post(order.NotifyUrl)
+		if err != nil {
+			return err
+		}
+		if resp.StatusCode() != http.StatusOK {
+			return errors.New(resp.Status())
+		}
+		if string(resp.Body()) != "ok" {
+			return errors.New("not ok")
+		}
 	}
+
 	return nil
 }
 
diff --git a/src/route/router.go b/src/route/router.go
index 4170df8..bad3e50 100644
--- a/src/route/router.go
+++ b/src/route/router.go
@@ -3,11 +3,17 @@ package route
 import (
 	"bytes"
 	"encoding/json"
+	"fmt"
 	"io"
 	"net/http"
+	"strconv"
 
+	"github.com/assimon/luuu/config"
 	"github.com/assimon/luuu/controller/comm"
 	"github.com/assimon/luuu/middleware"
+	"github.com/assimon/luuu/model/mdb"
+	"github.com/assimon/luuu/util/constant"
+	"github.com/assimon/luuu/util/sign"
 	"github.com/labstack/echo/v4"
 )
 
@@ -20,6 +26,7 @@ func RegisterRoute(e *echo.Echo) {
 	payRoute := e.Group("/pay")
 	payRoute.GET("/checkout-counter/:trade_id", comm.Ctrl.CheckoutCounter)
 	payRoute.GET("/check-status/:trade_id", comm.Ctrl.CheckStatus)
+	payRoute.POST("/switch-network", comm.Ctrl.SwitchNetwork)
 
 	// payment routes
 	paymentRoute := e.Group("/payments")
@@ -49,6 +56,7 @@ func RegisterRoute(e *echo.Echo) {
 			return comm.Ctrl.FailJson(ctx, err)
 		}
 		ctx.Request().Body = io.NopCloser(bytes.NewBuffer(jsonBytes))
+		ctx.Request().ContentLength = int64(len(jsonBytes))
 
 		return comm.Ctrl.CreateTransaction(ctx)
 	}, middleware.CheckApiSign())
@@ -70,4 +78,80 @@ func RegisterRoute(e *echo.Echo) {
 	walletV1.GET("/:id", comm.Ctrl.GetWallet)
 	walletV1.POST("/:id/status", comm.Ctrl.ChangeWalletStatus)
 	walletV1.POST("/:id/delete", comm.Ctrl.DeleteWallet)
+
+	// epay v1 routes
+	epayV1 := paymentRoute.Group("/epay/v1")
+	epayV1.Match([]string{http.MethodPost, http.MethodGet}, "/order/create-transaction/submit.php", func(ctx echo.Context) error {
+		params := make(map[string]interface{})
+		for k, v := range ctx.QueryParams() {
+			params[k] = v[0]
+		}
+
+		signstr := params["sign"].(string)
+		delete(params, "sign")
+		delete(params, "sign_type")
+
+		// we need to add pid to params for signature verification
+		params["pid"] = config.GetEpayPid()
+
+		checkSignature, err := sign.Get(params, config.GetApiAuthToken())
+		if err != nil {
+			return constant.SignatureErr
+		}
+		if checkSignature != signstr {
+			return constant.SignatureErr
+		}
+
+		// safely get string value from map
+		getString := func(m map[string]interface{}, key string) string {
+			v, ok := m[key]
+			if !ok {
+				return ""
+			}
+			s, ok := v.(string)
+			if !ok {
+				return ""
+			}
+			return s
+		}
+
+		money := getString(params, "money")
+		name := getString(params, "name")
+		notifyURL := getString(params, "notify_url")
+		outTradeNo := getString(params, "out_trade_no")
+		returnURL := getString(params, "return_url")
+
+		amountFloat, err := strconv.ParseFloat(money, 64)
+		if err != nil {
+			return comm.Ctrl.FailJson(ctx, fmt.Errorf("invalid money value: %s", money))
+		}
+
+		body := map[string]interface{}{
+			"token":        "usdt",
+			"currency":     "cny",
+			"network":      "tron",
+			"amount":       amountFloat,
+			"notify_url":   notifyURL,
+			"order_id":     outTradeNo,
+			"redirect_url": returnURL,
+			"signature":    signstr,
+			"name":         name,
+			"payment_type": mdb.PaymentTypeEpay,
+		}
+
+		ctx.Set("request_body", body)
+
+		jsonBytes, err := json.Marshal(body)
+		if err != nil {
+			return comm.Ctrl.FailJson(ctx, err)
+		}
+
+		ctx.Request().Body = io.NopCloser(bytes.NewBuffer(jsonBytes))
+		ctx.Request().ContentLength = int64(len(jsonBytes))
+		ctx.Request().Method = http.MethodPost
+		ctx.Request().Header.Set("Content-Type", "application/json")
+
+		return comm.Ctrl.CreateTransactionAndRedirect(ctx)
+
+	})
 }
diff --git a/src/static/index.html b/src/static/index.html
index 2b4e4e1..71d00f9 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,8 +14,8 @@
     @variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
     @theme inline {
-      --font-sans: "Noto Sans SC Variable", "Noto Sans SC", system-ui, sans-serif;
-      --font-nunito: "Nunito Variable", "Noto Sans SC Variable", "Noto Sans SC", system-ui, sans-serif;
+      --font-sans:               "Noto Sans SC Variable", "Noto Sans SC", system-ui, sans-serif;
+      --font-nunito:             "Nunito Variable", "Noto Sans SC Variable", "Noto Sans SC", system-ui, sans-serif;
       --color-background:        var(--background);
       --color-foreground:        var(--foreground);
       --color-card:              var(--card);
@@ -23,249 +24,524 @@
       --color-popover-foreground:var(--popover-foreground);
       --color-primary:           var(--primary);
       --color-primary-foreground:var(--primary-foreground);
-      --color-primary-hover:     var(--primary-hover);
       --color-secondary:         var(--secondary);
+      --color-secondary-foreground:var(--secondary-foreground);
       --color-muted:             var(--muted);
       --color-muted-foreground:  var(--muted-foreground);
       --color-accent:            var(--accent);
       --color-accent-foreground: var(--accent-foreground);
+      --color-destructive:       var(--destructive);
       --color-border:            var(--border);
-      --color-border-hover:      var(--border-hover);
+      --color-input:             var(--input);
+      --color-ring:              var(--ring);
       --color-success:           var(--success);
       --color-warning:           var(--warning);
-      --shadow-card:             var(--card-shadow);
-      --shadow-popover:          var(--popover-shadow);
       --animate-state-in:        state-in .28s cubic-bezier(.34,1.56,.64,1);
+      --radius-sm:  calc(var(--radius) - 4px);
+      --radius-md:  calc(var(--radius) - 2px);
+      --radius-lg:  var(--radius);
+      --radius-xl:  calc(var(--radius) + 4px);
+      --radius-2xl: calc(var(--radius) + 8px);
+    }
+
+    /* ── Design tokens ── */
+    :root, [data-theme="light"] {
+      --background:        oklch(1 0 0);
+      --foreground:        oklch(0.141 0.005 285.823);
+      --card:              oklch(1 0 0);
+      --card-foreground:   oklch(0.141 0.005 285.823);
+      --popover:           oklch(1 0 0);
+      --popover-foreground:oklch(0.141 0.005 285.823);
+      --primary:           oklch(0.21 0.006 285.885);
+      --primary-foreground:oklch(0.985 0 0);
+      --secondary:         oklch(0.967 0.001 286.375);
+      --secondary-foreground:oklch(0.21 0.006 285.885);
+      --muted:             oklch(0.967 0.001 286.375);
+      --muted-foreground:  oklch(0.552 0.016 285.938);
+      --accent:            oklch(0.967 0.001 286.375);
+      --accent-foreground: oklch(0.21 0.006 285.885);
+      --destructive:       oklch(0.577 0.245 27.325);
+      --border:            oklch(0.92 0.004 286.32);
+      --input:             oklch(0.92 0.004 286.32);
+      --ring:              oklch(0.705 0.015 286.067);
+      --radius:             0.875rem;
+      --success:           oklch(0.721 0.193 143.56);
+      --warning:           oklch(0.741 0.188 55.68);
+    }
+    [data-theme="dark"] {
+      --background:        oklch(0.141 0.005 285.823);
+      --foreground:        oklch(0.985 0 0);
+      --card:              oklch(0.21 0.006 285.885);
+      --card-foreground:   oklch(0.985 0 0);
+      --popover:           oklch(0.21 0.006 285.885);
+      --popover-foreground:oklch(0.985 0 0);
+      --primary:           oklch(0.92 0.004 286.32);
+      --primary-foreground:oklch(0.21 0.006 285.885);
+      --secondary:         oklch(0.274 0.006 286.033);
+      --secondary-foreground:oklch(0.985 0 0);
+      --muted:             oklch(0.274 0.006 286.033);
+      --muted-foreground:  oklch(0.705 0.015 286.067);
+      --accent:            oklch(0.274 0.006 286.033);
+      --accent-foreground: oklch(0.985 0 0);
+      --destructive:       oklch(0.704 0.191 22.216);
+      --border:            oklch(1 0 0 / 10%);
+      --input:             oklch(1 0 0 / 15%);
+      --ring:              oklch(0.552 0.016 285.938);
+      --success:           oklch(0.747 0.201 143.5);
+      --warning:           oklch(0.762 0.182 61.47);
+    }
+
+    /* ── Ambient blobs ── */
+    @keyframes shimmer {
+      0%   { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+
+    @keyframes fill-bar {
+      from { width: 0%; }
+      to   { width: 100%; }
+    }
+
+    @keyframes slide-out-l {
+      from { transform: translateX(0); }
+      to   { transform: translateX(calc(-100% - 20px)); }
+    }
+    @keyframes slide-out-r {
+      from { transform: translateX(0); }
+      to   { transform: translateX(calc(100% + 20px)); }
+    }
+    @keyframes slide-in-r {
+      from { transform: translateX(calc(100% + 20px)); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes slide-in-l {
+      from { transform: translateX(calc(-100% - 20px)); }
+      to   { transform: translateX(0); }
+    }
+
+    @keyframes blob-drift {
+      0%   { transform: translate(0,0) scale(1); }
+      50%  { transform: translate(30px,-20px) scale(1.06); }
+      100% { transform: translate(-20px,30px) scale(0.96); }
+    }
+
+    @layer components {
+      /* Card */
+      .card {
+        @apply bg-card border border-border rounded-2xl shadow-md transition-colors duration-300;
+      }
+
+      /* Chip / pill button */
+      .chip {
+        @apply bg-card border border-border rounded-full px-3.5 py-1.5 text-card-foreground shadow-xs transition-all;
+      }
+      .chip:hover  { @apply bg-accent border-ring; }
+      .chip:active { @apply opacity-60; }
+      .chip.w-9    { @apply p-0; }
+
+      /* Copy rows */
+      .row {
+        @apply flex items-center px-4 py-3.5 transition-colors;
+      }
+      .row:active { @apply bg-muted; }
+
+      /* Icon button */
+      .icon-btn {
+        @apply flex items-center justify-center size-8 rounded-sm text-muted-foreground bg-secondary border border-transparent shrink-0 transition-colors;
+      }
+      .icon-btn:hover { @apply bg-accent text-card-foreground border-border; }
+
+      /* Primary button */
+      .btn-primary {
+        @apply flex items-center justify-center bg-primary text-primary-foreground border border-border rounded-xl px-6 py-3 text-base font-semibold tracking-tight cursor-pointer shadow-md transition-[background,border-color,transform,opacity];
+      }
+      .btn-primary:hover    { @apply bg-primary/90; }
+      .btn-primary:active   { @apply scale-[0.97] opacity-90; }
+      .btn-primary:disabled { @apply opacity-45 cursor-not-allowed scale-100; }
+
+      /* Secondary button */
+      .btn-secondary {
+        @apply inline-flex items-center justify-center bg-card text-card-foreground border border-border rounded-xl px-7 py-3 text-base font-medium cursor-pointer shadow-sm transition-all;
+      }
+      .btn-secondary:hover  { @apply bg-accent border-ring; }
+      .btn-secondary:active { @apply opacity-70; }
+
+      /* State icon circle */
+      .state-icon {
+        @apply size-20 rounded-full flex items-center justify-center mx-auto;
+      }
+
+      /* Dropdown menu */
+      .menu {
+        @apply bg-popover border border-border rounded-xl shadow-xl overflow-hidden;
+        opacity: 0;
+        transform: translateY(-8px);
+        pointer-events: none;
+        transition: opacity 0.2s, transform 0.2s;
+      }
+      .menu--up       { transform: translateY(8px); }
+      .menu.is-open   { opacity: 1; transform: translateY(0); pointer-events: all; }
+      .menu-item {
+        @apply flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-card-foreground cursor-pointer transition-colors;
+      }
+      .menu-item:hover        { @apply bg-accent; }
+      .menu-item.is-selected  { @apply text-primary font-semibold; }
+      .menu-item + .menu-item { @apply border-t border-border; }
+      .select-trigger.is-open            { opacity: 0.8; }
+      .select-trigger.is-open .select-chevron { transform: rotate(180deg); }
+
+      /* QR wrapper */
+      .qr-wrapper {
+        @apply bg-white rounded-xl p-3.5 border border-border shadow-md inline-block;
+      }
+
+      /* Timer SVG rings */
+      .timer-ring-track    { stroke: var(--border); transition: stroke .3s; }
+      .timer-ring-progress { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear, stroke .5s; }
+      .timer-icon          { @apply text-muted-foreground; }
+
+      /* Flippable status card */
+      .status-card {
+        position: relative;
+        perspective: 1600px;
+        transition: height 0.38s cubic-bezier(.22,1,.36,1);
+      }
+      .status-card-inner {
+        position: relative; width: 100%;
+        transform-style: preserve-3d;
+        transition: transform 0.82s cubic-bezier(.22,.9,.24,1);
+      }
+      .status-card.is-flipped .status-card-inner { transform: rotateY(180deg); }
+      .status-face {
+        @apply absolute inset-0 w-full;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+      }
+      .status-face-front      { z-index: 2; }
+      .status-face-back       { transform: rotateY(180deg); }
+      .state-panel-shell      { @apply pt-px; }
+      .state-screen           { @apply hidden; }
+      .state-screen.is-active { @apply flex; }
+    }
+
+    /* ── Panel viewport: hide scrollbars ── */
+    #panel-viewport { scrollbar-width: none; }
+    #panel-viewport::-webkit-scrollbar { display: none; }
+
+    /* ── Toast ── */
+    #toast {
+      @apply fixed left-1/2 bottom-9 text-sm font-medium px-5 py-2.5 rounded-xl border border-border shadow-xl opacity-0 pointer-events-none whitespace-nowrap z-9999;
+      @apply bg-foreground/95 text-background;
+      @apply dark:bg-card/95 dark:text-card-foreground;
+      transform: translateX(-50%) translateY(12px);
+      transition: opacity 0.22s, transform 0.22s;
+    }
+
+    @keyframes state-in {
+      from { opacity: 0; transform: translateY(12px) scale(0.96); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
+    ::view-transition-old(root) { z-index: 1; }
+    ::view-transition-new(root) { z-index: 9; }
+
+    @media (prefers-reduced-motion: reduce) {
+      .status-card, .status-card-inner, .status-face, .timer-ring-progress {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+      }
     }
   </style>
-  <link rel="stylesheet" href="/static/payment.css" />
   <script defer src="https://cdn.jsdmirror.com/npm/lucide@latest/dist/umd/lucide.min.js"></script>
   <script defer src="https://cdn.jsdmirror.com/npm/qrcodejs@latest/qrcode.min.js"></script>
   <script defer src="https://cdn.jsdmirror.com/npm/clipboard@latest/dist/clipboard.min.js"></script>
 </head>
-<body class="bg-background text-foreground min-h-screen flex flex-col items-center justify-center font-sans transition-colors duration-300">
-
-<!-- Ambient background blobs -->
-<div class="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
-  <div class="blob blob-1"></div>
-  <div class="blob blob-2"></div>
-  <div class="blob blob-3"></div>
-</div>
-
-<div class="flex flex-col items-center w-full max-w-[400px] px-4 py-8 relative z-10">
 
+<body
+  class="bg-background text-foreground min-h-screen flex flex-col items-center font-sans transition-colors duration-300">
   <!-- Nav bar -->
-  <div class="w-full flex items-center justify-between mb-6">
+  <header class="w-full max-w-sm px-4 pt-8 pb-6 flex items-center justify-between relative z-10">
     <div class="flex items-center gap-2">
-      <img src="https://www.gmwallet.app/favicon.png" alt="logo" class="h-8 w-8 rounded-[10px] shadow-sm" />
-      <span class="text-[17px] font-semibold tracking-[-0.3px] text-card-foreground">GM Pay</span>
+      <img src="https://www.gmwallet.app/favicon.png" alt="logo" class="h-8 w-8 rounded-sm shadow-sm" />
+      <span class="text-lg font-semibold tracking-tight text-card-foreground">GM Pay</span>
     </div>
     <div class="flex items-center gap-2">
       <!-- Language pill -->
       <div class="select-wrap relative select-none" id="dd-lang">
-        <div class="select-trigger ios-pill flex items-center gap-1.5 cursor-pointer" onclick="toggleSelect('dd-lang')">
-          <span class="text-[13px] font-medium" id="lang-label">EN</span>
-          <i data-lucide="chevron-down" class="select-chevron text-muted-foreground shrink-0 transition-transform duration-200" width="11" height="11" stroke-width="2.5"></i>
+        <div class="select-trigger chip flex items-center gap-1.5 cursor-pointer" onclick="toggleSelect('dd-lang')">
+          <span class="text-sm font-medium" id="lang-label">EN</span>
+          <i data-lucide="chevron-down"
+            class="select-chevron text-muted-foreground shrink-0 transition-transform duration-200" width="11"
+            height="11" stroke-width="2.5"></i>
         </div>
-        <div class="select-menu ios-menu absolute z-100 top-[calc(100%+12px)] right-0 min-w-[160px] overflow-hidden opacity-0 -translate-y-2 pointer-events-none transition-all duration-200" id="dd-lang-menu">
-          <div class="select-option ios-menu-item is-selected" data-lang="en" onclick="setLang('en')">🇺🇸&nbsp; English</div>
-          <div class="select-option ios-menu-item" data-lang="zh" onclick="setLang('zh')">🇨🇳&nbsp; 中文</div>
-          <div class="select-option ios-menu-item" data-lang="ja" onclick="setLang('ja')">🇯🇵&nbsp; 日本語</div>
-          <div class="select-option ios-menu-item" data-lang="ko" onclick="setLang('ko')">🇰🇷&nbsp; 한국어</div>
-          <div class="select-option ios-menu-item" data-lang="zh-hk" onclick="setLang('zh-hk')">🇭🇰&nbsp; 繁體中文</div>
-          <div class="select-option ios-menu-item" data-lang="ru" onclick="setLang('ru')">🇷🇺&nbsp; Русский</div>
+        <div class="select-menu menu absolute z-100 top-[calc(100%+12px)] right-0 min-w-40" id="dd-lang-menu">
+          <div class="select-option menu-item is-selected" data-lang="en" onclick="setLang('en')">🇺🇸&nbsp; English
+          </div>
+          <div class="select-option menu-item" data-lang="zh" onclick="setLang('zh')">🇨🇳&nbsp; 中文</div>
+          <div class="select-option menu-item" data-lang="ja" onclick="setLang('ja')">🇯🇵&nbsp; 日本語</div>
+          <div class="select-option menu-item" data-lang="ko" onclick="setLang('ko')">🇰🇷&nbsp; 한국어</div>
+          <div class="select-option menu-item" data-lang="zh-hk" onclick="setLang('zh-hk')">🇭🇰&nbsp; 繁體中文</div>
+          <div class="select-option menu-item" data-lang="ru" onclick="setLang('ru')">🇷🇺&nbsp; Русский</div>
         </div>
       </div>
       <!-- Theme toggle -->
-      <button class="ios-pill w-9 h-9 flex items-center justify-center cursor-pointer" onclick="toggleTheme(event)" title="Toggle theme">
+      <button class="chip w-9 h-9 flex items-center justify-center cursor-pointer" onclick="toggleTheme(event)"
+        title="Toggle theme">
         <i data-lucide="moon" id="icon-moon" class="hidden" width="16" height="16" stroke-width="1.8"></i>
         <i data-lucide="sun" id="icon-sun" width="16" height="16" stroke-width="1.8"></i>
       </button>
-    </div>
-  </div>
-
-  <!-- Hero amount card -->
-  <div id="order-info" class="glass-card w-full px-6 pt-6 pb-5 mb-3">
-    <p class="text-[13px] font-medium text-muted-foreground mb-1" data-i18n="amount_to_pay">Amount to pay</p>
-    <div class="flex items-end gap-3 justify-between">
-      <span class="text-[42px] font-bold leading-none tracking-[-0.04em] text-card-foreground font-nunito" id="display-amount">--</span>
-      <button class="ios-icon-btn mb-0.5 shrink-0" id="btn-copy-amount" title="Copy">
-        <i data-lucide="copy" width="15" height="15" stroke-width="2"></i>
-      </button>
-    </div>
-    <div class="flex items-center gap-1.5 mt-1.5" id="display-network">--</div>
-    <div class="mt-3 pt-3 border-t border-border/50">
-      <table class="w-full text-[13px] text-muted-foreground border-separate border-spacing-y-1">
-        <tbody>
-          <tr id="display-fiat"></tr>
-          <tr id="display-order-id"></tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <!-- Flippable payment/state card -->
-  <div id="status-card" class="status-card w-full">
-    <div class="status-card-inner">
-      <div class="status-face status-face-front">
-        <div id="payment-panel" class="w-full">
-
-          <!-- QR section -->
-          <div class="glass-card w-full px-5 py-5 mb-3">
-            <!-- Scan title + small ring -->
-            <div class="flex items-center justify-between mb-3">
-              <p class="text-[13px] font-semibold text-card-foreground" data-i18n="scan_title">Scan or copy address to pay</p>
-              <div id="timer-row" class="relative w-10 h-10 shrink-0">
-                <svg class="w-10 h-10 absolute inset-0" viewBox="0 0 48 48">
-                  <circle class="timer-ring-track" cx="24" cy="24" r="20" fill="none" stroke-width="3"/>
-                  <circle id="ring-track" class="timer-ring-track" cx="24" cy="24" r="20" fill="none" stroke-width="3"/>
-                  <circle id="ring" class="timer-ring-progress" cx="24" cy="24" r="20" fill="none" stroke="#34c759" stroke-width="3"
-                    stroke-linecap="round"
-                    stroke-dasharray="125.66" stroke-dashoffset="0"/>
-                </svg>
-                <div class="absolute inset-0 flex items-center justify-center">
-                  <i data-lucide="timer" class="timer-icon" width="18" height="18" stroke-width="1.8"></i>
-                </div>
-              </div>
-            </div>
-            <!-- Big countdown above QR -->
-            <p class="text-[32px] font-bold font-mono leading-none text-success text-center mb-4" id="countdown">--:--</p>
-            <div class="flex justify-center">
-              <div class="qr-wrapper">
-                <div id="qrcode" class="w-44 h-44"></div>
-              </div>
-            </div>
-          </div>
-          <!-- hidden inline countdown (used by JS, not shown) -->
-          <span id="countdown-inline" class="sr-only"></span>
-
-          <!-- Copy rows -->
-          <div class="glass-card w-full overflow-hidden mb-3">
-            <!-- Amount row -->
-            <div id="copy-amt-box" class="ios-row cursor-pointer select-none">
-              <div class="flex-1 min-w-0">
-                <p class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-0.5" data-i18n="amount_to_pay">Amount to pay</p>
-                <p class="text-[15px] font-semibold text-card-foreground" id="field-amount">--</p>
-              </div>
-              <span class="ios-icon-btn shrink-0 pointer-events-none" id="btn-copy-amt2">
-                <i data-lucide="copy" width="14" height="14" stroke-width="2"></i>
-              </span>
-            </div>
-            <!-- Divider -->
-            <div class="h-px bg-border/50 mx-4"></div>
-            <!-- Address row -->
-            <div id="copy-addr-box" class="ios-row cursor-pointer select-none">
-              <div class="flex-1 min-w-0 pr-3">
-                <p class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-0.5" data-i18n="payment_address">Payment address</p>
-                <p class="text-[13px] font-medium text-card-foreground break-all leading-relaxed" id="field-address">--</p>
-              </div>
-              <span class="ios-icon-btn shrink-0 pointer-events-none self-start mt-0.5" id="btn-copy-addr">
-                <i data-lucide="copy" width="14" height="14" stroke-width="2"></i>
-              </span>
-            </div>
-          </div>
-
-          <!-- CTA -->
-          <button class="ios-btn-primary w-full mb-3" id="btn-transferred" onclick="handleTransfer()">
-            <span data-i18n="i_have_transferred">I have transferred</span>
-          </button>
-
-          <!-- Status -->
-          <div class="flex items-center justify-center gap-1.5 py-1" id="status-row">
-            <i data-lucide="loader-circle" class="animate-spin text-muted-foreground" width="13" height="13" stroke-width="2.2"></i>
-            <span class="text-[12px] text-muted-foreground" id="status-text" data-i18n="checking_blockchain">Checking blockchain</span>
-          </div>
-
+      <!-- Ambient background blobs -->
+      <div class="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
+        <div
+          class="absolute rounded-full blur-[80px] animate-[blob-drift_18s_ease-in-out_infinite_alternate] size-[420px] -top-30 -left-25 bg-[color-mix(in_srgb,var(--muted)_60%,transparent)]">
         </div>
-      </div>
-
-      <div class="status-face status-face-back">
-        <div id="state-panel" class="w-full state-panel-shell">
-          <div class="glass-card w-full flex items-center justify-center min-h-[300px] py-10 px-6">
-
-            <!-- Success -->
-            <div class="animate-state-in state-screen flex flex-col items-center text-center" id="screen-success">
-              <div class="ios-state-icon bg-[rgba(52,199,89,.15)] mb-6">
-                <i data-lucide="check" width="38" height="38" stroke-width="2.2" stroke="#34c759"></i>
-              </div>
-              <p class="text-[20px] font-bold text-card-foreground mb-2" data-i18n="payment_success">Payment Successful</p>
-              <p class="text-[14px] text-muted-foreground mb-6" data-i18n="redirecting">Redirecting…</p>
-              <i data-lucide="loader-circle" class="animate-spin text-muted-foreground" width="22" height="22" stroke-width="2"></i>
-            </div>
-
-            <!-- Expired -->
-            <div class="animate-state-in state-screen flex flex-col items-center text-center" id="screen-expired">
-              <div class="ios-state-icon bg-[rgba(255,59,48,.12)] mb-6">
-                <i data-lucide="x" width="38" height="38" stroke-width="2.2" stroke="#ff3b30"></i>
-              </div>
-              <p class="text-[20px] font-bold text-card-foreground mb-2" data-i18n="payment_expired">Payment Expired</p>
-              <p class="text-[14px] text-muted-foreground mb-7" data-i18n="expired_sub">Please initiate a new payment</p>
-              <button class="ios-btn-secondary" onclick="goBack()" data-i18n="back">Back</button>
-            </div>
-
-            <!-- Timeout -->
-            <div class="animate-state-in state-screen flex flex-col items-center text-center" id="screen-timeout">
-              <div class="ios-state-icon bg-[rgba(255,149,0,.12)] mb-6">
-                <i data-lucide="triangle-alert" width="38" height="38" stroke-width="2.2" stroke="#ff9500"></i>
-              </div>
-              <p class="text-[20px] font-bold text-card-foreground mb-2" data-i18n="network_timeout">Connection Timeout</p>
-              <p class="text-[14px] text-muted-foreground mb-7" data-i18n="timeout_sub">Unable to connect to the payment server</p>
-              <div class="flex gap-3">
-                <button class="ios-btn-secondary" onclick="goBack()" data-i18n="back">Back</button>
-                <button class="ios-btn-primary px-7" onclick="retryPolling()" data-i18n="retry">Retry</button>
-              </div>
-            </div>
-
-            <!-- Not Found -->
-            <div class="animate-state-in state-screen flex flex-col items-center text-center" id="screen-not-found">
-              <div class="ios-state-icon bg-[rgba(142,142,147,.12)] mb-6">
-                <i data-lucide="file-x" width="38" height="38" stroke-width="2" stroke="#8e8e93"></i>
-              </div>
-              <p class="text-[20px] font-bold text-card-foreground mb-2" data-i18n="order_not_found">Order Not Found</p>
-              <p class="text-[14px] text-muted-foreground" data-i18n="not_found_sub">The order does not exist or has already expired</p>
-            </div>
-
-          </div>
+        <div
+          class="absolute rounded-full blur-[80px] animate-[blob-drift_18s_ease-in-out_infinite_alternate] [animation-delay:-6s] size-[340px] -bottom-20 -right-15 bg-[color-mix(in_srgb,var(--success)_14%,transparent)]">
+        </div>
+        <div
+          class="absolute rounded-full blur-[80px] animate-[blob-drift_18s_ease-in-out_infinite_alternate] [animation-delay:-12s] size-[260px] top-[45%] left-[55%] bg-[color-mix(in_srgb,var(--warning)_10%,transparent)]">
         </div>
       </div>
     </div>
-  </div>
+  </header>
+
+  <main class="flex-1 flex flex-col items-center justify-center w-full max-w-sm px-5 relative">
+
+    <!-- Steps -->
+    <div id="step-progress" class="flex items-center gap-2 w-full mb-4 select-none">
+      <div id="step-bar-1" class="h-1 flex-1 rounded-full overflow-hidden"
+        style="background:color-mix(in srgb,var(--foreground) 10%,transparent)">
+        <div id="step-fill-1" class="h-full rounded-full" style="width:0%;background:var(--foreground)"></div>
+      </div>
+      <div id="step-bar-2" class="h-1 flex-1 rounded-full overflow-hidden"
+        style="background:color-mix(in srgb,var(--foreground) 10%,transparent)">
+        <div id="step-fill-2" class="h-full rounded-full" style="width:0%;background:var(--foreground)"></div>
+      </div>
+    </div>
+
+    <!-- Order info -->
+    <aside id="order-info" class="card w-full px-6 pt-6 pb-5 mb-4">
+      <p class="text-sm font-medium text-muted-foreground mb-1" data-i18n="amount_to_pay">Amount to pay</p>
+      <div class="flex items-end gap-3 justify-between">
+        <span class="text-4xl font-bold leading-none tracking-tighter text-card-foreground font-nunito"
+          id="display-amount">--</span>
+        <button class="icon-btn mb-0.5 shrink-0" id="btn-copy-amount" title="Copy">
+          <i data-lucide="copy" width="15" height="15" stroke-width="2"></i>
+        </button>
+      </div>
+      <div class="flex items-center gap-1.5 mt-1.5" id="display-network">--</div>
+      <div class="mt-3 pt-3 border-t border-border/50">
+        <table class="w-full text-sm text-muted-foreground border-separate border-spacing-y-1">
+          <tbody>
+            <tr id="display-fiat"></tr>
+            <tr id="display-order-id"></tr>
+          </tbody>
+        </table>
+      </div>
+    </aside>
+
+    <!-- Panel viewport: clips horizontal slide -->
+    <div class="relative w-full" id="panel-viewport">
+
+      <!-- Step 1: Select coin + network -->
+      <section id="step1-panel" class="w-full mb-4 pb-4">
+        <div class="flex gap-2 mb-4">
+          <!-- Network -->
+          <div class="flex-1 min-w-0">
+            <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1.5"
+              data-i18n="network_label">Network</p>
+            <div class="select-wrap relative select-none" id="dd-network">
+              <div
+                class="select-trigger flex items-center justify-between bg-card border border-border rounded-xl px-3.5 py-3 cursor-pointer gap-2 shadow-sm transition-colors h-[50px]"
+                onclick="toggleSelect('dd-network')">
+                <span id="network-label" class="text-sm font-semibold text-card-foreground leading-none"></span>
+                <i data-lucide="chevron-down"
+                  class="select-chevron text-muted-foreground shrink-0 transition-transform duration-200" width="13"
+                  height="13" stroke-width="2.5"></i>
+              </div>
+              <div class="select-menu menu absolute z-100 top-[calc(100%+8px)] left-0 w-full" id="dd-network-menu">
+              </div>
+            </div>
+          </div>
+          <!-- Currency -->
+          <div class="flex-1 min-w-0">
+            <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1.5"
+              data-i18n="currency_label">Currency</p>
+            <div class="select-wrap relative select-none" id="dd-token">
+              <div
+                class="select-trigger flex items-center justify-between bg-card border border-border rounded-xl px-3.5 py-3 cursor-pointer gap-2 shadow-sm transition-colors h-[50px]"
+                onclick="toggleSelect('dd-token')">
+                <span id="token-label" class="text-sm font-semibold text-card-foreground"></span>
+                <i data-lucide="chevron-down"
+                  class="select-chevron text-muted-foreground shrink-0 transition-transform duration-200" width="13"
+                  height="13" stroke-width="2.5"></i>
+              </div>
+              <div class="select-menu menu absolute z-100 top-[calc(100%+8px)] left-0 w-full" id="dd-token-menu">
+              </div>
+            </div>
+          </div>
+        </div>
+        <button id="btn-confirm-step1" class="btn-primary w-full" onclick="confirmStep1()"
+          data-i18n="confirm">Confirm</button>
+      </section>
+
+      <!-- Payment panel (Step 2) -->
+      <section id="payment-panel" class="w-full pb-4" style="display:none">
+        <!-- QR + address card -->
+        <div class="card w-full px-5 pt-5 pb-0 mb-4 overflow-hidden">
+          <!-- Scan title + timer -->
+          <div class="flex items-center justify-between mb-3">
+            <p class="text-sm font-semibold text-card-foreground" data-i18n="scan_title">Scan or copy address to pay
+            </p>
+            <div id="timer-row" class="relative w-10 h-10 shrink-0">
+              <svg class="w-10 h-10 absolute inset-0" viewBox="0 0 48 48">
+                <circle class="timer-ring-track" cx="24" cy="24" r="20" fill="none" stroke-width="3" />
+                <circle id="ring-track" class="timer-ring-track" cx="24" cy="24" r="20" fill="none" stroke-width="3" />
+                <circle id="ring" class="timer-ring-progress" cx="24" cy="24" r="20" fill="none" stroke="var(--success)"
+                  stroke-width="3" stroke-linecap="round" stroke-dasharray="125.66" stroke-dashoffset="0" />
+              </svg>
+              <div class="absolute inset-0 flex items-center justify-center">
+                <i data-lucide="timer" class="timer-icon" width="18" height="18" stroke-width="1.8"></i>
+              </div>
+            </div>
+          </div>
+          <!-- Countdown -->
+          <p class="text-3xl font-bold font-mono leading-none text-success text-center mb-4" id="countdown">--:--</p>
+          <!-- QR code -->
+          <div class="flex justify-center mb-4">
+            <div class="qr-wrapper">
+              <div id="qrcode" class="w-44 h-44"></div>
+            </div>
+          </div>
+          <!-- Address row (edge-to-edge inside card) -->
+          <div class="h-px bg-border/50 -mx-5"></div>
+          <div id="copy-addr-box" class="row cursor-pointer select-none -mx-5">
+            <div class="flex-1 min-w-0 pr-3">
+              <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-0.5"
+                data-i18n="payment_address">Payment address</p>
+              <p class="text-sm font-medium text-card-foreground break-all leading-relaxed" id="field-address">--</p>
+            </div>
+            <span class="icon-btn shrink-0 pointer-events-none self-start mt-0.5" id="btn-copy-addr">
+              <i data-lucide="copy" width="14" height="14" stroke-width="2"></i>
+            </span>
+          </div>
+        </div>
+        <span id="countdown-inline" class="sr-only"></span>
+        <!-- Connect Wallet (above I have transferred) -->
+        <button class="btn-secondary w-full mb-3" id="btn-connect-wallet" onclick="connectWallet()">
+          <i data-lucide="wallet" width="16" height="16" stroke-width="1.8" class="mr-1.5 shrink-0"></i>
+          <span data-i18n="connect_wallet">Connect Wallet to Pay</span>
+        </button>
+        <!-- I have transferred -->
+        <button class="btn-primary w-full mb-3" id="btn-transferred" onclick="handleTransfer()">
+          <span data-i18n="i_have_transferred">I have transferred</span>
+        </button>
+        <!-- Status -->
+        <div class="flex items-center justify-center gap-1.5 py-1" id="status-row">
+          <i data-lucide="loader-circle" class="animate-spin text-muted-foreground" width="13" height="13"
+            stroke-width="2.2"></i>
+          <span class="text-xs text-muted-foreground" id="status-text" data-i18n="checking_blockchain">Checking
+            blockchain</span>
+        </div>
+      </section>
+
+      <!-- State: Success -->
+      <section id="screen-success"
+        class="card w-full flex flex-col items-center justify-center text-center py-10 px-6 min-h-96 mb-4" role="status"
+        aria-live="polite" style="display:none">
+        <div class="state-icon bg-success/15 mb-6">
+          <i data-lucide="check" width="38" height="38" stroke-width="2.2" stroke="var(--success)"></i>
+        </div>
+        <p class="text-xl font-bold text-card-foreground mb-2" data-i18n="payment_success">Payment Successful</p>
+        <p class="text-sm text-muted-foreground mb-6" data-i18n="redirecting">Redirecting…</p>
+        <i data-lucide="loader-circle" class="animate-spin text-muted-foreground" width="22" height="22"
+          stroke-width="2"></i>
+      </section>
+
+      <!-- State: Expired -->
+      <section id="screen-expired" class="w-full pb-4" role="status" aria-live="polite" style="display:none">
+        <div class="card w-full flex flex-col items-center justify-center text-center py-10 px-6 mb-4">
+          <div class="state-icon bg-destructive/12 mb-6">
+            <i data-lucide="x" width="38" height="38" stroke-width="2.2" stroke="var(--destructive)"></i>
+          </div>
+          <p class="text-xl font-bold text-card-foreground mb-2" data-i18n="payment_expired">Payment Expired</p>
+          <p class="text-sm text-muted-foreground" data-i18n="expired_sub">Please initiate a new payment</p>
+        </div>
+        <button class="btn-secondary w-full" onclick="goBack()" data-i18n="back">Back</button>
+      </section>
+
+      <!-- State: Timeout -->
+      <section id="screen-timeout" class="w-full pb-4" role="status" aria-live="polite" style="display:none">
+        <div class="card w-full flex flex-col items-center justify-center text-center py-10 px-6 mb-4">
+          <div class="state-icon bg-warning/12 mb-6">
+            <i data-lucide="triangle-alert" width="38" height="38" stroke-width="2.2" stroke="var(--warning)"></i>
+          </div>
+          <p class="text-xl font-bold text-card-foreground mb-2" data-i18n="network_timeout">Connection Timeout</p>
+          <p class="text-sm text-muted-foreground" data-i18n="timeout_sub">Unable to connect to the payment server</p>
+        </div>
+        <div class="flex gap-3">
+          <button class="btn-secondary flex-1" onclick="goBack()" data-i18n="back">Back</button>
+          <button class="btn-primary flex-1" onclick="retryPolling()" data-i18n="retry">Retry</button>
+        </div>
+      </section>
+
+      <!-- State: Not Found -->
+      <section id="screen-not-found"
+        class="card w-full flex flex-col items-center justify-center text-center py-10 px-6 min-h-96 mb-4" role="status"
+        aria-live="polite" style="display:none">
+        <div class="state-icon bg-muted-foreground/12 mb-6">
+          <i data-lucide="file-x" width="38" height="38" stroke-width="2" stroke="var(--muted-foreground)"></i>
+        </div>
+        <p class="text-xl font-bold text-card-foreground mb-2" data-i18n="order_not_found">Order Not Found</p>
+        <p class="text-sm text-muted-foreground" data-i18n="not_found_sub">The order does not exist or has already
+          expired
+        </p>
+      </section>
+
+    </div><!-- /panel viewport -->
+
+  </main>
 
   <!-- Footer -->
-  <footer class="flex items-center justify-center gap-2.5 mt-6 text-[12px] text-muted-foreground select-none">
+  <footer class="flex items-center justify-center gap-2.5 pb-6 text-xs text-muted-foreground select-none relative z-10">
     <span class="flex items-center gap-1.5">
       Powered by
-      <a href="https://www.gmwallet.app" target="_blank" rel="noopener" class="flex items-center gap-1 font-semibold text-card-foreground hover:opacity-70 transition-opacity">
-        <img src="https://www.gmwallet.app/favicon.png" alt="GM Wallet" class="h-3.5 w-3.5 rounded-[3px]" />
+      <a href="https://www.gmwallet.app" target="_blank" rel="noopener"
+        class="flex items-center gap-1 font-semibold text-card-foreground hover:opacity-70 transition-opacity">
+        <img src="https://www.gmwallet.app/favicon.png" alt="GM Wallet" class="h-3.5 w-3.5 rounded-xs" />
         GM Wallet
       </a>
     </span>
     <span class="opacity-30">|</span>
-    <a href="https://github.com/GMwalletApp/epusdt" target="_blank" rel="noopener" class="flex items-center gap-1 hover:opacity-70 transition-opacity">
+    <a href="https://github.com/GMwalletApp" target="_blank" rel="noopener"
+      class="flex items-center gap-1 hover:opacity-70 transition-opacity">
       Open source on <span class="font-semibold text-card-foreground">GitHub</span>
     </a>
   </footer>
 
-</div>
+  <!-- Toast -->
+  <div id="toast">Copied</div>
 
-<!-- Toast -->
-<div id="toast">Copied</div>
-
-<!-- Order data injected by server (Go template) -->
-<script>
-  var ORDER = {
-    tradeId:        "{{.TradeId}}",
-    amount:         "{{.Amount}}",
-    actualAmount:   "{{.ActualAmount}}",
-    token:          "{{.Token}}",
-    currency:       "{{.Currency}}",
-    network:        "{{.Network}}",
-    receiveAddress: "{{.ReceiveAddress}}",
-    expirationTime: "{{.ExpirationTime}}",
-    redirectUrl:    "{{.RedirectUrl}}",
-    createdAt:      "{{.CreatedAt}}"
-  };
-</script>
-<script defer src="/static/payment.js"></script>
+  <!-- Order data injected by server (Go template) -->
+  <script>
+    var ORDER = {
+      tradeId: "{{.TradeId}}",
+      amount: "{{.Amount}}",
+      actualAmount: "{{.ActualAmount}}",
+      token: "{{.Token}}",
+      currency: "{{.Currency}}",
+      network: "{{.Network}}",
+      receiveAddress: "{{.ReceiveAddress}}",
+      expirationTime: "{{.ExpirationTime}}",
+      redirectUrl: "{{.RedirectUrl}}",
+      createdAt: "{{.CreatedAt}}",
+      is_selected: "{{.IsSelected}}"
+    };
+    var PAYMENT_OPTIONS = null;
+  </script>
+  <script defer src="/static/payment.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/static/payment.css b/src/static/payment.css
deleted file mode 100644
index 67e1b4b..0000000
--- a/src/static/payment.css
+++ /dev/null
@@ -1,395 +0,0 @@
-/* =============================================
-   iOS 26 Liquid Glass Design System
-   ============================================= */
-
-/* ---------- CSS Variables ---------- */
-:root, [data-theme="light"] {
-  --background:        #f2f2f7;
-  --foreground:        #1c1c1e;
-  --card:              rgba(255,255,255,0.72);
-  --card-foreground:   #1c1c1e;
-  --popover:           rgba(255,255,255,0.88);
-  --popover-foreground:#1c1c1e;
-  --primary:           #ffffff;
-  --primary-foreground:#1c1c1e;
-  --primary-hover:     #e5e5ea;
-  --secondary:         rgba(120,120,128,0.12);
-  --muted:             rgba(120,120,128,0.08);
-  --muted-foreground:  #8e8e93;
-  --accent:            rgba(255,255,255,0.12);
-  --accent-foreground: #1c1c1e;
-  --border:            rgba(60,60,67,0.12);
-  --border-hover:      rgba(60,60,67,0.22);
-  --success:           #34c759;
-  --warning:           #ff9500;
-  --destructive:       #ff3b30;
-
-  --glass-bg:          rgba(255,255,255,0.65);
-  --glass-border:      rgba(255,255,255,0.8);
-  --glass-shadow:      0 8px 40px rgba(0,0,0,.10), 0 1.5px 0 rgba(255,255,255,.9) inset;
-  --card-shadow:       0 4px 24px rgba(0,0,0,.08);
-  --popover-shadow:    0 12px 40px rgba(0,0,0,.14);
-
-  --blob-1: rgba(200,200,200,0.18);
-  --blob-2: rgba(52,199,89,0.14);
-  --blob-3: rgba(255,149,0,0.10);
-}
-
-[data-theme="dark"] {
-  --background:        #000000;
-  --foreground:        #f5f5f7;
-  --card:              rgba(28,28,30,0.82);
-  --card-foreground:   #f5f5f7;
-  --popover:           rgba(44,44,46,0.92);
-  --popover-foreground:#e5e5ea;
-  --primary:           #ffffff;
-  --primary-foreground:#1c1c1e;
-  --primary-hover:     #e5e5ea;
-  --secondary:         rgba(120,120,128,0.18);
-  --muted:             rgba(120,120,128,0.12);
-  --muted-foreground:  #636366;
-  --accent:            rgba(255,255,255,0.15);
-  --accent-foreground: #ffffff;
-  --border:            rgba(255,255,255,0.1);
-  --border-hover:      rgba(255,255,255,0.18);
-  --success:           #30d158;
-  --warning:           #ff9f0a;
-  --destructive:       #ff453a;
-
-  --glass-bg:          rgba(28,28,30,0.75);
-  --glass-border:      rgba(255,255,255,0.10);
-  --glass-shadow:      0 8px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset;
-  --card-shadow:       0 4px 32px rgba(0,0,0,.55);
-  --popover-shadow:    0 12px 40px rgba(0,0,0,.5);
-
-  --blob-1: rgba(255,255,255,0.14);
-  --blob-2: rgba(48,209,88,0.10);
-  --blob-3: rgba(255,159,10,0.08);
-}
-
-/* ---------- Ambient blobs ---------- */
-.blob {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  animation: blob-drift 18s ease-in-out infinite alternate;
-}
-.blob-1 {
-  width: 420px; height: 420px;
-  background: var(--blob-1);
-  top: -120px; left: -100px;
-  animation-delay: 0s;
-}
-.blob-2 {
-  width: 340px; height: 340px;
-  background: var(--blob-2);
-  bottom: -80px; right: -60px;
-  animation-delay: -6s;
-}
-.blob-3 {
-  width: 260px; height: 260px;
-  background: var(--blob-3);
-  top: 45%; left: 55%;
-  animation-delay: -12s;
-}
-@keyframes blob-drift {
-  0%   { transform: translate(0,0) scale(1); }
-  50%  { transform: translate(30px,-20px) scale(1.06); }
-  100% { transform: translate(-20px,30px) scale(0.96); }
-}
-
-/* ---------- Liquid Glass Card ---------- */
-.glass-card {
-  background: var(--glass-bg);
-  -webkit-backdrop-filter: blur(28px) saturate(1.6);
-  backdrop-filter: blur(28px) saturate(1.6);
-  border: 1px solid var(--glass-border);
-  border-radius: 22px;
-  box-shadow: var(--glass-shadow);
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
-}
-
-/* ---------- Flippable Status Card ---------- */
-.status-card {
-  position: relative;
-  perspective: 1600px;
-  transition: height 0.38s cubic-bezier(.22,1,.36,1);
-}
-.status-card-inner {
-  position: relative;
-  width: 100%;
-  transform-style: preserve-3d;
-  transition: transform 0.82s cubic-bezier(.22,.9,.24,1);
-}
-.status-card.is-flipped .status-card-inner {
-  transform: rotateY(180deg);
-}
-.status-face {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  transform-style: preserve-3d;
-}
-.status-face-front {
-  z-index: 2;
-}
-.status-face-back {
-  transform: rotateY(180deg);
-}
-.state-panel-shell {
-  padding-top: 2px;
-}
-.state-screen {
-  display: none;
-}
-.state-screen.is-active {
-  display: flex;
-}
-
-/* ---------- Timer ---------- */
-.timer-ring-track {
-  stroke: var(--border);
-  transition: stroke .3s;
-}
-.timer-ring-progress {
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-  transition: stroke-dashoffset 1s linear, stroke .5s;
-}
-.timer-icon {
-  color: var(--muted-foreground);
-}
-
-/* ---------- QR wrapper ---------- */
-.qr-wrapper {
-  background: #ffffff;
-  border-radius: 18px;
-  padding: 14px;
-  box-shadow: 0 2px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
-  display: inline-block;
-}
-
-/* ---------- iOS Pill button ---------- */
-.ios-pill {
-  background: var(--glass-bg);
-  -webkit-backdrop-filter: blur(16px) saturate(1.4);
-  backdrop-filter: blur(16px) saturate(1.4);
-  border: 1px solid var(--glass-border);
-  border-radius: 99px;
-  padding: 6px 13px;
-  color: var(--card-foreground);
-  transition: background 0.15s, opacity 0.15s;
-}
-.ios-pill:hover { opacity: 0.82; }
-.ios-pill:active { opacity: 0.6; }
-.ios-pill.w-9 { padding: 0; justify-content: center; }
-
-/* ---------- iOS Rows ---------- */
-.ios-row {
-  display: flex;
-  align-items: center;
-  padding: 14px 16px;
-  transition: background 0.12s;
-}
-.ios-row:active { background: var(--muted); }
-
-/* ---------- Icon button ---------- */
-.ios-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px; height: 32px;
-  border-radius: 10px;
-  color: var(--muted-foreground);
-  background: var(--secondary);
-  transition: background 0.15s, color 0.15s;
-  flex-shrink: 0;
-}
-.ios-icon-btn:hover { background: var(--accent); color: var(--primary); }
-
-/* ---------- Primary CTA button ---------- */
-.ios-btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--primary);
-  color: var(--primary-foreground);
-  border: none;
-  border-radius: 16px;
-  padding: 16px 24px;
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  cursor: pointer;
-  transition: background 0.15s, transform 0.1s, opacity 0.15s;
-  box-shadow: 0 4px 18px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,.2) inset;
-}
-[data-theme="dark"] .ios-btn-primary {
-  box-shadow: 0 4px 18px rgba(255,255,255,0.18), 0 1px 0 rgba(255,255,255,.12) inset;
-}
-.ios-btn-primary:hover { background: var(--primary-hover); }
-.ios-btn-primary:active { transform: scale(0.97); opacity: 0.9; }
-.ios-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
-
-/* ---------- Secondary button ---------- */
-.ios-btn-secondary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--secondary);
-  color: var(--card-foreground);
-  border: 1px solid var(--border);
-  border-radius: 13px;
-  padding: 11px 28px;
-  font-size: 15px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s, opacity 0.15s;
-}
-.ios-btn-secondary:hover { background: var(--accent); }
-.ios-btn-secondary:active { opacity: 0.7; }
-
-/* ---------- State icon circle ---------- */
-.ios-state-icon {
-  width: 76px; height: 76px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-/* ---------- Context Menu ---------- */
-.ios-menu {
-  background: var(--popover);
-  -webkit-backdrop-filter: blur(30px) saturate(1.8);
-  backdrop-filter: blur(30px) saturate(1.8);
-  border: 1px solid var(--glass-border);
-  border-radius: 16px;
-  box-shadow: var(--popover-shadow);
-  overflow: hidden;
-}
-.ios-menu.is-open {
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: all;
-}
-.ios-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 11px 15px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--card-foreground);
-  cursor: pointer;
-  transition: background 0.1s;
-}
-.ios-menu-item:hover { background: var(--accent); }
-.ios-menu-item.is-selected { color: var(--primary); font-weight: 600; }
-.ios-menu-item + .ios-menu-item { border-top: 1px solid var(--border); }
-
-/* ---------- Select states ---------- */
-.select-trigger.is-open { opacity: 0.8; }
-.select-trigger.is-open .select-chevron { transform: rotate(180deg); }
-
-/* ---------- Toast ---------- */
-#toast {
-  position: fixed;
-  bottom: 36px;
-  left: 50%;
-  transform: translateX(-50%) translateY(12px);
-  background: rgba(28,28,30,0.88);
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 500;
-  padding: 10px 20px;
-  border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.12);
-  box-shadow: 0 4px 20px rgba(0,0,0,.3);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.22s, transform 0.22s;
-  z-index: 9999;
-  white-space: nowrap;
-}
-[data-theme="light"] #toast {
-  background: rgba(44,44,46,0.9);
-}
-
-/* ---------- Animations ---------- */
-@keyframes state-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.96); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* ---------- View Transition ---------- */
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-::view-transition-old(root) { z-index: 1; }
-::view-transition-new(root) { z-index: 9; }
-
-/* ---------- Debug toolbar ---------- */
-#debug-bar {
-  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
-  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
-}
-#debug-toggle {
-  width: 36px; height: 36px; border-radius: 50%; border: none;
-  background: #7c3aed; color: #fff; cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  box-shadow: 0 2px 12px rgba(124,58,237,.5);
-  transition: background .15s, transform .1s;
-}
-#debug-toggle:hover { background: #6d28d9; }
-#debug-toggle:active { transform: scale(.92); }
-#debug-panel {
-  display: none; flex-direction: column; gap: 5px;
-  background: rgba(15,15,20,.92);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(124,58,237,.35); border-radius: 14px;
-  padding: 12px; min-width: 150px;
-  box-shadow: 0 8px 32px rgba(0,0,0,.5);
-}
-#debug-panel.is-open { display: flex; }
-.debug-label {
-  font-size: 10px; font-weight: 700; color: #a78bfa;
-  letter-spacing: .12em; text-transform: uppercase;
-  margin-bottom: 4px; padding-bottom: 6px;
-  border-bottom: 1px solid rgba(255,255,255,.08);
-}
-.debug-btn {
-  background: rgba(255,255,255,.07); color: #d1d5db;
-  border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
-  padding: 6px 10px; font-size: 12px; font-weight: 500;
-  cursor: pointer; text-align: left; font-family: inherit;
-  transition: background .12s, color .12s;
-}
-.debug-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
-.debug-btn--reset:hover   { border-color: #60a5fa; color: #93c5fd; }
-.debug-btn--success:hover { border-color: #34d399; color: #6ee7b7; }
-.debug-btn--expired:hover { border-color: #f87171; color: #fca5a5; }
-.debug-btn--timeout:hover { border-color: #fb923c; color: #fdba74; }
-.debug-btn--urgent:hover  { border-color: #facc15; color: #fde68a; }
-.debug-btn--not-found {
-  background: rgba(142,142,147,.15);
-  color: #8e8e93;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .status-card,
-  .status-card-inner,
-  .status-face,
-  .timer-ring-progress {
-    transition-duration: 0.01ms !important;
-    animation-duration: 0.01ms !important;
-  }
-}
diff --git a/src/static/payment.js b/src/static/payment.js
index 8e2b252..ab4eee3 100644
--- a/src/static/payment.js
+++ b/src/static/payment.js
@@ -1,24 +1,86 @@
+/* =============================================================
+ *  GM Pay — payment.js
+ *  后端对接只需关注:
+ *    1. CONFIG.api.selectMethod — Step 1 确认接口（POST 币种/网络，返回收款地址）
+ *    2. CONFIG.api.checkStatus  — 轮询接口 URL
+ *    3. CONFIG.api.statusMap    — 状态码映射
+ *    4. index.html 底部 <script> 中 ORDER / PAYMENT_OPTIONS 变量
+ * ============================================================= */
 
+'use strict';
 
-// DOM helpers
+// ── DOM helpers ───────────────────────────────────────────────
 const $ = (id) => document.getElementById(id);
 const $$ = (sel) => document.querySelectorAll(sel);
-
-// ---- Network Tag ----
-const _CHAIN_PRESETS = {
-  Ethereum: { bg: 'hsla(0,0%,55%,0.25)',      color: 'hsla(0,0%,55%,1)',      icon: 'ethereum' },
-  Solana:   { bg: 'hsla(256,85%,65%,0.25)',   color: 'hsla(256,85%,65%,1)',   icon: 'solana' },
-  BSC:      { bg: 'hsla(46,91%,49%,0.25)',    color: 'hsla(46,91%,49%,1)',    icon: 'bsc' },
-  Arbitrum: { bg: 'hsla(202,100%,54%,0.25)',  color: 'hsla(202,100%,54%,1)',  icon: 'arbitrum' },
-  TRON:     { bg: 'hsla(350,100%,47%,0.20)',  color: 'hsla(350,100%,47%,1)',  icon: 'tron' },
-  Polygon:  { bg: 'hsla(263,73%,56%,0.25)',   color: 'hsla(263,73%,56%,1)',   icon: 'polygon' },
-  Base:     { bg: 'hsla(240,100%,61%,0.25)',  color: 'hsla(240,100%,61%,1)',  icon: 'base' },
-  OP:       { bg: 'hsla(353,99%,51%,0.25)',   color: 'hsla(353,99%,51%,1)',   icon: 'op' },
-  HyperEVM: { bg: 'hsla(166,94%,79%,0.20)',  color: 'hsla(166,94%,79%,1)',   icon: 'hyperevm' },
-  Plasma:   { bg: 'hsla(166,64%,32%,0.25)',   color: 'hsla(166,64%,32%,1)',   icon: 'plasma' },
-  Bitcoin:  { bg: 'hsla(33,93%,54%,0.20)',    color: 'hsla(33,93%,54%,1)',    icon: 'bitcoin' },
-  Binance:  { bg: 'hsla(46,91%,49%,0.24)',    color: 'hsla(46,91%,49%,1)',    icon: 'binance' },
+const setText = (id, value) => {
+  const el = $(id);
+  if (el) el.textContent = value;
+  return el;
 };
+const setHtml = (id, value) => {
+  const el = $(id);
+  if (el) el.innerHTML = value;
+  return el;
+};
+
+// ── 全局配置（可按项目调整）─────────────────────────────────
+const CONFIG = {
+  poll: {
+    interval:  5000,   // 轮询间隔（毫秒）
+    maxErrors: 5,      // 最多连续错误次数，超出进入 timeout 状态
+    timeout:   8000,   // 单次请求超时（毫秒）
+  },
+  redirect: {
+    delay: 3000,       // 支付成功后自动跳转延迟（毫秒）
+  },
+  // ---- 后端接口 ----
+  api: {
+    // 切换网络接口：POST { trade_id, token, network }，返回完整订单对象
+    selectMethod: () => '/pay/switch-network',
+    // 轮询接口：GET，返回 { data: { status: number } }
+    checkStatus: (tradeId) => `/pay/check-status/${encodeURIComponent(tradeId)}`,
+    // status 状态码映射
+    statusMap: {
+      paid:    2,   // 支付成功
+      expired: 3,   // 已过期
+    },
+  },
+  // ---- 连接钱包 ----
+  wallet: {
+    enabled: false,   // false = 隐藏「连接钱包支付」按钮
+    // TronLink deeplink，如需支持其他钱包替换此处
+    deeplink: (currentUrl) => {
+      const param = JSON.stringify({
+        url:       currentUrl,
+        action:    'open',
+        dapp_name: 'GM Pay',
+        dapp_icon: 'https://www.gmwallet.app/favicon.png',
+      });
+      return 'tronlinkoutside://pull.activity?param=' + encodeURIComponent(param);
+    },
+  },
+};
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 1 — 链图标 / 网络渲染
+// ═══════════════════════════════════════════════════════════════
+
+const _CHAIN_PRESETS = {
+  Ethereum: { bg: 'hsla(0,0%,55%,0.25)',     color: 'hsla(0,0%,55%,1)',     icon: 'ethereum' },
+  Solana:   { bg: 'hsla(256,85%,65%,0.25)',  color: 'hsla(256,85%,65%,1)',  icon: 'solana'   },
+  BSC:      { bg: 'hsla(46,91%,49%,0.25)',   color: 'hsla(46,91%,49%,1)',   icon: 'bsc'      },
+  Arbitrum: { bg: 'hsla(202,100%,54%,0.25)', color: 'hsla(202,100%,54%,1)', icon: 'arbitrum' },
+  TRON:     { bg: 'hsla(350,100%,47%,0.20)', color: 'hsla(350,100%,47%,1)', icon: 'tron'     },
+  Polygon:  { bg: 'hsla(263,73%,56%,0.25)',  color: 'hsla(263,73%,56%,1)',  icon: 'polygon'  },
+  Base:     { bg: 'hsla(240,100%,61%,0.25)', color: 'hsla(240,100%,61%,1)', icon: 'base'     },
+  OP:       { bg: 'hsla(353,99%,51%,0.25)',  color: 'hsla(353,99%,51%,1)',  icon: 'op'       },
+  HyperEVM: { bg: 'hsla(166,94%,79%,0.20)', color: 'hsla(166,94%,79%,1)',  icon: 'hyperevm' },
+  Plasma:   { bg: 'hsla(166,64%,32%,0.25)',  color: 'hsla(166,64%,32%,1)',  icon: 'plasma'   },
+  Bitcoin:  { bg: 'hsla(33,93%,54%,0.20)',   color: 'hsla(33,93%,54%,1)',   icon: 'bitcoin'  },
+  Binance:  { bg: 'hsla(46,91%,49%,0.24)',   color: 'hsla(46,91%,49%,1)',   icon: 'binance'  },
+};
+
 const _CHAIN_ALIASES = {
   evm:'Ethereum', eth:'Ethereum', ethereum:'Ethereum',
   bsc:'BSC', bnb:'BSC',
@@ -33,22 +95,68 @@ const _CHAIN_ALIASES = {
   bitcoin:'Bitcoin', btc:'Bitcoin',
   binance:'Binance', bnb_chain:'Binance',
 };
+
+const IMAGE_PREFIX = {
+  chain: '/static/images/',
+  tokenTrigger: 'https://cdn.jsdmirror.com/gh/atomiclabs/cryptocurrency-icons@1a63530/128/color/',
+  tokenMenu: 'https://cdn.jsdmirror.com/gh/atomiclabs/cryptocurrency-icons@1a63530/128/color/',
+};
+
 function _resolveChain(name) {
   if (!name) return null;
   const k = name.trim().toLowerCase();
   const canonical = _CHAIN_ALIASES[k] || Object.keys(_CHAIN_PRESETS).find(c => c.toLowerCase() === k);
   return canonical ? { label: canonical, ..._CHAIN_PRESETS[canonical] } : null;
 }
+
+/** 用于 order-info 顶部的网络 tag badge */
 function networkTag(network) {
   const chain = _resolveChain(network);
   if (!chain) return `<span style="font-weight:600;color:var(--card-foreground)">${network}</span>`;
-  return `<span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:99px;background:${chain.bg};color:${chain.color};font-size:12px;font-weight:600;line-height:1.6"><img src="/static/images/${chain.icon}.png" width="14" height="14" style="width:14px;height:14px;border-radius:50%;object-fit:cover;flex-shrink:0" />${chain.label}</span>`;
+  return `<span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:99px;background:${chain.bg};color:${chain.color};font-size:12px;font-weight:600;line-height:1.6">
+    <img src="${IMAGE_PREFIX.chain}${chain.icon}.png" width="14" height="14" style="width:14px;height:14px;border-radius:50%;object-fit:cover;flex-shrink:0" />
+    ${chain.label}
+  </span>`;
 }
 
-// Initialize Lucide icons
+/** 选择器触发器显示：网络 */
+function _networkTriggerHtml(network) {
+  const chain = _resolveChain(network);
+  if (!chain) return `<span class="text-sm font-semibold" style="color:var(--card-foreground)">${network || '--'}</span>`;
+  return `<span style="display:inline-flex;align-items:center;gap:7px">
+    <img src="${IMAGE_PREFIX.chain}${chain.icon}.png" width="18" height="18" style="width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0" />
+    <span class="text-sm font-semibold" style="color:var(--card-foreground)">${chain.label}</span>
+  </span>`;
+}
+
+/** 选择器触发器显示：Token */
+function _tokenTriggerHtml(token) {
+  if (!token) return `<span class="text-sm font-semibold" style="color:var(--card-foreground)">--</span>`;
+  const src = `${IMAGE_PREFIX.tokenTrigger}${token.toLowerCase()}.png`;
+  return `<span style="display:inline-flex;align-items:center;gap:7px">
+    <img src="${src}" width="18" height="18" style="width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0" onerror="this.style.display='none'" />
+    <span class="text-sm font-semibold" style="color:var(--card-foreground)">${token}</span>
+  </span>`;
+}
+
+/** 下拉菜单中的网络选项 */
+function _networkMenuItemHtml(opt, selected) {
+  const chain = _resolveChain(opt.network);
+  const icon = chain
+    ? `<img src="${IMAGE_PREFIX.chain}${chain.icon}.png" width="16" height="16" style="width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0" />`
+    : '';
+  return `<div class="select-option menu-item${selected ? ' is-selected' : ''}"
+    onclick="step1SetNetwork('${opt.network}')"
+    style="display:flex;align-items:center;gap:8px">${icon}${chain ? chain.label : opt.network}</div>`;
+}
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 2 — 主题 & Lucide 图标
+// ═══════════════════════════════════════════════════════════════
+
 if (typeof lucide !== 'undefined') lucide.createIcons();
 
-// Theme
 let currentTheme = localStorage.getItem('theme') || 'dark';
 applyTheme(currentTheme);
 
@@ -66,17 +174,19 @@ function toggleTheme(e) {
   const x = e ? e.clientX : window.innerWidth / 2;
   const y = e ? e.clientY : window.innerHeight / 2;
   const r = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
-  const transition = document.startViewTransition(() => applyTheme(next));
-  transition.ready.then(() => {
-    const clip = [`circle(0px at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`];
+  document.startViewTransition(() => applyTheme(next)).ready.then(() => {
     document.documentElement.animate(
-      { clipPath: clip },
+      { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`] },
       { duration: 420, easing: 'ease-in-out', pseudoElement: '::view-transition-new(root)' }
     );
   });
 }
 
-// i18n
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 3 — 国际化 (i18n)
+// ═══════════════════════════════════════════════════════════════
+
 const LANGS = {
   en: {
     scan_title:          'Scan or copy address to pay',
@@ -99,6 +209,11 @@ const LANGS = {
     back:                'Back',
     order_not_found:     'Order Not Found',
     not_found_sub:       'The order does not exist or has already expired',
+    select_method:       'Select payment method',
+    currency_label:      'Currency',
+    network_label:       'Network',
+    confirm:             'Confirm',
+    connect_wallet:      'Connect Wallet to Pay',
   },
   zh: {
     scan_title:          '扫码或复制地址付款',
@@ -121,6 +236,11 @@ const LANGS = {
     back:                '返回',
     order_not_found:     '订单不存在',
     not_found_sub:       '待支付订单不存在或已过期',
+    select_method:       '选择支付方式',
+    currency_label:      '币种',
+    network_label:       '网络',
+    confirm:             '确认',
+    connect_wallet:      '连接钱包支付',
   },
   ja: {
     scan_title:          'アドレスをスキャンまたはコピーして支払う',
@@ -143,6 +263,11 @@ const LANGS = {
     back:                '戻る',
     order_not_found:     '注文が見つかりません',
     not_found_sub:       '注文が存在しないか、すでに期限切れです',
+    select_method:       '支払い方法を選択',
+    currency_label:      '通貨',
+    network_label:       'ネットワーク',
+    confirm:             '確認',
+    connect_wallet:      'ウォレットで支払う',
   },
   ko: {
     scan_title:          '주소를 스캔하거나 복사하여 결제',
@@ -165,6 +290,11 @@ const LANGS = {
     back:                '돌아가기',
     order_not_found:     '주문 없음',
     not_found_sub:       '주문이 존재하지 않거나 이미 만료되었습니다',
+    select_method:       '결제 수단 선택',
+    currency_label:      '통화',
+    network_label:       '네트워크',
+    confirm:             '확인',
+    connect_wallet:      '지갑으로 결제',
   },
   'zh-hk': {
     scan_title:          '掃碼或複製地址付款',
@@ -187,6 +317,11 @@ const LANGS = {
     back:                '返回',
     order_not_found:     '訂單不存在',
     not_found_sub:       '待支付訂單不存在或已過期',
+    select_method:       '選擇支付方式',
+    currency_label:      '幣種',
+    network_label:       '網絡',
+    confirm:             '確認',
+    connect_wallet:      '連接錢包支付',
   },
   ru: {
     scan_title:          'Отсканируйте или скопируйте адрес для оплаты',
@@ -209,12 +344,18 @@ const LANGS = {
     back:                'Назад',
     order_not_found:     'Заказ не найден',
     not_found_sub:       'Заказ не существует или уже истёк',
+    select_method:       'Выберите способ оплаты',
+    currency_label:      'Валюта',
+    network_label:       'Сеть',
+    confirm:             'Подтвердить',
+    connect_wallet:      'Оплатить через кошелёк',
   },
 };
 
-const LANG_LABELS = { en: 'EN', zh: '中文', 'zh-hk': '繁體', ja: '日本語', ko: '한국어', ru: 'RU' };
-const SUPPORTED_LANGS = Object.keys(LANGS); // ['en','zh','ja','ko','zh-hk','ru']
+const LANG_LABELS    = { en: 'EN', zh: '中文', 'zh-hk': '繁體', ja: '日本語', ko: '한국어', ru: 'RU' };
+const SUPPORTED_LANGS = Object.keys(LANGS);
 let currentLang = 'en';
+
 const t = (key) => LANGS[currentLang]?.[key] ?? key;
 
 function detectLang() {
@@ -239,34 +380,38 @@ function setLang(lang) {
     const v = t(el.dataset.i18n);
     if (v) el.textContent = v;
   });
-  $('lang-label').textContent = LANG_LABELS[lang];
+  setText('lang-label', LANG_LABELS[lang]);
   $$('#dd-lang-menu .select-option').forEach(o =>
     o.classList.toggle('is-selected', o.dataset.lang === lang));
   closeAllSelects();
-  if (ORDER.tradeId) { renderOrderId(); }
-  if (ORDER.amount && !ORDER.amount.startsWith('{{')) {
+  // 重新渲染含翻译文案的动态行
+  if (ORDER?.tradeId) renderOrderId();
+  if (ORDER?.amount && !ORDER.amount.startsWith('{{')) {
     renderRow('display-fiat', t('order_amount'), `${ORDER.amount} ${ORDER.currency || ''}`);
   }
-  requestAnimationFrame(syncStatusCardHeight);
 }
 
-// Select dropdown
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 4 — 下拉选择器
+// ═══════════════════════════════════════════════════════════════
+
 function toggleSelect(id) {
-  const wrap = $(id);
+  const wrap    = $(id);
   const trigger = wrap.querySelector('.select-trigger');
-  const menu = wrap.querySelector('.select-menu');
+  const menu    = wrap.querySelector('.select-menu');
   const wasOpen = menu.classList.contains('is-open');
   closeAllSelects();
   if (!wasOpen) {
     menu.classList.add('is-open');
-    trigger.classList.add('is-open');
+    trigger?.classList.add('is-open');
   }
 }
 
 function closeAllSelects() {
   $$('.select-menu.is-open').forEach(m => {
     m.classList.remove('is-open');
-    m.closest('.select-wrap').querySelector('.select-trigger').classList.remove('is-open');
+    m.closest('.select-wrap')?.querySelector('.select-trigger')?.classList.remove('is-open');
   });
 }
 
@@ -274,17 +419,22 @@ document.addEventListener('click', (e) => {
   if (!e.target.closest('.select-wrap')) closeAllSelects();
 });
 
-// Clipboard fallback (used when ClipboardJS is unavailable)
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 5 — Toast & Clipboard
+// ═══════════════════════════════════════════════════════════════
+
 const CHECK_ICON = '<i data-lucide="check" width="15" height="15" stroke-width="2.5" color="#22c55e"></i>';
 
-function showToast() {
+function showToast(msg) {
   const el = $('toast');
-  el.textContent = t('copied');
-  el.style.opacity = '1';
+  if (!el) return;
+  el.textContent = msg || t('copied');
+  el.style.opacity   = '1';
   el.style.transform = 'translateX(-50%) translateY(0)';
   clearTimeout(el._tid);
   el._tid = setTimeout(() => {
-    el.style.opacity = '0';
+    el.style.opacity   = '0';
     el.style.transform = 'translateX(-50%) translateY(10px)';
   }, 2000);
 }
@@ -298,91 +448,17 @@ function flashCheck(btnId) {
   setTimeout(() => { btn.innerHTML = orig; lucide.createIcons({ nodes: [btn] }); }, 1800);
 }
 
-// Transfer button
-function handleTransfer() {
-  const btn = $('btn-transferred');
-  const span = btn.querySelector('span');
-  span.textContent = t('verifying');
-  btn.disabled = true;
-  _pollErrors = 0;
-  _pollStopped = false;
-  clearTimeout(_pollTimer);
-  checkOrderStatus();
-  setTimeout(() => {
-    span.textContent = t('i_have_transferred');
-    btn.disabled = false;
-  }, 4000);
-}
-
-// Order
-function truncateAddr(addr) {
-  return addr.length > 10 ? `${addr.slice(0, 4)}...${addr.slice(-6)}` : addr;
-}
-
-function formatAddr(addr) {
-  if (!addr || addr.length <= 10) return addr;
-  const pre = addr.slice(0, 4);
-  const mid = addr.slice(4, -6);
-  const suf = addr.slice(-6);
-  return `<span style="font-weight:800;color:var(--primary)">${pre}</span><span style="color:var(--muted-foreground)">${mid}</span><span style="font-weight:800;color:var(--primary)">${suf}</span>`;
-}
-
-function renderRow(id, label, value) {
-  const el = $(id);
-  if (el) el.innerHTML = `<td style="width:1%;white-space:nowrap;padding-right:0.75em;">${label}</td><td style="color:var(--card-foreground);font-weight:500;word-break:break-all">${value}</td>`;
-}
-
-function renderOrderId() {
-  if (ORDER.tradeId && !ORDER.tradeId.startsWith('{{')) {
-    renderRow('display-order-id', t('order_id'), ORDER.tradeId);
-  }
-}
-
-function initOrder() {
-  if (!ORDER.tradeId || ORDER.tradeId.startsWith('{{')) {
-    showNotFound();
-    return;
-  }
-
-  $('display-amount').textContent = `${ORDER.actualAmount} ${ORDER.token}`;
-  $('field-amount').textContent   = `${ORDER.actualAmount} ${ORDER.token}`;
-  $('field-address').innerHTML    = formatAddr(ORDER.receiveAddress);
-  if (ORDER.amount && !ORDER.amount.startsWith('{{')) {
-    renderRow('display-fiat', t('order_amount'), `${ORDER.amount} ${ORDER.currency || ''}`);
-  }
-  $('display-network').innerHTML = networkTag(ORDER.network);
-  renderOrderId();
-
-  new QRCode($('qrcode'), {
-    text:         ORDER.receiveAddress,
-    width:        176,
-    height:       176,
-    colorDark:    '#111111',
-    colorLight:   '#ffffff',
-    correctLevel: QRCode.CorrectLevel.M,
-  });
-
-  initCountdown();
-  checkOrderStatus();
-  initClipboard();
-}
-
-// Clipboard
 let _clipboard = null;
 
 function initClipboard() {
   const targets = [
-    { id: 'copy-amt-box',    text: ORDER.actualAmount, iconId: 'btn-copy-amt2'   },
-    { id: 'copy-addr-box',   text: ORDER.receiveAddress, iconId: 'btn-copy-addr' },
-    { id: 'btn-copy-amount', text: ORDER.actualAmount, iconId: 'btn-copy-amount' },
+    { id: 'copy-addr-box',   text: ORDER.receiveAddress, iconId: 'btn-copy-addr'   },
+    { id: 'btn-copy-amount', text: ORDER.actualAmount,   iconId: 'btn-copy-amount' },
   ];
+  targets.forEach(({ id, text }) => $(id)?.setAttribute('data-clipboard-text', text));
 
   if (typeof ClipboardJS !== 'undefined') {
-    targets.forEach(({ id, text }) => {
-      const el = $(id);
-      if (el) el.setAttribute('data-clipboard-text', text);
-    });
-    if (_clipboard) _clipboard.destroy();
+    _clipboard?.destroy();
     _clipboard = new ClipboardJS(targets.map(c => '#' + c.id).join(', '));
     _clipboard.on('success', e => {
       e.clearSelection();
@@ -392,79 +468,362 @@ function initClipboard() {
     });
   }
 }
-// Countdown color interpolation (green → orange → red by ratio)
-function lerpColor(a, b, t) {
-  return `rgb(${Math.round(a[0]+(b[0]-a[0])*t)},${Math.round(a[1]+(b[1]-a[1])*t)},${Math.round(a[2]+(b[2]-a[2])*t)})`;
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 6 — 面板切换 & 导航
+// ═══════════════════════════════════════════════════════════════
+
+const PANEL_IDS = {
+  step1:       'step1-panel',
+  payment:     'payment-panel',
+  success:     'screen-success',
+  expired:     'screen-expired',
+  timeout:     'screen-timeout',
+  'not-found': 'screen-not-found',
+};
+const PANEL_ORDER = ['step1', 'payment', 'success', 'expired', 'timeout', 'not-found'];
+let _currentPanel = 'step1';
+
+function slideTo(name, dir) {
+  const fromEl   = $(PANEL_IDS[_currentPanel]);
+  const toEl     = $(PANEL_IDS[name]);
+  const viewport = $('panel-viewport');
+  if (!toEl || name === _currentPanel) return;
+
+  const d = dir ?? (PANEL_ORDER.indexOf(name) >= PANEL_ORDER.indexOf(_currentPanel) ? 1 : -1);
+  _currentPanel = name;
+
+  if (viewport) viewport.style.overflowX = 'hidden'; // 动画期间裁剪
+
+  if (fromEl) {
+    Object.assign(fromEl.style, { position: 'absolute', top: '0', left: '0', width: '100%' });
+    fromEl.style.animation = `${d > 0 ? 'slide-out-l' : 'slide-out-r'} 0.38s cubic-bezier(.4,0,.2,1) forwards`;
+    fromEl.addEventListener('animationend', () => {
+      fromEl.style.cssText = 'display:none';
+      if (viewport) viewport.style.overflowX = '';
+    }, { once: true });
+  } else if (viewport) {
+    setTimeout(() => { viewport.style.overflowX = ''; }, 420);
+  }
+
+  toEl.style.display   = '';
+  toEl.style.animation = `${d > 0 ? 'slide-in-r' : 'slide-in-l'} 0.38s cubic-bezier(.4,0,.2,1) forwards`;
 }
-function ratioColor(ratio) {
+
+function showStatePanel(state) {
+  const isNotFound = state === 'not-found';
+  const orderInfo = $('order-info');
+  const stepProgress = $('step-progress');
+  if (orderInfo) orderInfo.style.display = isNotFound ? 'none' : '';
+  if (stepProgress) stepProgress.style.display = isNotFound ? 'none' : '';
+  slideTo(state);
+}
+
+function hideStatePanel() {
+  const orderInfo = $('order-info');
+  const stepProgress = $('step-progress');
+  if (orderInfo) orderInfo.style.display = '';
+  if (stepProgress) stepProgress.style.display = '';
+  slideTo('payment', -1);
+}
+
+function goBack() {
+  if (ORDER?.redirectUrl && !ORDER.redirectUrl.startsWith('{{')) {
+    window.location.href = ORDER.redirectUrl;
+  } else if (document.referrer) {
+    window.location.href = document.referrer;
+  } else {
+    history.back();
+  }
+}
+
+function syncStatusCardHeight() {} // 兼容旧调用，保留空桩
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 7 — 步骤进度条
+// ═══════════════════════════════════════════════════════════════
+
+function setStepBar(step) {
+  const f1 = $('step-fill-1');
+  const f2 = $('step-fill-2');
+  if (!f1) return;
+  const BASE = 'height:100%;border-radius:9999px;background:var(--foreground);';
+  if (step === 1) {
+    f1.style.cssText = BASE + 'animation:fill-bar 0.9s ease-out forwards';
+    f2.style.cssText = BASE + 'width:0%';
+  } else {
+    f1.style.cssText = BASE + 'width:100%';
+    f2.style.cssText = BASE + 'animation:fill-bar 0.9s ease-out forwards';
+  }
+}
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 8 — Step 1 — 币种 & 网络选择
+// ═══════════════════════════════════════════════════════════════
+
+let _step1Token = null;
+let _step1Opt   = null;
+
+// 内置优先网络，按顺序匹配第一个可用选项
+const _PREFERRED_NETWORKS = ['TRON', 'Solana'];
+
+function initStep1() {
+  // 按内置优先顺序找到首个可用选项
+  _step1Opt = null;
+  for (const net of _PREFERRED_NETWORKS) {
+    _step1Opt = PAYMENT_OPTIONS.find(
+      o => (_resolveChain(o.network)?.label ?? o.network) === net
+    );
+    if (_step1Opt) break;
+  }
+  _step1Opt   = _step1Opt ?? PAYMENT_OPTIONS[0];
+  _step1Token = _step1Opt.token;
+  _renderNetworkMenu();
+  _renderTokenMenu();
+}
+
+function _renderTokenMenu() {
+  // 按当前选中网络过滤可用币种
+  const opts = PAYMENT_OPTIONS.filter(o => o.network === _step1Opt?.network);
+  const tokens = [...new Set(opts.map(o => o.token))];
+  // 若当前 token 在新网络下不存在则重置为第一个
+  if (!tokens.includes(_step1Token)) {
+    _step1Token = tokens[0] ?? null;
+    _step1Opt   = opts[0] ?? _step1Opt;
+  }
+  const menu = $('dd-token-menu');
+  if (!menu) return;
+  menu.innerHTML = tokens.map(tok => {
+    const src = `${IMAGE_PREFIX.tokenMenu}${tok.toLowerCase()}.png`;
+    return `<div class="select-option menu-item${tok === _step1Token ? ' is-selected' : ''}"
+      onclick="step1SetToken('${tok}')"
+      style="display:flex;align-items:center;gap:8px">
+      <img src="${src}" width="16" height="16" style="width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0" onerror="this.style.display='none'" />
+      ${tok}
+    </div>`;
+  }).join('');
+  setHtml('token-label', _tokenTriggerHtml(_step1Token));
+}
+
+function _renderNetworkMenu() {
+  // 去重，每个网络只显示一项
+  const seen = new Set();
+  const networkOpts = PAYMENT_OPTIONS.filter(o => {
+    if (seen.has(o.network)) return false;
+    seen.add(o.network);
+    return true;
+  });
+  const menu = $('dd-network-menu');
+  if (menu) menu.innerHTML = networkOpts.map(opt => _networkMenuItemHtml(opt, opt.network === _step1Opt?.network)).join('');
+  setHtml('network-label', _networkTriggerHtml(_step1Opt?.network || '--'));
+}
+
+function step1SetToken(tok) {
+  _step1Token = tok;
+  // 在当前网络下找对应 opt
+  _step1Opt = PAYMENT_OPTIONS.find(o => o.network === _step1Opt?.network && o.token === tok) ?? _step1Opt;
+  setHtml('token-label', _tokenTriggerHtml(tok));
+  $$('#dd-token-menu .select-option').forEach(o =>
+    o.classList.toggle('is-selected', o.textContent.trim() === tok));
+  closeAllSelects();
+}
+
+function step1SetNetwork(networkName) {
+  // 找该网络下第一个 opt 作为默认
+  _step1Opt = PAYMENT_OPTIONS.find(o => o.network === networkName) ?? _step1Opt;
+  const chain = _resolveChain(networkName);
+  const label = chain ? chain.label : networkName;
+  $$('#dd-network-menu .select-option').forEach(o =>
+    o.classList.toggle('is-selected', o.textContent.trim() === label));
+  setHtml('network-label', _networkTriggerHtml(_step1Opt.network));
+  _renderTokenMenu();
+  closeAllSelects();
+}
+
+async function confirmStep1() {
+  const opt = _step1Opt || PAYMENT_OPTIONS[0];
+  const btn  = $('btn-confirm-step1');
+  const span = btn?.querySelector('span') ?? btn;
+  const origText = span?.textContent;
+
+  // 1. 乐观 UI：禁用按钮防止重复提交
+  if (btn) { btn.disabled = true; if (span) span.textContent = '…'; }
+
+  try {
+    const res = await fetch(CONFIG.api.selectMethod(), {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+      body:    JSON.stringify({
+        trade_id: ORDER.tradeId,
+        token:    opt.token.toLowerCase(),
+        network:  opt.network.toLowerCase(),
+      }),
+      signal:  AbortSignal.timeout(10000),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const resp = await res.json();
+    const data = resp?.data ?? resp;
+
+    // 2. 用后端返回的完整订单字段更新 ORDER，本地选项作为兜底
+    ORDER.tradeId        = data?.trade_id        ?? ORDER.tradeId;
+    // 同步新 trade_id 到 URL（路径末段），轮询将自动使用最新值
+    if (data?.trade_id) {
+      const _url = new URL(window.location.href);
+      _url.pathname = _url.pathname.replace(/\/[^/]+$/, '/' + encodeURIComponent(data.trade_id));
+      history.replaceState(null, '', _url.toString());
+      renderOrderId();
+    }
+    ORDER.token          = data?.token           ?? opt.token;
+    ORDER.network        = data?.network         ?? opt.network;
+    ORDER.actualAmount   = data?.actual_amount   != null ? String(data.actual_amount) : opt.actualAmount;
+    ORDER.amount         = data?.amount          != null ? String(data.amount)         : ORDER.amount;
+    ORDER.currency       = data?.currency        ?? ORDER.currency;
+    ORDER.receiveAddress = data?.receive_address ?? opt.receiveAddress;
+    if (data?.expiration_time != null) ORDER.expirationTime = String(data.expiration_time);
+    if (data?.created_at      != null) ORDER.createdAt      = String(data.created_at);
+    if (data?.redirect_url)            ORDER.redirectUrl    = data.redirect_url;
+
+    setStepBar(2);
+    slideTo('payment');
+    initOrder();
+  } catch (err) {
+    console.error('[confirmStep1]', err);
+    showToast('⚠ ' + (err.message || 'Request failed'));
+  } finally {
+    if (btn) { btn.disabled = false; if (span && origText) span.textContent = origText; }
+  }
+}
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 9 — 订单渲染 & 倒计时
+// ═══════════════════════════════════════════════════════════════
+
+function truncateAddr(addr) {
+  return addr && addr.length > 10 ? `${addr.slice(0, 4)}...${addr.slice(-6)}` : addr;
+}
+
+function formatAddr(addr) {
+  if (!addr || addr.length <= 10) return addr;
+  return `<span style="font-weight:800;color:var(--primary)">${addr.slice(0, 4)}</span>`
+       + `<span style="color:var(--muted-foreground)">${addr.slice(4, -6)}</span>`
+       + `<span style="font-weight:800;color:var(--primary)">${addr.slice(-6)}</span>`;
+}
+
+function renderRow(id, label, value) {
+  const el = $(id);
+  if (el) el.innerHTML = `
+    <td style="width:1%;white-space:nowrap;padding-right:0.75em">${label}</td>
+    <td style="color:var(--card-foreground);font-weight:500;word-break:break-all">${value}</td>`;
+}
+
+function renderOrderId() {
+  if (ORDER?.tradeId && !ORDER.tradeId.startsWith('{{')) {
+    renderRow('display-order-id', t('order_id'), ORDER.tradeId);
+  }
+}
+
+function initOrder() {
+  if (!ORDER?.tradeId || ORDER.tradeId.startsWith('{{')) { showNotFound(); return; }
+
+  setText('display-amount', `${ORDER.actualAmount} ${ORDER.token}`);
+  setHtml('field-address', formatAddr(ORDER.receiveAddress));
+  setHtml('display-network', networkTag(ORDER.network));
+
+  if (ORDER.amount && !ORDER.amount.startsWith('{{')) {
+    renderRow('display-fiat', t('order_amount'), `${ORDER.amount} ${ORDER.currency || ''}`);
+  }
+  renderOrderId();
+
+  const qrcodeEl = $('qrcode');
+  if (qrcodeEl) {
+    new QRCode(qrcodeEl, {
+      text:         ORDER.receiveAddress,
+      width:        176,
+      height:       176,
+      colorDark:    '#111111',
+      colorLight:   '#ffffff',
+      correctLevel: QRCode.CorrectLevel.M,
+    });
+  }
+
+  initCountdown();
+  checkOrderStatus();
+  initClipboard();
+}
+
+// 倒计时内部状态
+const CIRCUMFERENCE = 2 * Math.PI * 20;
+const _pad = (n) => String(n).padStart(2, '0');
+let _countdownInterval = null;
+let _totalSeconds      = 0;
+let _expiresAt         = null;
+
+function _lerpColor(a, b, ratio) {
+  return `rgb(${[0,1,2].map(i => Math.round(a[i] + (b[i] - a[i]) * ratio)).join(',')})`;
+}
+function _ratioColor(ratio) {
   if (ratio >= 0.5) return '#22c55e';
-  if (ratio >= 0.2) return lerpColor([34,197,94], [249,115,22], (0.5 - ratio) / 0.3);
-  return lerpColor([249,115,22], [239,68,68], (0.2 - ratio) / 0.2);
+  if (ratio >= 0.2) return _lerpColor([34,197,94], [249,115,22], (0.5 - ratio) / 0.3);
+  return _lerpColor([249,115,22], [239,68,68], (0.2 - ratio) / 0.2);
 }
 
-const CIRCUMFERENCE = 2 * Math.PI * 20; // r=20 in iOS SVG ring
-let countdownInterval = null;
-let totalSeconds = 0;
-let _expiresAt = null;
-
-const pad = (n) => String(n).padStart(2, '0');
-
 function initCountdown() {
   const parseTime = (raw) => new Date(/^\d+$/.test(String(raw)) ? Number(raw) : raw);
   _expiresAt = parseTime(ORDER.expirationTime);
   const remaining = Math.max(0, Math.round((_expiresAt - Date.now()) / 1000));
   if (remaining <= 0) { showExpired(); return; }
-  // 用 createdAt 和 expirationTime 推算总有效时长，否则默认 600 秒
+
   const created = parseTime(ORDER.createdAt);
-  totalSeconds = (!isNaN(created.getTime()) && !isNaN(_expiresAt.getTime()))
+  _totalSeconds = (!isNaN(created) && !isNaN(_expiresAt))
     ? Math.max(1, Math.round((_expiresAt - created) / 1000))
     : 600;
+
   $('ring').style.strokeDasharray = CIRCUMFERENCE;
-  // 让初始渲染就从 remaining-1 开始，避免视觉上停顿一秒
-  _expiresAt = new Date(_expiresAt.getTime() - 1000);
-  tickCountdown();
-  countdownInterval = setInterval(tickCountdown, 1000);
+  _expiresAt = new Date(_expiresAt.getTime() - 1000); // 避免初始渲染停顿
+  _tickCountdown();
+  _countdownInterval = setInterval(_tickCountdown, 1000);
 }
 
-function tickCountdown() {
+function _tickCountdown() {
   const remaining = Math.max(0, Math.round((_expiresAt - Date.now()) / 1000));
   const h = Math.floor(remaining / 3600);
   const m = Math.floor((remaining % 3600) / 60);
   const s = remaining % 60;
+  const timeStr = h > 0 ? `${_pad(h)}:${_pad(m)}:${_pad(s)}` : `${_pad(m)}:${_pad(s)}`;
+  const color   = _ratioColor(_totalSeconds > 0 ? remaining / _totalSeconds : 0);
+  const offset  = CIRCUMFERENCE * (1 - (_totalSeconds > 0 ? remaining / _totalSeconds : 0));
 
-  const timeStr = h > 0
-    ? `${pad(h)}:${pad(m)}:${pad(s)}`
-    : `${pad(m)}:${pad(s)}`;
+  $('countdown').textContent        = timeStr;
+  $('countdown').style.color        = color;
+  $('ring').style.stroke            = color;
+  $('ring').style.strokeDashoffset  = offset;
 
-  $('countdown').textContent = timeStr;
   const inlineEl = $('countdown-inline');
-
-  const color = ratioColor(totalSeconds > 0 ? remaining / totalSeconds : 0);
   if (inlineEl) { inlineEl.textContent = timeStr; inlineEl.style.color = color; }
 
-  $('ring').style.strokeDashoffset = CIRCUMFERENCE * (1 - (totalSeconds > 0 ? remaining / totalSeconds : 0));
-
-  $('countdown').style.color = color;
-  $('ring').style.stroke = color;
-
-  if (remaining <= 0) {
-    clearInterval(countdownInterval);
-    showExpired();
-  }
+  if (remaining <= 0) { clearInterval(_countdownInterval); showExpired(); }
 }
 
-// Polling
-let _pollTimer = null;
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 10 — API 轮询
+//  后端对接：修改 CONFIG.api.checkStatus 与 CONFIG.api.statusMap
+// ═══════════════════════════════════════════════════════════════
+
+let _pollTimer   = null;
 let _pollStopped = false;
-let _pollErrors = 0;
-const MAX_POLL_ERRORS = 5;
+let _pollErrors  = 0;
 
 function checkOrderStatus() {
-  if (_pollStopped || !ORDER.tradeId || ORDER.tradeId.startsWith('{{')) return;
+  if (_pollStopped || !ORDER?.tradeId || ORDER.tradeId.startsWith('{{')) return;
 
-  fetch(`/pay/check-status/${encodeURIComponent(ORDER.tradeId)}`, {
+  fetch(CONFIG.api.checkStatus(ORDER.tradeId), {
     headers: { Accept: 'application/json' },
-    signal: AbortSignal.timeout(8000),
+    signal:  AbortSignal.timeout(CONFIG.poll.timeout),
   })
     .then(res => {
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -472,88 +831,52 @@ function checkOrderStatus() {
     })
     .then(({ data }) => {
       _pollErrors = 0;
-      if (data?.status === 2) onPaymentSuccess();
-      else if (data?.status === 3) showExpired();
-      else scheduleNextPoll();
+      const { paid, expired } = CONFIG.api.statusMap;
+      if (data?.status === paid)         onPaymentSuccess();
+      else if (data?.status === expired) showExpired();
+      else                               _scheduleNextPoll();
     })
     .catch(() => {
-      if (++_pollErrors >= MAX_POLL_ERRORS) showTimeout();
-      else scheduleNextPoll();
+      if (++_pollErrors >= CONFIG.poll.maxErrors) showTimeout();
+      else _scheduleNextPoll();
     });
 }
 
-const scheduleNextPoll = () => {
-  if (!_pollStopped) _pollTimer = setTimeout(checkOrderStatus, 5000);
-};
+function _scheduleNextPoll() {
+  if (!_pollStopped) _pollTimer = setTimeout(checkOrderStatus, CONFIG.poll.interval);
+}
 
 function stopPolling() {
   _pollStopped = true;
   clearTimeout(_pollTimer);
 }
 
-// State panels
-const SCREENS = ['screen-success', 'screen-expired', 'screen-timeout', 'screen-not-found'];
-
-function syncStatusCardHeight() {
-  const card = $('status-card');
-  const inner = card?.querySelector('.status-card-inner');
-  if (!card || !inner) return;
-
-  const activeFace = card.classList.contains('is-flipped')
-    ? card.querySelector('.status-face-back')
-    : card.querySelector('.status-face-front');
-
-  const nextHeight = activeFace?.scrollHeight || 0;
-  if (nextHeight > 0) {
-    card.style.height = `${nextHeight}px`;
-    inner.style.height = `${nextHeight}px`;
-  }
+function retryPolling() {
+  _pollErrors  = 0;
+  _pollStopped = false;
+  hideStatePanel();
+  checkOrderStatus();
 }
 
-function setActiveScreen(state) {
-  SCREENS.forEach(id => $(id).classList.toggle('is-active', id === `screen-${state}`));
-}
 
-function flipToState(state) {
-  setActiveScreen(state);
-  $('status-card').classList.add('is-flipped');
-  requestAnimationFrame(syncStatusCardHeight);
-}
-
-function showStatePanel(state) {
-  $('order-info').style.display = state === 'not-found' ? 'none' : '';
-  flipToState(state);
-}
-
-function goBack() {
-  if (document.referrer) {
-    window.location.href = document.referrer;
-  } else if (ORDER.redirectUrl && !ORDER.redirectUrl.startsWith('{{')) {
-    window.location.href = ORDER.redirectUrl;
-  } else {
-    history.back();
-  }
-}
-
-function hideStatePanel() {
-  $('status-card').classList.remove('is-flipped');
-  $('order-info').style.display = '';
-  requestAnimationFrame(syncStatusCardHeight);
-}
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 11 — 支付状态处理
+// ═══════════════════════════════════════════════════════════════
 
 function onPaymentSuccess() {
   stopPolling();
-  clearInterval(countdownInterval);
+  clearInterval(_countdownInterval);
   showStatePanel('success');
-  if (ORDER.redirectUrl && !ORDER.redirectUrl.startsWith('{{')) {
-    setTimeout(() => { window.location.href = ORDER.redirectUrl; }, 3000);
+  if (ORDER?.redirectUrl && !ORDER.redirectUrl.startsWith('{{')) {
+    setTimeout(() => { window.location.href = ORDER.redirectUrl; }, CONFIG.redirect.delay);
   }
 }
 
 function showExpired() {
   stopPolling();
-  clearInterval(countdownInterval);
-  $('btn-transferred').disabled = true;
+  clearInterval(_countdownInterval);
+  const btn = $('btn-transferred');
+  if (btn) btn.disabled = true;
   showStatePanel('expired');
 }
 
@@ -564,22 +887,86 @@ function showTimeout() {
 
 function showNotFound() {
   stopPolling();
-  clearInterval(countdownInterval);
-  $('btn-transferred').disabled = true;
+  clearInterval(_countdownInterval);
+  const btn = $('btn-transferred');
+  if (btn) btn.disabled = true;
   showStatePanel('not-found');
 }
 
-function retryPolling() {
-  _pollErrors = 0;
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 12 — 转账按钮 & 连接钱包
+// ═══════════════════════════════════════════════════════════════
+
+function handleTransfer() {
+  const btn  = $('btn-transferred');
+  if (!btn) return;
+  const span = btn.querySelector('span');
+  if (!span) return;
+  span.textContent = t('verifying');
+  btn.disabled     = true;
+  _pollErrors  = 0;
   _pollStopped = false;
-  hideStatePanel();
+  clearTimeout(_pollTimer);
   checkOrderStatus();
+  setTimeout(() => {
+    span.textContent = t('i_have_transferred');
+    btn.disabled     = false;
+  }, 4000);
 }
 
+function connectWallet() {
+  window.location.href = CONFIG.wallet.deeplink(window.location.href);
+}
+
+
+// ═══════════════════════════════════════════════════════════════
+//  SECTION 13 — 初始化入口
+// ═══════════════════════════════════════════════════════════════
+
 document.addEventListener('DOMContentLoaded', () => {
   setLang(detectLang());
-  initOrder();
-  syncStatusCardHeight();
-  window.addEventListener('resize', syncStatusCardHeight);
+
+  if (!ORDER?.tradeId || ORDER.tradeId.startsWith('{{')) {
+    showNotFound();
+    return;
+  }
+
+  // 在 Step 1 阶段就填充订单信息卡片
+  if (ORDER.amount && !ORDER.amount.startsWith('{{')) {
+    renderRow('display-fiat', t('order_amount'), `${ORDER.amount} ${ORDER.currency || ''}`);
+    setText('display-amount', `${ORDER.amount} ${ORDER.currency || ''}`);
+  }
+  renderOrderId();
+
+  // 确保 PAYMENT_OPTIONS 存在（服务端未注入时降级为内置默认选项）
+  if (typeof PAYMENT_OPTIONS === 'undefined' || !Array.isArray(PAYMENT_OPTIONS) || !PAYMENT_OPTIONS.length) {
+    window.PAYMENT_OPTIONS = [
+      { token: 'USDT', network: 'TRON',     actualAmount: ORDER.actualAmount, receiveAddress: ORDER.receiveAddress },
+      { token: 'TRX',  network: 'TRON',     actualAmount: ORDER.actualAmount, receiveAddress: ORDER.receiveAddress },
+      { token: 'USDT', network: 'Solana',   actualAmount: ORDER.actualAmount, receiveAddress: ORDER.receiveAddress },
+      { token: 'USDC', network: 'Solana',   actualAmount: ORDER.actualAmount, receiveAddress: ORDER.receiveAddress },
+      { token: 'USDT', network: 'Ethereum', actualAmount: ORDER.actualAmount, receiveAddress: ORDER.receiveAddress },
+      { token: 'USDC', network: 'Ethereum', actualAmount: ORDER.actualAmount, receiveAddress: ORDER.receiveAddress },
+    ];
+  }
+
+  // isselect=true 时跳过 Step 1，直接进入支付面板
+  const _isSelect = ORDER.is_selected && ORDER.is_selected !== 'false' && !ORDER.is_selected.startsWith('{{');
+  if (_isSelect) {
+    $('step1-panel').style.display = 'none';
+    $('payment-panel').style.display = '';
+    _currentPanel = 'payment';
+    setStepBar(2);
+    initOrder();
+  } else {
+    initStep1();
+    setStepBar(1);
+  }
+
+  // 连接钱包按钮开关
+  const walletBtn = $('btn-connect-wallet');
+  if (walletBtn) walletBtn.style.display = CONFIG.wallet.enabled ? '' : 'none';
 });
 
+
diff --git a/src/telegram/utils.go b/src/telegram/utils.go
index c08aeb5..fde9c66 100644
--- a/src/telegram/utils.go
+++ b/src/telegram/utils.go
@@ -7,6 +7,7 @@ import (
 
 	"github.com/assimon/luuu/model/mdb"
 	"github.com/btcsuite/btcutil/base58"
+	"github.com/gagliardetto/solana-go"
 )
 
 // isValidEthereumAddress 校验 0x + 20 字节十六进制（主网收款）。
@@ -46,15 +47,6 @@ func isValidTronAddress(addr string) bool {
 	return string(checksum) == string(hash2[:4])
 }
 
-func isValidSolanaAddress(addr string) bool {
-	addr = strings.TrimSpace(addr)
-	if addr == "" {
-		return false
-	}
-	decoded := base58.Decode(addr)
-	return len(decoded) == 32
-}
-
 func isValidAddressByNetwork(network, addr string) bool {
 	switch strings.ToLower(strings.TrimSpace(network)) {
 	case mdb.NetworkTron:
@@ -76,3 +68,13 @@ func normalizeWalletAddressByNetwork(network, addr string) string {
 		return strings.ToLower(addr)
 	}
 }
+
+// isValidSolanaAddress 校验 Solana Base58 地址是否合法（32 字节公钥）。
+func isValidSolanaAddress(addr string) bool {
+	addr = strings.TrimSpace(addr)
+	if len(addr) < 32 || len(addr) > 44 {
+		return false
+	}
+	_, err := solana.PublicKeyFromBase58(addr)
+	return err == nil
+}
diff --git a/src/util/constant/errno.go b/src/util/constant/errno.go
index a94ec79..d38ca17 100644
--- a/src/util/constant/errno.go
+++ b/src/util/constant/errno.go
@@ -13,25 +13,31 @@ var Errno = map[int]string{
 	10008: "order does not exist",
 	10009: "failed to parse request params",
 	10010: "order status already changed",
-	10011: "supported asset already exists",
-	10012: "supported asset not found",
+	10011: "exceeded maximum sub-order limit",
+	10012: "cannot switch network on a sub-order",
+	10013: "order is not awaiting payment",
+	10014: "supported asset already exists",
+	10015: "supported asset not found",
 }
 
 var (
-	SystemErr                   = Err(400)
-	SignatureErr                = Err(401)
-	WalletAddressAlreadyExists  = Err(10001)
-	OrderAlreadyExists          = Err(10002)
-	NotAvailableWalletAddress   = Err(10003)
-	PayAmountErr                = Err(10004)
-	NotAvailableAmountErr       = Err(10005)
-	RateAmountErr               = Err(10006)
-	OrderBlockAlreadyProcess    = Err(10007)
-	OrderNotExists              = Err(10008)
-	ParamsMarshalErr            = Err(10009)
-	OrderStatusConflict         = Err(10010)
-	SupportedAssetAlreadyExists = Err(10011)
-	SupportedAssetNotFound      = Err(10012)
+	SystemErr                  = Err(400)
+	SignatureErr               = Err(401)
+	WalletAddressAlreadyExists = Err(10001)
+	OrderAlreadyExists         = Err(10002)
+	NotAvailableWalletAddress  = Err(10003)
+	PayAmountErr               = Err(10004)
+	NotAvailableAmountErr      = Err(10005)
+	RateAmountErr              = Err(10006)
+	OrderBlockAlreadyProcess   = Err(10007)
+	OrderNotExists             = Err(10008)
+	ParamsMarshalErr           = Err(10009)
+	OrderStatusConflict        = Err(10010)
+	SubOrderLimitExceeded      = Err(10011)
+	CannotSwitchSubOrder       = Err(10012)
+	OrderNotWaitPay            = Err(10013)
+	SupportedAssetAlreadyExists = Err(10014)
+	SupportedAssetNotFound      = Err(10015)
 )
 
 type RspError struct {