Новая платежная страница Robokassa: как, что и зачем мы изменили

Татьяна Глазачева, CEO платежного сервиса Robokassa

Очевидно, что основное событие 2020 года – пандемия COVID-19 – серьезно повлияла на многие сферы и аспекты нашей жизни. Например, для сферы электронной коммерции ситуация стала толчком для развития и роста, поэтому, в целом, год оказался успешным. Согласно данным Ассоциации компаний интернет-торговли (АКИТ) в прошлом году российский рынок e-commerce составил 3,2 трлн рублей, что на 58,5% больше показателя 2019 года. В 2020 году количество онлайн-покупок выросло почти на 80%, россияне оформили 830 млн заказов в интернете – такие цифры озвучил директор исследовательского агентства Data Insight Борис Овчинников.

Покупатели привыкли к онлайн-платежам и к тому, что это просто, быстро и удобно. Качество платежной страницы – играет ключевую роль и влияет на самый важный показатель для продавца – конверсию оплат.

И мы сделали новую платежную страницу в такой технической логике, чтобы наши клиенты-мерчанты, выполнив главную задачу и доведя клиентов до покупки, были уверены, что процесс оплаты будет быстрым и комфортным, а еще лучше – практически незаметным. Здесь парадокс заключается в том, что лучшая платежная страница – это та, на которой пользователь даже не успевает обратить внимание на то, как оплата уже совершена. Обеспечить подобный пользовательский опыт – задача непростая, ведь помимо технических нюансов, необходимо соблюсти множество требований от МПС, условий безопасности и внутренних регламентов компании. Учитывая все эти моменты, мы основательно поработали над логикой платежной страницы, чтобы в итоге предоставить пользователям максимально комфортный, актуальный и стабильный инструмент для торговли. Этот масштабный проект мы начали с того, что определили спектр моментов, которые нас не устраивают и требуют изменения:

  • Не оптимальная по времени загрузка страницы
  • Избыточные элементы интерфейса
  • Устаревшая логика формы «оплата картой»
  • Скролл страниц даже с маленькой формой
  • Устаревшая логика отображения ошибок

После определились с тем, что мы хотим реализовать в новой версии платежной страницы:

  • Легкую и быструю загрузку страницы
  • Новую логику оплаты картой
  • Объединение методов оплаты
  • Новую логику поведения ошибок
  • Интуитивно понятное взаимодействие с покупателем после оплаты

Поставив перед собой конкретные цели, мы приступили к их непосредственной реализации.

Передаю слово Ивану Алексееву, CTO компании Robokassa. Иван подробно расскажет, что именно претерпело изменения в новой версии платежной страницы и как это скажется на удобстве нашего клиента и его плательщика.

Иван Алексеев, CTO платежного сервиса Robokassa:

Мы постарались сделать наши платёжные инструменты максимально незаметными для плательщика, не отвлекающими его от процесса покупки. Чтобы можно было сказать: «Если я не помню, через что платил, я платил через Robokassa». Я постараюсь максимально наглядно и конкретно описать ключевые изменения, которые дадут нашему пользователю кардинально новый опыт взаимодействия с платежной страницей.

Что мы сделали?

  • Объединили платежные методы.
  • Переработали каталог способов платежа.
  • Свели к минимуму число кликов при платеже.
  • Сделали уход с формы оплаты во время платежа осознанным действием.
  • Исключили тупиковые пути при проблеме с оплатой.
  • Всю правовую информацию сделали всплывающими окнами.

А теперь обо всем в деталях.

Объединили платежные методы

Всё, что можно связать логикой, мы решили объединить и упростить, это сократит список методов и повысит скорость выбора для покупателя, а следовательно, ускорит процесс оплаты. Мы объединили платежные методы следующим образом:

  • Метод «Банковская карта» – включает в себя платёжные токены, кредитные карты, карты рассрочки и дебетовые карты платёжных систем Visa, MasterCard, Maestro и «Мир»
  • Метод «Мобильный платеж» – включает в себя всех сотовых операторов, через которых проводятся платежи
  • Объединение методов – если некий сервис владеет разными способами оплаты под одним брендом ( например, «Элекснет», оплата через терминал и через кошелек), то они объединяются в один, а переключение между ними осуществляется на форме оплаты

Новый каталог способов платежа

По умолчанию мы показываем форму с наиболее популярным способом оплаты – или тот метод, который выбрал магазин. В большинстве случаев это будут банковские карты. На мобильном устройстве мы показываем один платежный метод. Одним методом можно считать и несколько объединённых: в данном случае, токены и карты. Для оплаты другим способом покупателю необходимо пройти через каталог.

В каталоге мы отказываемся от категорий, сортировки и поиска по причине объединения методов и сокращения их числа.

Минимум кликов при платеже

Десктопная версия страницы позволяет нам сократить количество кликов при переходе к другому способу оплаты. Мы можем показать сразу три самых популярных способов оплаты и вход в каталог со всеми способами. Информация с ценой и деталями платежа фиксируется на странице, а логика одинакова и для мобильной, и для десктопной версии.

Вывод: таким образом, процесс оплаты для покупателя становится более быстрым и удобным.

Оплата прошла успешно: сценарии

  • Возврат на страницу успеха внутри магазина

Мы не показываем форму success, её показывает магазин. Наша задача здесь – вернуть пользователя в магазин сразу после успешного проведения платежа.

  • Страница с демонстрацией success

Это решение для магазинов, у которых нет страницы «успеха» или возврат не важен (например, в случае продажи только одного цифрового товара). По кнопке мы возвращаем покупателя на страницу, которую указал магазин. На второй странице можно вернуться в магазин и показать чек оплаты.

  • Success – тупиковая страница

Это решение подходит для тех, кто продает в мессенджерах или соцсетях – то есть, там, где возвращать пользователя некуда.

Уход с формы оплаты во время платежа – осознанное действие

Чтобы исключить возможность случайного ухода с формы, во время оплаты мы запрашиваем подтверждение у покупателя.

Подтверждение требуется только тогда, когда пользователь находится на форме или промежуточном этапе.

Вывод: это гарантирует, что покупка не сорвется из-за того, что пользователь случайно ушел со страницы оплаты и ему нужно заново заполнять форму.

При проблеме с оплатой больше нет тупиковых путей

Если происходит ошибка «Отмена операции банком», мы принудительно возвращаем пользователя на форму оплаты. Как правило, это связано с неправильным вводом данных или недостаточным количеством средств.

И конечно, мы поступаем так же при переходе к подтверждению оплаты при других методах платежа.

Важно: чтобы покупателю не пришлось тратить время и вновь заполнять форму оплаты, мы сохраняем всю информацию, которую пользователь ввёл ранее (кроме кода CVC/CVV, это поле мы оставляем пустым).

  • Банковские карты и токены

Если происходит ошибка при обращении к форме 3DS или отклонение операции банком, мы предлагаем проверить баланс и данные карты, обратиться в банк или оплатить другой картой.

  • Другие методы оплаты

Если происходит ошибка при попытке оплаты – мы возвращаем на форму.

Вывод: не отпуская покупателя с платежной страницы, мы увеличиваем возможность успешной оплаты.

«Время вышло»: сценарии

  • Сценарий №1 – если время оплаты выходит, возвращаем в магазин

За пять минут до окончания актуальности выводим уведомление, которое закрывается свайпом. Через две и через одну минуту до истечения времени мы повторяем уведомление, если оно было закрыто. Когда время истекает, показываем экран с загрузкой, пока не перенаправим в магазин.

  • Сценарий №2 (тупик) – когда время оплаты вышло, а перенаправить покупателя некуда

Вывод: отправляя уведомления несколько раз, мы повышаем шанс на успешную оплату.

Правовые документы и сертификаты

Необходимо сделать так, чтобы ссылки на документы не уводили покупателя со страницы оплаты. Всю информацию мы показываем во всплывающих окнах, используя iFrame для pdf-документов.

Вывод: покупатель не уходит с платежной страницы, и мы снижаем риск того, что оплата в процессе прервется.

Мы провели большую работу по реструктуризации и обновлению платежной страницы. Я описал лишь ключевые изменения, но все они – как небольшие, так и глобальные – направлены на повышение конверсии в оплату для продавцов и улучшение пользовательского опыта для покупателей. Новая платежная страница уже работает – мы будем благодарны любому фидбеку.

В качестве заключения

Татьяна Глазачева, CEO Robokassa:

«Начиная с 2020-го года в нашей компании произошел ряд серьезных изменений и нововведений: в декабре прошлого года был перезапущен продукт Robomarket (который мы полностью переписали и перевезли на JS и Python), далее, в июле текущего года, мы выпустили новый инструмент для быстрого и простого старта бизнеса – конструктор для создания интернет-магазина. Теперь очередь дошла до запуска новой версии платежной страницы, и мы не планируем на этом останавливаться.

Резюмируя, могу сказать, что жизненно важно всегда находиться в поиске новых возможностей для роста и не быть статичными, чтобы оставаться актуальными и востребованными для клиента. И конечно, не забывать делиться своим опытом и практикой с коллегами по рынку. Благодарю за внимание!»

0
8 комментариев
Написать комментарий...
Алексей Архипов

Тётя на превью зигует

Ответить
Развернуть ветку
ivan krapivin

Заменили? Она перестала зиговать?

Ответить
Развернуть ветку
Алексей Архипов

Да

Ответить
Развернуть ветку
Alexey Arhipov

Блин, думаю, когда я успел отметиться в теме робокассы )))

Ответить
Развернуть ветку
Nikolay Kenig

Почему самозанятым нельзя подключить Робокассу?

Ответить
Развернуть ветку
Илья Щербаков

Замените превью - более нелепого и нефотогеничного снимка представить трудно

Ответить
Развернуть ветку
Валерий Дерябин

Лично я растерялся, когда увидел новую форму. Хочу оплатить картой, а не сразу вижу поле для ввода номера карты. Вижу три больших черных кнопки, которые ко мне никакого отношения не имеют. Считаю, что их нужно отправить вниз.

Ответить
Развернуть ветку
Ware Wow

Без сберпэй неактуально. Сейчас до 30% платежей идет через сберпэй к сожалению.

Ответить
Развернуть ветку
5 комментариев
Раскрывать всегда