From 75dd8d7920abc31ec2d356afd1f3a2d64d709d26 Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Sat, 27 Jun 2026 18:45:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAh5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 recharge/create.html | 1636 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 1346 insertions(+), 290 deletions(-)

diff --git a/recharge/create.html b/recharge/create.html
index e68bbb5..8c121bc 100644
--- a/recharge/create.html
+++ b/recharge/create.html
@@ -6,132 +6,181 @@
         <title>三方临时支付链接</title>
         <link rel="stylesheet" href="../common/theme.css" />
         <style>
+            :root {
+                --pay-page-bg: #f5f7fb;
+                --pay-ink: #111827;
+                --pay-ink-strong: #07111f;
+                --pay-muted: #697386;
+                --pay-muted-soft: #8b94a7;
+                --pay-line: #dde4f0;
+                --pay-line-strong: #c6cfde;
+                --pay-surface: #ffffff;
+                --pay-surface-soft: #f8fafd;
+                --pay-surface-hover: #f2f5fa;
+                --pay-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+                --pay-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.06);
+                --pay-accent: var(--hy-theme-primary-strong);
+                --pay-accent-deep: var(--hy-theme-primary-deep);
+                --pay-accent-soft: var(--hy-theme-primary-soft);
+                --pay-focus: var(--hy-theme-focus-ring);
+                --pay-success: var(--hy-theme-success);
+                --pay-danger: var(--hy-theme-danger);
+            }
+
             * {
                 box-sizing: border-box;
             }
 
+            [hidden] {
+                display: none !important;
+            }
+
             body {
+                min-height: 100vh;
                 margin: 0;
-                background: var(--hy-theme-bg);
-                color: var(--hy-theme-text);
+                background: var(--pay-page-bg);
+                color: var(--pay-ink);
                 font-family:
-                    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                    Inter,
+                    ui-sans-serif,
+                    system-ui,
+                    -apple-system,
+                    BlinkMacSystemFont,
+                    'Segoe UI',
+                    sans-serif;
+                letter-spacing: 0;
             }
 
             button,
             input,
-            select,
             textarea {
                 font: inherit;
+                letter-spacing: 0;
+            }
+
+            button {
+                appearance: none;
+                -webkit-appearance: none;
+            }
+
+            input,
+            textarea {
+                appearance: none;
+                -webkit-appearance: none;
+                width: 100%;
+                border: 1px solid var(--pay-line);
+                border-radius: 12px;
+                outline: none;
+                background: var(--pay-surface);
+                color: var(--pay-ink);
+                padding: 12px 14px;
+                transition:
+                    border-color 0.16s ease,
+                    box-shadow 0.16s ease,
+                    background 0.16s ease;
+            }
+
+            input {
+                min-height: 48px;
+            }
+
+            textarea {
+                min-height: 96px;
+                resize: vertical;
+            }
+
+            input::placeholder,
+            textarea::placeholder {
+                color: var(--pay-muted-soft);
+            }
+
+            input:focus,
+            textarea:focus {
+                border-color: var(--pay-accent);
+                box-shadow: 0 0 0 4px var(--pay-focus);
             }
 
             .page {
-                width: min(1120px, 100%);
+                width: min(1180px, 100%);
                 margin: 0 auto;
-                padding: 28px 18px 42px;
+                padding: 26px 18px 44px;
             }
 
-            .header {
+            .topbar {
                 display: flex;
-                align-items: flex-end;
+                align-items: flex-start;
                 justify-content: space-between;
-                gap: 16px;
+                gap: 18px;
                 margin-bottom: 18px;
             }
 
+            .title-block {
+                min-width: 0;
+            }
+
+            .kicker {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                margin: 0 0 8px;
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 800;
+                text-transform: uppercase;
+            }
+
+            .kicker::before {
+                width: 8px;
+                height: 8px;
+                border-radius: 999px;
+                background: var(--pay-accent);
+                content: '';
+            }
+
             .title {
                 margin: 0;
-                font-size: 24px;
-                line-height: 1.3;
+                color: var(--pay-ink-strong);
+                font-size: 28px;
+                font-weight: 850;
+                line-height: 1.2;
             }
 
             .meta {
-                margin: 6px 0 0;
-                color: var(--hy-theme-muted);
+                margin: 8px 0 0;
+                color: var(--pay-muted);
                 font-size: 13px;
+                line-height: 1.5;
+                overflow-wrap: anywhere;
             }
 
-            .grid {
-                display: grid;
-                gap: 16px;
-                grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
-            }
-
-            .panel {
-                border: 1px solid var(--hy-theme-line);
-                border-radius: 14px;
-                background: var(--hy-theme-surface);
-                box-shadow: var(--hy-theme-shadow);
-                padding: 18px;
-            }
-
-            .panel h2 {
-                margin: 0 0 16px;
-                font-size: 18px;
-            }
-
-            .form-grid {
-                display: grid;
-                gap: 14px;
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-            }
-
-            .field {
-                display: flex;
-                min-width: 0;
-                flex-direction: column;
-                gap: 7px;
-            }
-
-            .field.full {
-                grid-column: 1 / -1;
-            }
-
-            label {
-                color: var(--hy-theme-muted);
-                font-size: 13px;
-                font-weight: 700;
-            }
-
-            input,
-            select,
-            textarea {
-                width: 100%;
-                min-height: 44px;
-                border: 1px solid var(--hy-theme-line);
-                border-radius: 10px;
-                outline: none;
-                background: var(--hy-theme-surface-soft);
-                color: var(--hy-theme-text);
-                padding: 10px 12px;
-            }
-
-            textarea {
-                min-height: 86px;
-                resize: vertical;
-            }
-
-            input:focus,
-            select:focus,
-            textarea:focus {
-                border-color: var(--hy-theme-primary-strong);
-                box-shadow: 0 0 0 4px var(--hy-theme-focus-ring);
-            }
-
-            .actions {
+            .toolbar {
                 display: flex;
                 flex-wrap: wrap;
+                justify-content: flex-end;
                 gap: 10px;
-                margin-top: 16px;
             }
 
             .button {
-                min-height: 42px;
+                display: inline-flex;
+                min-height: 44px;
+                align-items: center;
+                justify-content: center;
                 border: 1px solid transparent;
-                border-radius: 10px;
+                border-radius: 12px;
                 cursor: pointer;
                 padding: 0 16px;
-                font-weight: 800;
+                font-size: 14px;
+                font-weight: 850;
+                transition:
+                    transform 0.16s ease,
+                    box-shadow 0.16s ease,
+                    border-color 0.16s ease,
+                    background 0.16s ease,
+                    color 0.16s ease;
+            }
+
+            .button:hover:not(:disabled) {
+                transform: translateY(-1px);
             }
 
             .button.primary {
@@ -141,16 +190,419 @@
             }
 
             .button.secondary {
-                border-color: var(--hy-theme-line);
-                background: var(--hy-theme-surface-soft);
-                color: var(--hy-theme-primary-deep);
+                border-color: var(--pay-line);
+                background: var(--pay-surface);
+                color: var(--pay-accent-deep);
+                box-shadow: var(--pay-shadow-soft);
             }
 
             .button:disabled {
                 cursor: not-allowed;
+                transform: none;
+                border-color: var(--pay-line);
                 background: var(--hy-theme-button-disabled);
                 color: var(--hy-theme-button-disabled-text);
-                box-shadow: var(--hy-theme-button-disabled-shadow);
+                box-shadow: none;
+            }
+
+            .workspace {
+                display: grid;
+                gap: 18px;
+                grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.78fr);
+                align-items: start;
+            }
+
+            .column {
+                display: grid;
+                gap: 18px;
+                min-width: 0;
+            }
+
+            .panel {
+                min-width: 0;
+                border: 1px solid var(--pay-line);
+                border-radius: 18px;
+                background: var(--pay-surface);
+                box-shadow: var(--pay-shadow);
+                padding: 20px;
+            }
+
+            .panel-header {
+                display: flex;
+                align-items: flex-start;
+                justify-content: space-between;
+                gap: 14px;
+                margin-bottom: 18px;
+            }
+
+            .panel-title {
+                min-width: 0;
+            }
+
+            .eyebrow {
+                margin: 0 0 5px;
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 850;
+                text-transform: uppercase;
+            }
+
+            .panel h2 {
+                margin: 0;
+                color: var(--pay-ink-strong);
+                font-size: 18px;
+                font-weight: 850;
+                line-height: 1.3;
+            }
+
+            .panel-badge {
+                display: inline-flex;
+                flex: 0 0 auto;
+                align-items: center;
+                border: 1px solid var(--pay-line);
+                border-radius: 999px;
+                background: var(--pay-surface-soft);
+                color: var(--pay-muted);
+                padding: 7px 10px;
+                font-size: 12px;
+                font-weight: 800;
+            }
+
+            .form-grid {
+                display: grid;
+                gap: 16px;
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+
+            .field {
+                display: grid;
+                min-width: 0;
+                gap: 8px;
+            }
+
+            .field.full,
+            .method-section {
+                grid-column: 1 / -1;
+            }
+
+            .field-label,
+            label {
+                color: var(--pay-muted);
+                font-size: 13px;
+                font-weight: 850;
+            }
+
+            .segmented {
+                display: grid;
+                gap: 8px;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                border: 1px solid var(--pay-line);
+                border-radius: 14px;
+                background: var(--pay-surface-soft);
+                padding: 6px;
+            }
+
+            .segment {
+                min-height: 42px;
+                border: 1px solid transparent;
+                border-radius: 10px;
+                background: transparent;
+                color: var(--pay-muted);
+                cursor: pointer;
+                font-weight: 850;
+            }
+
+            .segment.is-active {
+                border-color: var(--pay-line-strong);
+                background: var(--pay-surface);
+                color: var(--pay-ink-strong);
+                box-shadow: var(--pay-shadow-soft);
+            }
+
+            .combo {
+                position: relative;
+                min-width: 0;
+            }
+
+            .combo-trigger {
+                display: flex;
+                width: 100%;
+                min-height: 52px;
+                align-items: center;
+                justify-content: space-between;
+                gap: 12px;
+                border: 1px solid var(--pay-line);
+                border-radius: 14px;
+                background: var(--pay-surface);
+                color: var(--pay-ink);
+                cursor: pointer;
+                padding: 11px 14px;
+                text-align: left;
+                transition:
+                    border-color 0.16s ease,
+                    box-shadow 0.16s ease;
+            }
+
+            .combo-trigger:focus,
+            .combo.is-open .combo-trigger {
+                border-color: var(--pay-accent);
+                box-shadow: 0 0 0 4px var(--pay-focus);
+            }
+
+            .combo-copy {
+                display: grid;
+                min-width: 0;
+                gap: 3px;
+            }
+
+            .combo-title {
+                overflow: hidden;
+                color: var(--pay-ink-strong);
+                font-weight: 850;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .combo-subtitle {
+                overflow: hidden;
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 750;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .chevron {
+                flex: 0 0 auto;
+                width: 10px;
+                height: 10px;
+                border-right: 2px solid var(--pay-muted);
+                border-bottom: 2px solid var(--pay-muted);
+                transform: rotate(45deg);
+                transition: transform 0.16s ease;
+            }
+
+            .combo.is-open .chevron {
+                transform: rotate(225deg);
+            }
+
+            .combo-menu {
+                position: absolute;
+                z-index: 20;
+                top: calc(100% + 8px);
+                right: 0;
+                left: 0;
+                border: 1px solid var(--pay-line);
+                border-radius: 16px;
+                background: var(--pay-surface);
+                box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
+                padding: 10px;
+            }
+
+            .combo-search {
+                margin-bottom: 8px;
+            }
+
+            .option-list {
+                display: grid;
+                max-height: 280px;
+                gap: 4px;
+                overflow-y: auto;
+                padding-right: 2px;
+            }
+
+            .option {
+                display: grid;
+                width: 100%;
+                gap: 3px;
+                border: 1px solid transparent;
+                border-radius: 12px;
+                background: transparent;
+                color: var(--pay-ink);
+                cursor: pointer;
+                padding: 10px;
+                text-align: left;
+            }
+
+            .option:hover,
+            .option.is-active {
+                border-color: var(--pay-line);
+                background: var(--pay-surface-hover);
+            }
+
+            .option.is-active {
+                box-shadow: inset 3px 0 0 var(--pay-accent);
+            }
+
+            .option-title {
+                color: var(--pay-ink-strong);
+                font-size: 14px;
+                font-weight: 850;
+            }
+
+            .option-meta {
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 750;
+            }
+
+            .empty-state {
+                border: 1px dashed var(--pay-line-strong);
+                border-radius: 14px;
+                background: var(--pay-surface-soft);
+                color: var(--pay-muted);
+                padding: 18px;
+                text-align: center;
+                font-size: 13px;
+                font-weight: 750;
+            }
+
+            .method-head {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 12px;
+                margin-bottom: 10px;
+            }
+
+            .method-count {
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 850;
+            }
+
+            .method-grid {
+                display: grid;
+                max-height: 422px;
+                gap: 10px;
+                overflow-y: auto;
+                padding-right: 3px;
+            }
+
+            .method-card {
+                display: grid;
+                grid-template-columns: 42px minmax(0, 1fr) auto;
+                gap: 12px;
+                align-items: center;
+                width: 100%;
+                border: 1px solid var(--pay-line);
+                border-radius: 14px;
+                background: var(--pay-surface);
+                color: var(--pay-ink);
+                cursor: pointer;
+                padding: 12px;
+                text-align: left;
+                transition:
+                    border-color 0.16s ease,
+                    box-shadow 0.16s ease,
+                    transform 0.16s ease,
+                    background 0.16s ease;
+            }
+
+            .method-card:hover {
+                transform: translateY(-1px);
+                border-color: var(--pay-line-strong);
+                background: var(--pay-surface-hover);
+            }
+
+            .method-card.is-active {
+                border-color: var(--pay-accent);
+                background: #fbfaff;
+                box-shadow: 0 0 0 4px var(--pay-focus);
+            }
+
+            .method-logo {
+                display: grid;
+                width: 42px;
+                height: 42px;
+                place-items: center;
+                overflow: hidden;
+                border: 1px solid var(--pay-line);
+                border-radius: 12px;
+                background: var(--pay-surface-soft);
+                color: var(--pay-accent-deep);
+                font-size: 12px;
+                font-weight: 900;
+            }
+
+            .method-logo img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                padding: 6px;
+            }
+
+            .method-copy {
+                display: grid;
+                min-width: 0;
+                gap: 4px;
+            }
+
+            .method-title {
+                overflow: hidden;
+                color: var(--pay-ink-strong);
+                font-weight: 850;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .method-meta {
+                overflow: hidden;
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 750;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .method-tags {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-end;
+                gap: 6px;
+            }
+
+            .pill {
+                display: inline-flex;
+                align-items: center;
+                border: 1px solid var(--pay-line);
+                border-radius: 999px;
+                background: var(--pay-surface-soft);
+                color: var(--pay-muted);
+                padding: 5px 8px;
+                font-size: 11px;
+                font-weight: 850;
+                line-height: 1;
+                white-space: nowrap;
+            }
+
+            .pill.accent {
+                border-color: transparent;
+                background: var(--pay-accent-soft);
+                color: var(--pay-accent-deep);
+            }
+
+            .actions {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                margin-top: 16px;
+            }
+
+            .message {
+                min-height: 22px;
+                margin-top: 12px;
+                color: var(--pay-muted);
+                font-size: 13px;
+                font-weight: 750;
+            }
+
+            .message.error {
+                color: var(--pay-danger);
+            }
+
+            .message.success {
+                color: var(--pay-success);
             }
 
             .result {
@@ -161,21 +613,23 @@
             .result-row {
                 display: grid;
                 min-width: 0;
-                gap: 4px;
+                gap: 5px;
             }
 
             .result-row strong {
-                color: var(--hy-theme-muted);
-                font-size: 13px;
+                color: var(--pay-muted);
+                font-size: 12px;
+                font-weight: 850;
             }
 
             .value {
                 min-width: 0;
                 overflow-wrap: anywhere;
-                border-radius: 10px;
-                background: var(--hy-theme-primary-soft);
-                padding: 10px 12px;
-                line-height: 1.45;
+                border: 1px solid var(--pay-line);
+                border-radius: 12px;
+                background: var(--pay-surface-soft);
+                padding: 11px 12px;
+                line-height: 1.5;
             }
 
             .status {
@@ -183,172 +637,314 @@
                 width: fit-content;
                 align-items: center;
                 border-radius: 999px;
-                background: var(--hy-theme-primary-soft);
-                color: var(--hy-theme-primary-deep);
-                padding: 5px 10px;
-                font-size: 13px;
-                font-weight: 800;
+                background: var(--pay-accent-soft);
+                color: var(--pay-accent-deep);
+                padding: 6px 10px;
+                font-size: 12px;
+                font-weight: 850;
             }
 
             .status.paid {
                 background: rgba(49, 198, 168, 0.14);
-                color: var(--hy-theme-success);
+                color: var(--pay-success);
             }
 
             .status.failed {
                 background: rgba(217, 93, 114, 0.12);
-                color: var(--hy-theme-danger);
+                color: var(--pay-danger);
             }
 
-            .message {
-                min-height: 22px;
-                margin-top: 12px;
-                color: var(--hy-theme-muted);
-                font-size: 13px;
-            }
-
-            .message.error {
-                color: var(--hy-theme-danger);
-            }
-
-            .message.success {
-                color: var(--hy-theme-success);
-            }
-
-            @media (max-width: 820px) {
-                .header {
-                    align-items: flex-start;
+            @media (max-width: 920px) {
+                .topbar {
+                    align-items: stretch;
                     flex-direction: column;
                 }
 
-                .grid,
+                .toolbar {
+                    justify-content: flex-start;
+                }
+
+                .workspace,
                 .form-grid {
                     grid-template-columns: 1fr;
                 }
             }
+
+            @media (max-width: 560px) {
+                .page {
+                    padding: 18px 12px 32px;
+                }
+
+                .title {
+                    font-size: 24px;
+                }
+
+                .panel {
+                    border-radius: 14px;
+                    padding: 16px;
+                }
+
+                .segmented {
+                    grid-template-columns: 1fr;
+                }
+
+                .method-card {
+                    grid-template-columns: 38px minmax(0, 1fr);
+                }
+
+                .method-tags {
+                    grid-column: 1 / -1;
+                    justify-content: flex-start;
+                }
+            }
         </style>
     </head>
     <body>
         <main class="page">
-            <header class="header">
-                <div>
+            <header class="topbar">
+                <div class="title-block">
+                    <p class="kicker">Payment Operations</p>
                     <h1 class="title">三方临时支付链接</h1>
                     <p class="meta" id="envMeta">加载环境中...</p>
                 </div>
-                <button
-                    class="button secondary"
-                    type="button"
-                    id="reloadMethods"
-                >
-                    刷新支付方式
-                </button>
+                <div class="toolbar">
+                    <button
+                        class="button secondary"
+                        type="button"
+                        id="reloadMethods"
+                    >
+                        刷新支付方式
+                    </button>
+                </div>
             </header>
 
-            <section class="grid">
-                <div class="panel">
-                    <h2>创建支付链接</h2>
-                    <form id="createForm">
-                        <div class="form-grid">
-                            <div class="field full">
-                                <label for="appCode">App</label>
-                                <select id="appCode">
-                                    <option value="lalu">lalu</option>
-                                    <option value="yumi">yumi</option>
-                                    <option value="aslan">aslan</option>
-                                </select>
+            <section class="workspace">
+                <div class="column">
+                    <div class="panel">
+                        <div class="panel-header">
+                            <div class="panel-title">
+                                <p class="eyebrow">Create</p>
+                                <h2>创建支付链接</h2>
                             </div>
-                            <div class="field full">
-                                <label for="paymentMethod">支付方式</label>
-                                <select id="paymentMethod" required>
-                                    <option value="">
-                                        正在加载支付方式...
-                                    </option>
-                                </select>
+                            <span class="panel-badge" id="loadedBadge">
+                                等待支付方式
+                            </span>
+                        </div>
+                        <form id="createForm" novalidate>
+                            <div class="form-grid">
+                                <div class="field full">
+                                    <span class="field-label">Return App</span>
+                                    <div
+                                        class="segmented"
+                                        id="appSegments"
+                                        role="tablist"
+                                        aria-label="Return App"
+                                    >
+                                        <button
+                                            class="segment is-active"
+                                            type="button"
+                                            data-app-code="lalu"
+                                            aria-selected="true"
+                                        >
+                                            lalu
+                                        </button>
+                                        <button
+                                            class="segment"
+                                            type="button"
+                                            data-app-code="yumi"
+                                            aria-selected="false"
+                                        >
+                                            yumi
+                                        </button>
+                                        <button
+                                            class="segment"
+                                            type="button"
+                                            data-app-code="aslan"
+                                            aria-selected="false"
+                                        >
+                                            aslan
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div class="field full">
+                                    <label for="countrySearch">国家</label>
+                                    <div class="combo" id="countryCombo">
+                                        <button
+                                            class="combo-trigger"
+                                            type="button"
+                                            id="countryToggle"
+                                            aria-expanded="false"
+                                            aria-haspopup="listbox"
+                                        >
+                                            <span class="combo-copy">
+                                                <span
+                                                    class="combo-title"
+                                                    id="countrySelected"
+                                                >
+                                                    正在加载国家...
+                                                </span>
+                                                <span
+                                                    class="combo-subtitle"
+                                                    id="countryMeta"
+                                                >
+                                                    根据国家筛选可用支付方式
+                                                </span>
+                                            </span>
+                                            <span
+                                                class="chevron"
+                                                aria-hidden="true"
+                                            ></span>
+                                        </button>
+                                        <div
+                                            class="combo-menu"
+                                            id="countryMenu"
+                                            hidden
+                                        >
+                                            <input
+                                                class="combo-search"
+                                                id="countrySearch"
+                                                placeholder="搜索国家名称或代码"
+                                                type="text"
+                                                autocomplete="off"
+                                            />
+                                            <div
+                                                class="option-list"
+                                                id="countryOptions"
+                                                role="listbox"
+                                                aria-label="国家列表"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="field">
+                                    <label for="usdAmount">美金金额</label>
+                                    <input
+                                        id="usdAmount"
+                                        inputmode="decimal"
+                                        placeholder="例如 300 或 9.99"
+                                        type="text"
+                                    />
+                                </div>
+
+                                <div class="field full">
+                                    <label for="returnUrl">
+                                        支付完成返回地址
+                                    </label>
+                                    <input
+                                        id="returnUrl"
+                                        placeholder="默认按选择的 App 返回充值页"
+                                        type="url"
+                                    />
+                                </div>
+
+                                <div class="method-section">
+                                    <div class="method-head">
+                                        <span class="field-label">
+                                            支付方式
+                                        </span>
+                                        <span
+                                            class="method-count"
+                                            id="methodCount"
+                                        >
+                                            -
+                                        </span>
+                                    </div>
+                                    <div
+                                        class="method-grid"
+                                        id="methodGrid"
+                                        role="radiogroup"
+                                        aria-label="支付方式"
+                                    >
+                                        <div class="empty-state">
+                                            正在加载支付方式...
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="field">
-                                <label for="usdAmount">美金金额</label>
-                                <input
-                                    id="usdAmount"
-                                    inputmode="decimal"
-                                    min="0.01"
-                                    placeholder="例如 9.99"
-                                    required
-                                    step="0.01"
-                                    type="number"
-                                />
+
+                            <div class="actions">
+                                <button
+                                    class="button primary"
+                                    type="submit"
+                                    id="createButton"
+                                >
+                                    创建链接
+                                </button>
                             </div>
-                            <div class="field full">
-                                <label for="returnUrl">支付完成返回地址</label>
-                                <input
-                                    id="returnUrl"
-                                    placeholder="默认按选择的 App 返回充值页"
-                                    type="url"
-                                />
+                            <div class="message" id="createMessage"></div>
+                        </form>
+                    </div>
+
+                    <div class="panel">
+                        <div class="panel-header">
+                            <div class="panel-title">
+                                <p class="eyebrow">Verify</p>
+                                <h2>验证支付链接</h2>
                             </div>
                         </div>
+                        <div class="field">
+                            <label for="verifyInput">订单号或支付链接</label>
+                            <input
+                                id="verifyInput"
+                                placeholder="输入 order_id，或粘贴创建出来的支付链接"
+                            />
+                        </div>
                         <div class="actions">
                             <button
                                 class="button primary"
-                                type="submit"
-                                id="createButton"
+                                type="button"
+                                id="verifyButton"
                             >
-                                创建链接
+                                验证支付状态
                             </button>
                         </div>
-                        <div class="message" id="createMessage"></div>
-                    </form>
-                </div>
-
-                <div class="panel">
-                    <h2>创建结果</h2>
-                    <div class="result" id="createResult">
-                        <div class="value">还没有创建支付链接</div>
-                    </div>
-                    <div class="actions">
-                        <button
-                            class="button secondary"
-                            disabled
-                            type="button"
-                            id="copyLink"
-                        >
-                            复制链接
-                        </button>
-                        <button
-                            class="button secondary"
-                            disabled
-                            type="button"
-                            id="openLink"
-                        >
-                            打开支付
-                        </button>
+                        <div class="message" id="verifyMessage"></div>
                     </div>
                 </div>
 
-                <div class="panel">
-                    <h2>验证支付链接</h2>
-                    <div class="field">
-                        <label for="verifyInput">订单号或支付链接</label>
-                        <input
-                            id="verifyInput"
-                            placeholder="输入 order_id，或粘贴创建出来的支付链接"
-                        />
+                <div class="column">
+                    <div class="panel">
+                        <div class="panel-header">
+                            <div class="panel-title">
+                                <p class="eyebrow">Create Result</p>
+                                <h2>创建结果</h2>
+                            </div>
+                        </div>
+                        <div class="result" id="createResult">
+                            <div class="value">还没有创建支付链接</div>
+                        </div>
+                        <div class="actions">
+                            <button
+                                class="button secondary"
+                                disabled
+                                type="button"
+                                id="copyLink"
+                            >
+                                复制链接
+                            </button>
+                            <button
+                                class="button secondary"
+                                disabled
+                                type="button"
+                                id="openLink"
+                            >
+                                打开支付
+                            </button>
+                        </div>
                     </div>
-                    <div class="actions">
-                        <button
-                            class="button primary"
-                            type="button"
-                            id="verifyButton"
-                        >
-                            验证支付状态
-                        </button>
-                    </div>
-                    <div class="message" id="verifyMessage"></div>
-                </div>
 
-                <div class="panel">
-                    <h2>验证结果</h2>
-                    <div class="result" id="verifyResult">
-                        <div class="value">还没有验证订单</div>
+                    <div class="panel">
+                        <div class="panel-header">
+                            <div class="panel-title">
+                                <p class="eyebrow">Verify Result</p>
+                                <h2>验证结果</h2>
+                            </div>
+                        </div>
+                        <div class="result" id="verifyResult">
+                            <div class="value">还没有验证订单</div>
+                        </div>
                     </div>
                 </div>
             </section>
@@ -356,23 +952,44 @@
 
         <script>
             (function () {
-                var API_BASE_URL = 'https://api.global-interaction.com/';
+                var TEST_API_BASE_URL =
+                    'https://api-test.global-interaction.com/';
+                var LOCAL_API_BASE_URL = 'http://127.0.0.1:13000/';
+                var DEFAULT_API_BASE_URL =
+                    'https://api.global-interaction.com/';
+                var API_BASE_URL = resolveAPIBaseURL();
                 var RETURN_URL_BASE =
                     'https://h5.global-interaction.com/recharge/index.html';
+                var APP_CODES = ['lalu', 'yumi', 'aslan'];
                 var methods = [];
+                var countries = [];
+                var selectedAppCode = 'lalu';
+                var selectedCountryCode = '';
+                var selectedMethodID = 0;
                 var latestPaymentLink = '';
                 var latestOrderID = '';
                 var returnUrlTouched = false;
                 var els = {
-                    appCode: document.getElementById('appCode'),
+                    appButtons: [].slice.call(
+                        document.querySelectorAll('[data-app-code]')
+                    ),
                     copyLink: document.getElementById('copyLink'),
+                    countryCombo: document.getElementById('countryCombo'),
+                    countryMenu: document.getElementById('countryMenu'),
+                    countryMeta: document.getElementById('countryMeta'),
+                    countryOptions: document.getElementById('countryOptions'),
+                    countrySearch: document.getElementById('countrySearch'),
+                    countrySelected: document.getElementById('countrySelected'),
+                    countryToggle: document.getElementById('countryToggle'),
                     createButton: document.getElementById('createButton'),
                     createForm: document.getElementById('createForm'),
                     createMessage: document.getElementById('createMessage'),
                     createResult: document.getElementById('createResult'),
                     envMeta: document.getElementById('envMeta'),
+                    loadedBadge: document.getElementById('loadedBadge'),
+                    methodCount: document.getElementById('methodCount'),
+                    methodGrid: document.getElementById('methodGrid'),
                     openLink: document.getElementById('openLink'),
-                    paymentMethod: document.getElementById('paymentMethod'),
                     reloadMethods: document.getElementById('reloadMethods'),
                     returnUrl: document.getElementById('returnUrl'),
                     usdAmount: document.getElementById('usdAmount'),
@@ -384,39 +1001,73 @@
 
                 setDefaultReturnURL(true);
                 renderEnvMeta();
-                els.appCode.addEventListener('change', function () {
-                    setDefaultReturnURL(false);
-                    renderEnvMeta();
-                    loadMethods();
-                });
-                els.returnUrl.addEventListener('input', function () {
-                    returnUrlTouched = true;
-                });
-                els.createForm.addEventListener('submit', createPaymentLink);
-                els.reloadMethods.addEventListener('click', loadMethods);
-                els.copyLink.addEventListener('click', function () {
-                    copyText(latestPaymentLink, els.createMessage);
-                });
-                els.openLink.addEventListener('click', function () {
-                    if (latestPaymentLink)
-                        window.open(
-                            latestPaymentLink,
-                            '_blank',
-                            'noopener,noreferrer'
-                        );
-                });
-                els.verifyButton.addEventListener('click', verifyPaymentLink);
+                bindEvents();
                 loadMethods();
 
+                function bindEvents() {
+                    els.appButtons.forEach(function (button) {
+                        button.addEventListener('click', function () {
+                            selectApp(button.getAttribute('data-app-code'));
+                        });
+                    });
+                    els.countryToggle.addEventListener('click', function () {
+                        setCountryMenuOpen(
+                            els.countryMenu.hasAttribute('hidden')
+                        );
+                    });
+                    els.countrySearch.addEventListener(
+                        'input',
+                        renderCountries
+                    );
+                    els.countrySearch.addEventListener(
+                        'keydown',
+                        function (event) {
+                            if (event.key === 'Escape')
+                                setCountryMenuOpen(false);
+                        }
+                    );
+                    document.addEventListener('click', function (event) {
+                        if (!els.countryCombo.contains(event.target)) {
+                            setCountryMenuOpen(false);
+                        }
+                    });
+                    els.returnUrl.addEventListener('input', function () {
+                        returnUrlTouched = true;
+                    });
+                    els.createForm.addEventListener(
+                        'submit',
+                        createPaymentLink
+                    );
+                    els.reloadMethods.addEventListener('click', loadMethods);
+                    els.copyLink.addEventListener('click', function () {
+                        copyText(latestPaymentLink, els.createMessage);
+                    });
+                    els.openLink.addEventListener('click', function () {
+                        if (latestPaymentLink) {
+                            window.open(
+                                latestPaymentLink,
+                                '_blank',
+                                'noopener,noreferrer'
+                            );
+                        }
+                    });
+                    els.verifyButton.addEventListener(
+                        'click',
+                        verifyPaymentLink
+                    );
+                }
+
                 function loadMethods() {
                     setMessage(els.createMessage, '正在加载支付方式...', '');
-                    els.paymentMethod.disabled = true;
+                    setMethodsLoading(true);
                     return apiGet('/api/v1/recharge/h5/temporary/methods')
                         .then(function (data) {
                             methods = Array.isArray(data.methods)
                                 ? data.methods
                                 : [];
-                            renderMethods();
+                            countries = buildCountries(methods);
+                            reconcileSelection();
+                            renderAllSelectionViews();
                             setMessage(
                                 els.createMessage,
                                 methods.length
@@ -427,49 +1078,367 @@
                         })
                         .catch(function (err) {
                             methods = [];
-                            renderMethods();
+                            countries = [];
+                            selectedCountryCode = '';
+                            selectedMethodID = 0;
+                            renderAllSelectionViews();
                             setMessage(
                                 els.createMessage,
                                 err.message || '加载支付方式失败',
                                 'error'
                             );
+                        })
+                        .finally(function () {
+                            setMethodsLoading(false);
                         });
                 }
 
-                function renderMethods() {
-                    els.paymentMethod.innerHTML = '';
-                    if (!methods.length) {
-                        appendOption('', '没有可用支付方式');
-                        els.paymentMethod.disabled = true;
-                        return;
+                function setMethodsLoading(loading) {
+                    els.reloadMethods.disabled = loading;
+                    els.createButton.disabled = loading;
+                    if (loading) {
+                        els.loadedBadge.textContent = '加载中';
+                        els.methodGrid.innerHTML =
+                            '<div class="empty-state">正在加载支付方式...</div>';
                     }
-                    appendOption('', '请选择支付方式');
-                    methods.forEach(function (method) {
-                        var label = [
-                            method.provider_name || method.provider_code,
-                            method.method_name || method.pay_way,
-                            method.pay_type,
-                            method.currency_code,
-                            method.country_code,
-                        ]
-                            .filter(Boolean)
-                            .join(' / ');
-                        appendOption(String(method.method_id), label);
-                    });
-                    els.paymentMethod.disabled = false;
                 }
 
-                function appendOption(value, label) {
-                    var option = document.createElement('option');
-                    option.value = value;
-                    option.textContent = label;
-                    els.paymentMethod.appendChild(option);
+                function buildCountries(sourceMethods) {
+                    var byCode = {};
+                    sourceMethods.forEach(function (method, index) {
+                        var code = countryCode(method);
+                        if (!code) return;
+                        if (!byCode[code]) {
+                            byCode[code] = {
+                                code: code,
+                                name: method.country_name || code,
+                                currency: method.currency_code || '',
+                                count: 0,
+                                firstSort:
+                                    Number(method.sort_order || 0) || index,
+                            };
+                        }
+                        byCode[code].count += 1;
+                    });
+                    return Object.keys(byCode)
+                        .map(function (code) {
+                            return byCode[code];
+                        })
+                        .sort(function (a, b) {
+                            return a.firstSort - b.firstSort;
+                        });
+                }
+
+                function reconcileSelection() {
+                    if (
+                        selectedCountryCode &&
+                        !countries.some(function (country) {
+                            return country.code === selectedCountryCode;
+                        })
+                    ) {
+                        selectedCountryCode = '';
+                    }
+                    if (!selectedCountryCode && countries.length) {
+                        selectedCountryCode = countries[0].code;
+                    }
+                    if (
+                        selectedMethodID &&
+                        !filteredMethods().some(function (method) {
+                            return (
+                                Number(method.method_id) === selectedMethodID
+                            );
+                        })
+                    ) {
+                        selectedMethodID = 0;
+                    }
+                    if (!selectedMethodID && filteredMethods().length) {
+                        selectedMethodID = Number(
+                            filteredMethods()[0].method_id
+                        );
+                    }
+                }
+
+                function renderAllSelectionViews() {
+                    renderAppSegments();
+                    renderCountries();
+                    renderCountrySummary();
+                    renderMethods();
+                    renderEnvMeta();
+                }
+
+                function selectApp(appCode) {
+                    selectedAppCode =
+                        APP_CODES.indexOf(appCode) >= 0 ? appCode : 'lalu';
+                    setDefaultReturnURL(false);
+                    renderAppSegments();
+                    renderEnvMeta();
+                }
+
+                function renderAppSegments() {
+                    els.appButtons.forEach(function (button) {
+                        var active =
+                            button.getAttribute('data-app-code') ===
+                            selectedAppCode;
+                        button.classList.toggle('is-active', active);
+                        button.setAttribute(
+                            'aria-selected',
+                            active ? 'true' : 'false'
+                        );
+                    });
+                }
+
+                function renderCountries() {
+                    var query = normalizeSearch(els.countrySearch.value);
+                    var rows = countries.filter(function (country) {
+                        var searchable = normalizeSearch(
+                            [country.name, country.code, country.currency].join(
+                                ' '
+                            )
+                        );
+                        return !query || searchable.indexOf(query) >= 0;
+                    });
+                    clearNode(els.countryOptions);
+                    if (!rows.length) {
+                        els.countryOptions.appendChild(
+                            createNode('div', 'empty-state', '没有匹配的国家')
+                        );
+                        return;
+                    }
+                    rows.forEach(function (country) {
+                        var option = createNode('button', 'option');
+                        option.type = 'button';
+                        option.setAttribute('role', 'option');
+                        option.setAttribute(
+                            'aria-selected',
+                            country.code === selectedCountryCode
+                                ? 'true'
+                                : 'false'
+                        );
+                        option.classList.toggle(
+                            'is-active',
+                            country.code === selectedCountryCode
+                        );
+                        option.appendChild(
+                            createNode(
+                                'span',
+                                'option-title',
+                                countryLabel(country)
+                            )
+                        );
+                        option.appendChild(
+                            createNode(
+                                'span',
+                                'option-meta',
+                                country.currency +
+                                    ' · ' +
+                                    country.count +
+                                    ' 个支付方式'
+                            )
+                        );
+                        option.addEventListener('click', function () {
+                            selectCountry(country.code);
+                        });
+                        els.countryOptions.appendChild(option);
+                    });
+                }
+
+                function selectCountry(countryCodeValue) {
+                    selectedCountryCode = countryCodeValue || '';
+                    selectedMethodID = 0;
+                    reconcileSelection();
+                    renderCountrySummary();
+                    renderCountries();
+                    renderMethods();
+                    setCountryMenuOpen(false);
+                }
+
+                function renderCountrySummary() {
+                    var country = selectedCountry();
+                    if (!country) {
+                        els.countrySelected.textContent = countries.length
+                            ? '请选择国家'
+                            : '没有可用国家';
+                        els.countryMeta.textContent =
+                            '根据国家筛选可用支付方式';
+                        return;
+                    }
+                    els.countrySelected.textContent = countryLabel(country);
+                    els.countryMeta.textContent =
+                        country.currency +
+                        ' · ' +
+                        country.count +
+                        ' 个支付方式';
+                }
+
+                function renderMethods() {
+                    var rows = filteredMethods();
+                    clearNode(els.methodGrid);
+                    els.methodCount.textContent = selectedCountryCode
+                        ? rows.length + ' 个可用'
+                        : '-';
+                    els.loadedBadge.textContent = methods.length
+                        ? countries.length +
+                          ' 个国家 / ' +
+                          methods.length +
+                          ' 个方式'
+                        : '没有支付方式';
+                    if (!selectedCountryCode) {
+                        els.methodGrid.appendChild(
+                            createNode('div', 'empty-state', '请先选择国家')
+                        );
+                        return;
+                    }
+                    if (!rows.length) {
+                        els.methodGrid.appendChild(
+                            createNode(
+                                'div',
+                                'empty-state',
+                                '当前国家没有可用支付方式'
+                            )
+                        );
+                        return;
+                    }
+                    rows.forEach(function (method) {
+                        els.methodGrid.appendChild(createMethodCard(method));
+                    });
+                }
+
+                function createMethodCard(method) {
+                    var selected =
+                        Number(method.method_id) === Number(selectedMethodID);
+                    var card = createNode('button', 'method-card');
+                    card.type = 'button';
+                    card.setAttribute('role', 'radio');
+                    card.setAttribute(
+                        'aria-checked',
+                        selected ? 'true' : 'false'
+                    );
+                    card.classList.toggle('is-active', selected);
+                    card.addEventListener('click', function () {
+                        selectedMethodID = Number(method.method_id);
+                        renderMethods();
+                    });
+
+                    card.appendChild(methodLogo(method));
+
+                    var copy = createNode('span', 'method-copy');
+                    copy.appendChild(
+                        createNode(
+                            'span',
+                            'method-title',
+                            method.method_name ||
+                                method.pay_type ||
+                                method.pay_way ||
+                                '-'
+                        )
+                    );
+                    copy.appendChild(
+                        createNode(
+                            'span',
+                            'method-meta',
+                            [
+                                method.provider_name || method.provider_code,
+                                method.pay_way,
+                                method.pay_type,
+                            ]
+                                .filter(Boolean)
+                                .join(' / ')
+                        )
+                    );
+                    card.appendChild(copy);
+
+                    var tags = createNode('span', 'method-tags');
+                    tags.appendChild(
+                        createNode(
+                            'span',
+                            'pill accent',
+                            method.currency_code || '-'
+                        )
+                    );
+                    tags.appendChild(
+                        createNode('span', 'pill', 'ID ' + method.method_id)
+                    );
+                    card.appendChild(tags);
+                    return card;
+                }
+
+                function methodLogo(method) {
+                    var logo = createNode('span', 'method-logo');
+                    if (method.logo_url) {
+                        var image = document.createElement('img');
+                        image.alt =
+                            method.method_name || method.pay_type || 'pay';
+                        image.src = method.logo_url;
+                        image.addEventListener('error', function () {
+                            image.remove();
+                            logo.textContent = logoText(method);
+                        });
+                        logo.appendChild(image);
+                        return logo;
+                    }
+                    logo.textContent = logoText(method);
+                    return logo;
+                }
+
+                function setCountryMenuOpen(open) {
+                    els.countryCombo.classList.toggle('is-open', open);
+                    els.countryToggle.setAttribute(
+                        'aria-expanded',
+                        open ? 'true' : 'false'
+                    );
+                    if (open) {
+                        els.countryMenu.removeAttribute('hidden');
+                        renderCountries();
+                        window.requestAnimationFrame(function () {
+                            els.countrySearch.focus();
+                            els.countrySearch.select();
+                        });
+                    } else {
+                        els.countryMenu.setAttribute('hidden', '');
+                        els.countrySearch.value = '';
+                    }
+                }
+
+                function filteredMethods() {
+                    if (!selectedCountryCode) return [];
+                    return methods
+                        .filter(function (method) {
+                            return countryCode(method) === selectedCountryCode;
+                        })
+                        .sort(function (a, b) {
+                            return (
+                                (Number(a.sort_order || 0) || 0) -
+                                    (Number(b.sort_order || 0) || 0) ||
+                                methodLabel(a).localeCompare(methodLabel(b))
+                            );
+                        });
+                }
+
+                function selectedCountry() {
+                    return countries.find(function (country) {
+                        return country.code === selectedCountryCode;
+                    });
+                }
+
+                function selectedMethod() {
+                    var id = Number(selectedMethodID || 0);
+                    return methods.find(function (method) {
+                        return Number(method.method_id) === id;
+                    });
                 }
 
                 function createPaymentLink(event) {
                     event.preventDefault();
                     var method = selectedMethod();
                     var usdMinorAmount = dollarsToMinor(els.usdAmount.value);
+                    if (!selectedCountryCode) {
+                        setMessage(
+                            els.createMessage,
+                            '请选择国家后再选择支付方式',
+                            'error'
+                        );
+                        return;
+                    }
                     if (!method || !usdMinorAmount || usdMinorAmount <= 0) {
                         setMessage(
                             els.createMessage,
@@ -496,8 +1465,9 @@
                             renderOrder(els.createResult, data);
                             els.copyLink.disabled = !latestPaymentLink;
                             els.openLink.disabled = !latestPaymentLink;
-                            if (latestOrderID)
+                            if (latestOrderID) {
                                 els.verifyInput.value = latestOrderID;
+                            }
                             setMessage(
                                 els.createMessage,
                                 '支付链接已创建',
@@ -589,6 +1559,18 @@
                                     .join(' / ') || '-'
                             )
                         ),
+                        resultRow(
+                            '国家',
+                            escapeHTML(
+                                [
+                                    order.country_name,
+                                    order.country_code,
+                                    order.currency_code,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' / ') || '-'
+                            )
+                        ),
                         resultRow('支付链接', escapeHTML(paymentLink || '-')),
                         data.wrapped
                             ? resultRow(
@@ -620,13 +1602,6 @@
                     );
                 }
 
-                function selectedMethod() {
-                    var id = Number(els.paymentMethod.value || 0);
-                    return methods.find(function (method) {
-                        return Number(method.method_id) === id;
-                    });
-                }
-
                 function apiGet(path) {
                     return apiRequest(path, { method: 'GET' });
                 }
@@ -641,8 +1616,8 @@
                 function apiRequest(path, options) {
                     var opts = options || {};
                     var headers = {
-                        // 临时支付链接只做收款和人工核销，不绑定具体 App 发币；统一用 lalu 的支付方式和汇率建单，
-                        // 避免 aslan/yumi 的支付方式汇率与 lalu 不一致，或回调按默认 lalu 入口查不到订单。
+                        // 临时支付链接只做收款和人工核销，不绑定具体 App 发币；统一用 lalu 的支付方式和汇率建单。
+                        // Return App 只控制付款后回到哪个充值页，不改变收款口径，避免回调查单和汇率口径被前端选择打散。
                         'X-App-Code': paymentAppCode(),
                     };
                     var body;
@@ -691,6 +1666,38 @@
                     ).toString();
                 }
 
+                function resolveAPIBaseURL() {
+                    var env = currentEnv();
+                    if (env === 'test') {
+                        return normalizeBaseURL(
+                            isLocalDevOrigin()
+                                ? window.location.origin + '/__api_test__/'
+                                : TEST_API_BASE_URL
+                        );
+                    }
+                    if (env === 'local')
+                        return normalizeBaseURL(LOCAL_API_BASE_URL);
+                    return normalizeBaseURL(DEFAULT_API_BASE_URL);
+                }
+
+                function currentEnv() {
+                    var params = new URLSearchParams(window.location.search);
+                    var env = String(params.get('env') || '').trim();
+                    return env === 'test' || env === 'local' ? env : '';
+                }
+
+                function isLocalDevOrigin() {
+                    return (
+                        window.location.hostname === '127.0.0.1' ||
+                        window.location.hostname === 'localhost' ||
+                        window.location.hostname === '::1'
+                    );
+                }
+
+                function normalizeBaseURL(value) {
+                    return String(value || '').replace(/\/+$/, '') + '/';
+                }
+
                 function parsePayload(text) {
                     if (!text) return {};
                     try {
@@ -731,12 +1738,7 @@
                 }
 
                 function currentAppCode() {
-                    var value = String(els.appCode.value || 'lalu')
-                        .trim()
-                        .toLowerCase();
-                    return value === 'yumi' || value === 'aslan'
-                        ? value
-                        : 'lalu';
+                    return selectedAppCode || 'lalu';
                 }
 
                 function paymentAppCode() {
@@ -770,7 +1772,7 @@
 
                 function isKnownDefaultReturnURL(value) {
                     var text = String(value || '').trim();
-                    return ['lalu', 'yumi', 'aslan'].some(function (appCode) {
+                    return APP_CODES.some(function (appCode) {
                         return text === defaultReturnURL(appCode);
                     });
                 }
@@ -845,6 +1847,60 @@
                     });
                 }
 
+                function countryCode(method) {
+                    return String(method.country_code || '')
+                        .trim()
+                        .toUpperCase();
+                }
+
+                function countryLabel(country) {
+                    if (!country) return '';
+                    return country.name && country.name !== country.code
+                        ? country.name + ' · ' + country.code
+                        : country.code;
+                }
+
+                function methodLabel(method) {
+                    return [
+                        method.method_name,
+                        method.pay_way,
+                        method.pay_type,
+                        method.provider_name,
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                }
+
+                function logoText(method) {
+                    var value =
+                        method.method_name ||
+                        method.pay_type ||
+                        method.provider_name ||
+                        method.provider_code ||
+                        'Pay';
+                    return String(value)
+                        .replace(/[^a-z0-9]/gi, '')
+                        .slice(0, 2)
+                        .toUpperCase();
+                }
+
+                function normalizeSearch(value) {
+                    return String(value || '')
+                        .trim()
+                        .toLowerCase();
+                }
+
+                function createNode(tagName, className, text) {
+                    var node = document.createElement(tagName);
+                    if (className) node.className = className;
+                    if (text !== undefined) node.textContent = text;
+                    return node;
+                }
+
+                function clearNode(node) {
+                    while (node.firstChild) node.removeChild(node.firstChild);
+                }
+
                 function escapeHTML(value) {
                     return String(value || '')
                         .replace(/&/g, '&amp;')