UX-паттерны checkout и конверсия
1) Карта флоу: что именно оптимизируем
Entry → Method pick → Details → Review → 3DS/Confirmation → Receipt
Поддерживаем быстрые рельсы (A2A/кошельки/One-tap) и классические карты (PAN-форма).
Для повторных оплат — one-click/tokens/network tokens; для первых — «без трения» до момента, когда нужен step-up.
2) Single-step vs Multi-step
Single-step (инлайн): меньше кликов, быстрее восприятие. Рекомендуется для кошельков/Apple Pay/Google Pay/локальных методов с перенаправлением.
Multi-step (мастер): лучше управляет когнитивной нагрузкой на картах/форме SoF. Каждый шаг — 1 решение (сумма → метод → реквизиты → подтверждение).
Решение: гибрид — single-step для быстрых рельс и short-form карт, master для сложных сценариев (купон/бонус/адрес счета/SoF).
3) Формы: скорость без ошибок
Валидация и маскирование
Авто-формат PAN (#######), Luhn локально, подсказка бренда и длины.
EXP MM/YY — два поля с авто-перемещением, CVV — маска + иконка подсказки.
BIN-детект → подсказка «Карта вашего банка может запросить 3DS».
Сумма/валюта: показываем локальную валюту и конверсию в валюту списания (если отличается).
Автозаполнение
Поддержка браузерного `autocomplete` (cc-number, cc-exp, cc-csc, name).
Сохранение метода (с согласия) → токенизация; пояснить «мы не храним PAN».
Ошибки
Inline подсказки, а не «form-wide». Сообщение в 1 строку: что случилось и что сделать.
Разделять жесткие (invalid PAN) и мягкие (issuer unavailable) ошибки — от этого зависит стратегия повторов.
4) Выбор метода: «белая полка», не витрина
Сначала — рекомендуемые (кошельки/локальные APM с высоким AR), затем «Другие методы».
Скрывать неработающие методы по GEO/валидации.
Локализованные иконки/названия; показывать ETA по выводу (если это депозит+вывод в одной системе).
Для карт — бейджи Visa/Mastercard/MIR/AmEx по BIN-детекту.
5) 3DS UX: как не «убить» конверсию
Frictionless по умолчанию, challenge — только при риске/политике.
Делать 3DS встроенным в модалку, не как новое окно.
Четкие ожидания: «Банк может попросить подтверждение — держите телефон рядом».
Fail-safe: тайм-аут → предложение повторить или перейти на альтернативный метод.
Сохранять контекст: после завершения 3DS возвращаемся на тот же шаг без потери введенных данных.
6) Отказы и восстановление (decline-recovery)
Soft-decline: подсказка «Временно недоступен банк/лимит» + кнопка повтора; если повтор не помог — кнопка «Попробовать другой метод» (предлагать A2A/кошелек).
Hard-decline: не предлагать ретрай на том же маршруте; показать безопасные альтернативы (локальные APM).
Сохранять сумму/валюту и выбранный пакет бонуса — не заставлять вводить заново.
На мобильном — не скрывать системный back; держать state в URL/Storage.
7) Прозрачность комиссий и политика возврата
Если на депозите есть fee или DCC — показывать до подтверждения: «Комиссия X%/Y фикс., итог к списанию Z».
Same-method и «возврат на источник»: краткий текст «Выводим туда же, откуда пришел депозит, до суммы нетто».
Ссылки на правила — в отдельном слое (sheet), не убирая пользователя с шага оплаты.
8) Локализация, валюта, язык
Авто-язык по Accept-Language/IP/KYC, но держать явный переключатель.
Форматировать тысячи/десятичные по локали (1 234,56 vs 1,234.56).
Локальные платежные детали (CPF/PIX ключ, IBAN, адрес биллинга) — только если нужны в этой стране.
Даты/время для 3DS/код-сроков — по локали (24h vs 12h).
9) Кошельки и one-tap
Apple Pay / Google Pay: показывать только на поддерживаемых устройствах/браузерах. One-tap на карточке суммы.
Системный шит (native sheet) — быстрее всего; не прятать сумму/валюту.
Витрина «сохраненных» карт/кошельков: крупные логотипы, последние 4, истекающие — с предупреждением «обновите дату».
Поддержка network tokens для стабильных повторных платежей/recurring.
10) Доступность и производительность
A11y: фокус-стили, контрасты, `aria-labels`, поддержка экранных читалок на 3DS/формах.
Клавиатурная навигация и «tab-order» без ловушек.
Лоадинг < 2 c для первого интерактивного, скелетоны вместо пустых экранов.
Offline-стабилизация: если сеть «просела» на 3DS — понятное сообщение и безопасный повтор.
11) Анти-фрод-friendly UI (без «сжигания» конверсии)
Мягкие step-up: запрос ZIP/почтового, DOB, селфи/KYC — по риску, а не всем.
Подсветка mismatch (BIN-страна vs IP/KYC) — без раскрытия внутренней логики («Похоже, текущий банк не поддерживается»).
Ограничение количества попыток в UI, таймер перед повтором, прогресс-индикатор.
12) Микро-копирайтинг (примеры)
PAN: «16–19 цифр, без пробелов — мы добавим».
CVV: «3–4 цифры на обороте/лице карты».
Ошибка soft: «Банк временно не ответил. Попробуйте еще раз или выберите другой способ».
Ошибка hard: «Банк отклонил операцию. Выберите другой способ оплаты».
3DS: «Подтвердите операцию в приложении банка — это занимает ~10–20 сек.»
13) Мобильные паттерны
Numeric-keyboard для числовых полей, автопереход фокуса.
Sticky-бар «Итого к списанию / Продолжить».
Поддержка deep-link 3DS в банковские приложения.
Haptic feedback на подтверждение; не злоупотреблять.
14) Платежные сценарии и варианты флоу
Express-депозит: метод по умолчанию (последний успешный токен), 1 экран.
«Без регистрации» → KYC после оплаты (там, где разрешено): повысит top-funnel, но обязательно — политика возврата и лимиты.
Комбо бонус + депозит: показывать чистую сумму депозита и бонус отдельно; не скрывать условия отыгрыша.
15) Метрики и дашборды (минимум)
AR/DR по методу/гео/каналу/устройству.
3DS pass & liability shift, soft-decline share.
Funnel: View→MethodPick→Details→3DSStart→3DSSuccess→Paid.
Abandonment reasons (on-page events): закрытие, ошибка поля, тайм-аут.
Latency p95/p99 по этапам (рендер, ввод, 3DS, подтверждение).
Cost-per-Approval и take-rate % (для UX-изменений, влияющих на роутинг).
Mobile vs Desktop: разрыв в AR и latency.
16) Эксперименты (коротко)
Рандомизируйте по пользователю, стратифицируйте по GEO/BIN/методу.
Guardrails: CBR/Refund, AR-порог, latency.
Тестируйте: порядок методов, тексты ошибок, 3DS модалки vs редирект, экспресс-флоу, автозаполнение, маскирование.
Учитывайте полную стоимость (fees/FX/reserve), если флоу меняет метод/PSP-выбор.
17) Шаблоны экранов (wireframe-уровень)
A. Выбор метода (мобильный)
Заголовок: «Способ оплаты»
Карточки: Apple Pay / Google Pay / Локальный кошелек / Карта
Лейблы: «Быстро», «Рекомендуем», ETA вывода (если релевантно)
Локальная валюта + сумма
B. Карточная форма
Поля: PAN, EXP, CVV, Имя держателя
Чекбокс «Сохранить карту для быстрых оплат» (с пояснением)
Инфоблок: возможен запрос подтверждения в банке
Кнопка: «Оплатить X {валюта}»
C. 3DS модалка
Шаги: «Ожидаем подтверждение в банке» + таймер + кнопка «Повторить»
Линк «Выбрать другой способ» (сохраняет сумму и контекст)
D. Ошибка / альтернатива
Сообщение по типу отказа
CTA 1: «Повторить» (soft)
CTA 2: «Оплатить через [локальный метод]»
18) Best practices (коротко)
1. Сначала быстрые рельсы (кошельки/A2A), затем карты; прятать нерелевантные методы.
2. Мягкая валидация inline, законченное сообщение об ошибке, без перезагрузок.
3. 3DS в модалке, frictionless по умолчанию, четкое ожидание и план B.
4. Сохранение состояния при отказах и возвратах, один клик до повтора.
5. Локализация: валюта/форматы/поля; показывать комиссию до подтверждения.
6. Мобильный-первый дизайн: numeric-keyboard, sticky-CTA, быстрые методы вверху.
7. Доступность и производительность — не опциональны.
8. Анти-фрод step-up по риску, а не всем.
9. Телеметрия по каждому шагу + воронка отказов и причин.
10. Эксперименты с guardrails и полноценной стоимостью.
19) Чек-лист внедрения
- Карта методов по GEO и порядок показа.
- Маскирование/валидация PAN/EXP/CVV, `autocomplete`.
- BIN-детект и бренд, подсказка о 3DS.
- 3DS-модалка с таймером и fallback.
- Retry для soft-decline, альтернатива для hard-decline.
- Прозрачные комиссии и политика same-method.
- Локализация: язык, валюта, форматы, локальные поля.
- One-tap/кошельки, сохраненные методы, network tokens.
- A11y/перформанс (LCP/TTI), скелетоны.
- Дашборды: AR/DR, 3DS, funnel, latency, причины отказов.
- План A/B и guardrails, дата-фриз для анализа.
Резюме
Конверсия checkout — это сумма мелочей: быстрые методы «на первом экране», корректные формы и подсказки, аккуратная 3DS-эскалация, грамотный обработчик отказов и честная прозрачность комиссий. Сфокусируйтесь на скорости, ясности и восстановлении после сбоев, измеряйте все по шагам и внедряйте изменения через контролируемые эксперименты — так вы поднимете AR, снизите отказы и сохраните доверие игроков и регуляторов.