Анатомия страницы онлайн-оплаты: философия Fondy и релиз Checkout 2.0

2 декабря, 2020Дмитрий Хоптюк13 мин

За время существования платежей в интернете, а это ни много ни мало более 20 лет, пользователи ментально привыкли к определенному алгоритму действий:

достать пластиковую карту из кошелька
ввести номер карты в платежную форму по символам
ввести дополнительные данные
дождаться и ввести пароль из SMS
получить результат

Кажется, звучит просто и понятно, но на самом деле процесс оплаты в интернете по-прежнему сложнее и неудобнее, чем в офлайн-мире.

Ничто не сравнится с простым касанием физического терминала вашим телефоном или NFC-картой. Вам не надо вводить текст, имя, email, ждать SMS – все кристально просто. И при этом никого не заботит, какие символы нанесены на карту.

С появлением Apple и Google Pay все стало еще проще, а клиенты получили больше комфорта как в физическом, так и в цифровом мире. При оплате онлайн мы приближаемся к офлайн-простоте и скорости. При этом современные возможности браузеров включают спецификации для ввода данных кредитной карты, что дает больше удобства. Chrome, Safari, Firefox поддерживают автозаполнение, но вам все равно понадобится физическая карта или мобильное приложение банка, чтобы вручную вводить код безопасности при каждой транзакции.

На этом моменте мы подходим к главной проблеме. До того, как формы для кредитных карт уйдут в прошлое, нам необходимо все еще работать над добавлением ясности, простоты и безопасности в онлайн-формы для банковских карт и других платежных методов.

Предыдущая версия нашей платежной страницы

Предыдущая версия нашей платежной страницы работала с 2015 года. За это время мы добились одного из лучших показателей конверсии платежей на рынке, реализовали механизмы для быстрого и простого подключения страницы онлайн-оплаты на сайт (даже для нетехнических специалистов) и предоставили удобный интерфейс для покупателей. Правда, к 2020 году наша старая платежная страница уже не могла решать поставленные задачи:

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

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

Визуально сильно отличается от однотипных страниц конкурентов
Простая в подключении и настройке: дизайн платежной страницы можно настроить в несколько кликов прямо в Fondy-кабинете даже без помощи программиста
Безопасна и транслирует это ощущение пользователям
Загружается быстрее, чем предыдущая версия
Имеет множество шаблонов дизайна и конфигураций

Новые возможности платежной страницы

Простая и ясная визуальная часть

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

Никаких ссылок, уводящих со страницы, поп-апов с инструкциями, лишних полей ввода с ФИО и телефоном. Оставлена только самая важная информация:

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

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

Добавление логотипа

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

Редактор дизайна

В эпоху повального увлечения Material Design использование градиентных переливов считалось плохим тоном, а многие платформы, сайты и продукты использовали концепцию Flat UI. Сегодня все вернулось на свои места и чистый градиент считается привлекательным для пользователя.

Следуя трендам, мы решили дать клиентам выбор правильных сочетаний как flat-цветов, так и градиентов. Теперь в настройках платежной страницы представлен целый набор готовых дизайн-пресетов. Всего их 60. Каждый доступен в двух темах – светлой и темной. Если никакой из пресетов не попал в фирменный цвет сайта мерчанта, он может выбрать любой цвет из палитры вручную.

Благодаря наборам шаблонов платежная страница будет смотреться более нативно. Как будто она является частью самого интернет-магазина.

Локализация для разных рынков

Новую страницу оплаты можно адаптировать для разных языковых версий. Это помогает мерчантам персонализировать контакты с иностранными покупателями и упрощает взаимодействие с самой платежной страницей.

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

Например, пользователи в Польше привыкли оплачивать платежи с помощью Linki bankowe. В Ирландии этот же метод традиционно называют Internet banks. В зависимости от аудитории сайта, интернет-торговец может адаптировать названия разных элементов страницы через свой личный кабинет, опираясь на свое восприятие портрета покупателя. К примеру, если сайт принимает пожертвования, а не покупки, он может переименовать кнопку «Оплатить» на «Пожертвовать».

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

Предсказуемая адаптивность

Теперь пользователь Fondy может заранее увидеть, как дизайн платежной страницы будет выглядеть в адаптивном виде для смартфона, планшета или в версии, встроенной в его сайт.

Если вы планируете встраивать платежную страницу на сайт в ограниченную по размеру область, вы также сможете предварительно посмотреть на ее адаптацию.

Меньше кликов у повторных покупателей

Чтобы сделать повторные оплаты более быстрыми, обычно мы рекомендуем токенизировать карту клиента. Это позволяет совершать повторные платежи без заполнения полей – так, как это происходит в сервисах наподобие Glovo, Netflix и Uber. В качестве более простой альтернативы токенизации, Fondy также позволяет сохранять карты прямо в платежной странице.

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

Больше доверия у новых покупателей

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

Быстрота работы и безопасность

Перед запуском обновленной страницы мы провели серьезное обновление всей инфраструктуры. В частности, перенесли сервисы и главную базу данных на оборудование нового поколения, которое в несколько раз быстрее и надежнее предыдущего. Кроме увеличения производительности системы и обновления безопасности Fondy, это позволило в три раза ускорить загрузку новой платежной страницы из любой точки мира. Для этого мы используем систему CDN для доставки. Наконец, благодаря использованию сервисов от Amazon, мы гарантируем клиентам защиту платежных данных от DDoS-атак и попыток вторжений.

Также в новой платежной странице внедрена версия второго протокола 3D Secure от платежных систем Visa и Mastercard. В основном этот протокол направлен на улучшение конверсии за счет меньшего количества взаимодействий с пользователем. То есть после повсеместного внедрения данной версии 3D Secure мировыми банками количество платежей, требующих дополнительного ввода одноразового пароля, будет значительно меньше.

На сегодня все. Вместо эпилога хотим подчеркнуть, что все существующие и будущие изменения в платежной странице опираются на данные о поведении клиентов, обратную связь наших мерчантов и актуальные UX-практики. А дальше – только проще.