feat(topup): direct-open payment page when method.open_url_direct is set

User asked for the gift-style seamless flow on balance top-up: provider
checkout opens inside Telegram MiniApp WebView without a click-to-open link
panel. Made it an admin per-method toggle so it can be enabled selectively.

src/pages/TopUpAmount.tsx — on topup mutation success:
* Move saveTopUpPendingInfo to BEFORE any redirect so /balance/top-up/result
  can still pick up the pending payment after the provider's return_url fires
* If method?.open_url_direct === true AND the URL is not a t.me/ deep link
  (Stars/CryptoBot), window.location.href = redirectUrl and return early
* Otherwise fall through to the existing setPaymentUrl panel — preserves
  current behavior for methods without the flag enabled

The t.me/ guard is important: window.location.href to a Telegram deep link
inside a MiniApp WebView is unreliable (native shell cant always intercept).
Those URLs continue to go through openTelegramLink / openInvoice in the panel
path. Stars never reaches topUpMutation.onSuccess anyway (handled by the
separate starsPaymentMutation); the guard is defense-in-depth for CryptoBot
and any future t.me-deep-link providers.

src/pages/AdminPaymentMethodEdit.tsx — added Open URL directly toggle with
the same slider styling as the is_enabled toggle. Defaults to off.

src/types/index.ts
* PaymentMethod.open_url_direct?: boolean (user-facing)
* PaymentMethodConfig.open_url_direct: boolean (admin shape)

Translations added for ru/en/zh/fa with a hint clarifying behavior and the
t.me/ exemption.
This commit is contained in:
Fringg
2026-05-13 10:50:31 +03:00
parent 2a342f6adc
commit aa8bfc9d08
7 changed files with 61 additions and 3 deletions

View File

@@ -1515,6 +1515,8 @@
"noMethods": "No payment methods configured",
"methodEnabled": "Method enabled",
"providerNotConfigured": "Provider not configured in env",
"openUrlDirect": "Open payment page directly",
"openUrlDirectHint": "Skip the link panel — the provider opens inside the MiniApp/tab right after the click. After payment the user returns to /balance/top-up/result. Ignored for Stars/CryptoBot and other t.me/ links.",
"displayName": "Display name",
"displayNameHint": "Leave empty for default name",
"subOptions": "Payment options",

View File

@@ -2082,6 +2082,8 @@
"noMethods": "هیچ روش پرداخت پیکربندی‌شده‌ای نیست",
"methodEnabled": "روش فعال است",
"providerNotConfigured": "ارائه‌دهنده در env تنظیم نشده",
"openUrlDirect": "صفحه پرداخت را مستقیماً باز کن",
"openUrlDirectHint": "بدون پنل لینک — ارائه‌دهنده داخل MiniApp/تب بلافاصله پس از کلیک باز می‌شود. پس از پرداخت کاربر به /balance/top-up/result بازمی‌گردد. برای Stars/CryptoBot و سایر لینک‌های t.me/ این پرچم نادیده گرفته می‌شود.",
"displayName": "نام نمایشی",
"displayNameHint": "برای نام پیش‌فرض خالی بگذارید",
"subOptions": "گزینه‌های پرداخت",

View File

@@ -1537,6 +1537,8 @@
"noMethods": "Нет настроенных платёжных методов",
"methodEnabled": "Метод включён",
"providerNotConfigured": "Провайдер не настроен в env",
"openUrlDirect": "Открывать страницу оплаты сразу",
"openUrlDirectHint": "Без панели со ссылкой — провайдер открывается внутри MiniApp/вкладки сразу после клика. После оплаты юзер возвращается на /balance/top-up/result. Для Stars/CryptoBot и других t.me/-ссылок флаг игнорируется.",
"displayName": "Отображаемое имя",
"displayNameHint": "Оставьте пустым для имени по умолчанию",
"subOptions": "Варианты оплаты",

View File

@@ -1280,6 +1280,8 @@
"noMethods": "没有配置的支付方法",
"methodEnabled": "方法已启用",
"providerNotConfigured": "提供商未在env中配置",
"openUrlDirect": "直接打开支付页面",
"openUrlDirectHint": "跳过链接面板 — 点击后提供商在 MiniApp/标签页内直接打开。支付完成后用户返回 /balance/top-up/result。Stars/CryptoBot 和其他 t.me/ 链接忽略此标志。",
"displayName": "显示名称",
"displayNameHint": "留空以使用默认名称",
"subOptions": "支付选项",

View File

@@ -66,6 +66,7 @@ export default function AdminPaymentMethodEdit() {
const [firstTopupFilter, setFirstTopupFilter] = useState<'any' | 'yes' | 'no'>('any');
const [promoGroupFilterMode, setPromoGroupFilterMode] = useState<'all' | 'selected'>('all');
const [selectedPromoGroupIds, setSelectedPromoGroupIds] = useState<number[]>([]);
const [openUrlDirect, setOpenUrlDirect] = useState(false);
// Initialize state when config loads
useEffect(() => {
@@ -79,6 +80,7 @@ export default function AdminPaymentMethodEdit() {
setFirstTopupFilter(config.first_topup_filter);
setPromoGroupFilterMode(config.promo_group_filter_mode);
setSelectedPromoGroupIds(config.allowed_promo_group_ids);
setOpenUrlDirect(config.open_url_direct);
}
}, [config]);
@@ -100,6 +102,7 @@ export default function AdminPaymentMethodEdit() {
first_topup_filter: firstTopupFilter,
promo_group_filter_mode: promoGroupFilterMode,
allowed_promo_group_ids: promoGroupFilterMode === 'selected' ? selectedPromoGroupIds : [],
open_url_direct: openUrlDirect,
};
// Display name
@@ -215,6 +218,34 @@ export default function AdminPaymentMethodEdit() {
</button>
</div>
{/* Open URL directly toggle */}
<div className="flex items-center justify-between border-t border-dark-800 pt-6">
<div className="pr-4">
<div className="text-sm font-medium text-dark-200">
{t('admin.paymentMethods.openUrlDirect', 'Открывать страницу оплаты сразу')}
</div>
<div className="mt-0.5 text-xs text-dark-500">
{t(
'admin.paymentMethods.openUrlDirectHint',
'Без панели со ссылкой — провайдер открывается внутри MiniApp/вкладки сразу после клика. После оплаты юзер возвращается на /balance/result.',
)}
</div>
</div>
<button
onClick={() => setOpenUrlDirect(!openUrlDirect)}
className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
openUrlDirect ? 'bg-accent-500' : 'bg-dark-600'
}`}
aria-label="Toggle open URL directly"
>
<span
className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
openUrlDirect ? 'left-6' : 'left-1'
}`}
/>
</button>
</div>
{/* Display name */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">

View File

@@ -255,9 +255,8 @@ export default function TopUpAmount() {
onSuccess: (data) => {
const redirectUrl = data.payment_url || data.invoice_url;
if (redirectUrl) {
setPaymentUrl(redirectUrl);
// Save payment info for the result page
// Save payment info for the result page (do BEFORE possible redirect,
// иначе после window.location.href этот код не выполнится).
if (method && data.payment_id) {
const methodKey = method.id.toLowerCase().replace(/-/g, '_');
const displayName =
@@ -270,6 +269,22 @@ export default function TopUpAmount() {
created_at: Date.now(),
});
}
// open_url_direct: seamless флоу как при покупке подарка.
// window.location.href внутри Telegram MiniApp WebView навигирует
// в том же контейнере без открытия внешнего браузера. После
// оплаты return_url возвращает на /balance/top-up/result.
//
// t.me/ URL (Telegram Stars, CryptoBot) — всегда через нативный
// handler (openInvoice / openTelegramLink в setPaymentUrl-ветке).
// Stars уже отбит раньше через starsPaymentMutation, здесь — защита
// на случай CryptoBot и других Telegram-deep-link провайдеров.
if (method?.open_url_direct && !redirectUrl.startsWith('https://t.me/')) {
window.location.href = redirectUrl;
return;
}
setPaymentUrl(redirectUrl);
}
},
onError: (err: unknown) => {

View File

@@ -442,6 +442,9 @@ export interface PaymentMethod {
max_amount_kopeks: number;
is_available: boolean;
options?: PaymentMethodOption[] | null;
// Если true — после получения payment_url кабинет сразу делает
// window.location.href вместо показа панели с кнопкой "Открыть".
open_url_direct?: boolean;
}
// Referral types
@@ -682,6 +685,7 @@ export interface PaymentMethodConfig {
first_topup_filter: 'any' | 'yes' | 'no';
promo_group_filter_mode: 'all' | 'selected';
allowed_promo_group_ids: number[];
open_url_direct: boolean;
is_provider_configured: boolean;
created_at: string | null;
updated_at: string | null;