» » » Платежные странички и решения (или через тернии к звездам — и через много картинок)

 

Платежные странички и решения (или через тернии к звездам — и через много картинок)

Автор: admin от 17-05-2017, 12:40, посмотрело: 68

Платежные странички и решения (или через тернии к звездам — и через много картинок)
TLDR для нетерпеливых — в принципе можно закрывать статью

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

Я больше на работаю в этой сфере, но я хочу поделиться тремя аспектами онлайн платежей: i) бизнес и ситуация на рынке на 2016-2017 год (гайд для менеджера) ii) детали технической интеграции (CTO) iii) поведение клиента / дизайн / верстка платежной странички (дизайн, верстка, тестирование).

Весь этот опыт набран не сразу — примерно за 1.5 — 2 года активного ковыряния в этой сфере. Если вас не интересует бизнес опыт, а интересуют только материалы по дизайну — смело пропускайте первые спойлеры.



Список основных разделов




Чем отличаются эквайеры, как правильно «читать» их маркетинговые материалы





Основные кластеры платежных сервисов



Какие поведенческие особенности людей нужно учитывать в первую очередь при верстке своих платежных страниц? Летопись наших стараний



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


  • Думайте про то, что непонятно типичному пользователю на платежной странице или форме заказа;

  • Представьте, что вы продавщица магазина, которая в первый раз пользуется интернетом и хочет воспользоваться вашим сервисом;

  • Каждая не максимально логично или просто работающая кнопка — минус 50% к конверсии;

  • Любое подвисание или JS, который не работает как каком-то типе дивайсов — минус 50%-100% к конверсии на таком типе дивайсов;

  • Любой дополнительный неавтоматический переход на другую страницу из формы заказа — минус 90% к конверсии;

  • Пользователи больше доверяют переходу на сайт банка, чем вводу карточных данных на сайте без HTTPS и с низким трастом ДЛЯ ВСЕГО НАСЕЛЕНИЯ в среднем. Это значит, что если ваш бизнес белый и пушистый, но про него знает менее 1-5% населения, то люди не захотят (статистически конечно) вводить данные на вашей стороне;

  • Удобство, адаптивность, читабельность на всех устройствах в удобном виде, правильно сделанные inputs в форме заполнения для любого типа дивайсов (если вы заморачиваетесь настолько, то эти детали я опишу дальше в пунтке 5);

  • Правильный и красивый flow с вашего сайта (приложения) на платежную страницу, примерно похожий дизайн, отсутствие визуального мусора;

  • Следуйте принципу снижения «трения» — простым языком — чем меньше геморроя клиенту нужно претерпеть — тем лучше (детали также в разделе 5);

  • По секрету, забегая вперед, ПОЛЕ ВЛАДЕЛЕЦ КАРТЫ НЕ НУЖНО ДЛЯ ПРОВЕДЕНИЯ ПЛАТЕЖА;



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


  • Ссылка на папку на гугл-диске с макетами и логами тестирования (видео);

  • Ссылка на архив на гугл-диске со всеми описанными ниже платежными страницами в HTML (там есть заморочки с настройкой скриптов для каждого эквайера, но все должно открываться или в браузере или на простейшем веб-сервере);



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



    Письмо вело на такую форму, которая тоже не фонтан. Она огромная, не адаптивная, ее нельзя встроить в i-frame итд итп. Как вы понимаете — форма стоковая от Альфа банка. Она ужасна.


    А так выглядит следующая стандартная форма следующего эквайера. Она добротная и простая, но не адаптивная и ужасно выглядит на мобильных устройствах.


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


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


    Адаптивное отображение прошлой формы. Обратите внимание, что все еще присутствует большое количество визуального мусора.


    Следующая итерация формы — обратите внимание, что тут уже нет «визуального мусора», лишних слов, палитра в стиле компании. Меньше — больше.


    Естественно эта итерация тоже мобильная и адаптивная. Также много работы на формами.


    А так выглядит финальная версия формы.


    Естественно она полностью мобильная и адаптивная.


    Такая же форма, но для другого эквайера (сколько боли стоило) и с опцией сохранения карты.


    Важная информация для тех, у кого не очень большой бюджет на мобильное приложение

    • Если ваша платежная форма адаптивна и подстраивается по фрейм, то вы можете открывать ее в web-view в вашем мобильном приложении;

    • Это позволяет сэкономить денег на 3DS и сделать как будто не нужно переходить по ссылке из приложение в браузер в телефоне;



    Особенности технологической интеграции, плюсы и минусы, наш опыт и набитые шишки



    Если вы не собираетесь проходить сертификацию по PCI-DSS (это может стоить относительно много денег), то высока вероятность, что форма оплаты будет открываться на стороне банка или платежного сервиса (на его домене). Что это означает с прикладной точки зрения?


    • В совсем печальном случае, если у вас нет никакой технической возможности влиять на поведение фронтенда вашего сайта или вы продаете монопродукт, форма оплаты будет в виде ссылки в email. Ссылка будет вести на страницу банка / платежного сервиса. Открываемость / теряемость электронной почты умноженная на невнимательность клиентов (если клиенту пришло две ссылки) и ваши «кривые руки» и моменты связанные с тем, что переход не всегда отрабатывает, приводят к тому, что такое решение имеет конверсию платежей в 50%. Понятное дело, что те, кто реально хотят что-то купить попробуют снова, но это неправильно;

    • В более продвинутом случае оплата будет работать как редирект в вебе с невозможностью иметь счетчик, куку или JS скрипт на стороне платежной страницы;

    • Как правильно продвинутые JS скрипты и media запросы могут быть запрещены на стороне банка. Все нужно решать только через HTML и CSS;

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

    • Скорее всего будут ограничения на скрипты валидации на клиенте (формула Луна);

    • Ограничение на визуальную составляющую HTML input-ов;

    • Вам придется доказывать банку, что новые HTML-теги, которые нужны для того, чтобы поля хорошо выглядели на сотовом телефоне, вам реально нужны;

    • Единственная информация, которую вы сможете получить о поведении клиента на стороне банка — это ответ АПИ платежного сервиса / банка;

    • У сбербанка периодически падает эмиссия карт и платежи перестают работать в онлайне и оффлайне. Это происходит в среднем раз в месяц;

    • На мобильных фронтендах нужно обращать пристальное внимание как страница ведет себя и отображается на основных типах дивайсов (iPhone, Android);

    • Нужно протестировать страницу 1 раз хотя бы на каждом типе устройств, популярных у клиентов вашей компании;

    • Если вы достаточно продвинуты, чтобы открывать страницу в i-frame или web-view, то пристально следите за конверсией, она может не вырасти от введения iframe — клиенты могут испугаться;

    • Внимательно прочитайте список полей, которые хочет ваш эквайринг сервис, реально нужны для проведения платежа картой ТОЛЬКО (все остальное или legacy или они собирают информацию о ваших клиентах):

    • Реально нужен — номер карты (на момент написания статьи уже может поменялось, но вследствие введения новых карт поле было 4+4+4+4-7 символов — банки не очень качественно уведомляют о таких изменениях);

    • Реально нужен — срок действия (смотрите внимательно документацию, настроить надо макимально просто для клиента);

    • Реально нужен — код безопасности (CVV / CVC 3-5 символов);

    • Платежный сервис сам откроет фрейм / сделает редирект на страницу с 3DS если он включен;



    Выключение 3DS
    Как правило не рекомендуется, т.к.:


    Еще есть один очень тонкий и важный момент, связанный с отслеживанием времени «протухания» формы:



    Пример почти идеального UX от банка tinkoff. Не до конца понимаю, зачем тут нужен «барабан» для CVV кода (он бесит) — возможно для защиты от такого мошенничества.
    Платежные странички и решения (или через тернии к звездам — и через много картинок)

    На всякий случай еще раз приведу ссылки:

  • Ссылка на папку на гугл-диске с макетами и логами тестирования (видео);

  • Ссылка на архив на гугл-диске со всеми описанными ниже платежными страницами в HTML (там есть заморочки с настройкой скриптов для каждого эквайера, но все должно открываться или в браузере или на простейшем веб-сервере);



  • Насколько нам в итоге удалось увеличить конверсию и снизить ставку за все это время с указанием реальных процентов



    Цифры ориентировочные, потому что реально отслеживать полную воронку конверсий довольно сложно. Но легко смотреть какая доля инвойсов на оплату оплачивается, а какая — нет.

    Читая эту таблицу, знайте, чем отличается процент от процентного пункта. Если конверсия была 50%, а стала 55%, то она изменилась на 5 п.п.







































    Используемая платежная страницаПримерная наблюдаемая конверсия платежного шлюза
    1. Письмо на email + ссылка на сайт Альфа-Банка~50% + было много проблем на нашей стороне
    2. Редирект на сайт RBS (white-label от Сбербанка) и письмо на email для подстраховки~60%-65% (подняли на 10-15 п.п.)
    3. Редирект на сайт RBS (white-label от Сбербанка) с новой платежной страницей~65%-70% (подняли еще на 5 п.п.)
    4. Редирект на сайт RBS (white-label от Сбербанка) с финальной версией платежной страницы~75% (подняли еще на 5-10 п.п.)
    5. Редирект на сайт Uniteller (white-label от Сбербанка) с финальной версией платежной страницы~70% — конверсия ниже чем у Сбербанка + RBS
    6. Пункт 5 + открытие в iframe без HTTPS~70% (минус 5 п.п. против пункта 5)
    7. Пункт 5 + открытие в iframe с HTTPSне успел протестировать
    8. Открытие в web-view в мобильных платформахпримерно такая же как на десктопе


    Основные влияющие факторы, которые мы выявили в итоге AB тестов (условно):

  • Чем меньше полей и шума — тем лучше. Считайте, что каждое поле — минус 5пп к конверсии;

  • Каждый блок, который привлекает внимание клиента — минус 5пп конверсии;

  • Каждый логотип, картинка или надпись, которая не логично связана с вашим бизнесом — минус 5-10 пп к конверсии;

  • Технологическая продвинутость нужна и важна, но только если КЛИЕНТ доверяет такой технологии или вашему бренду;



  • По идее еще есть бейджики, замочки и прочая атрибутика — но ее слава богу я не успел протестировать, ибо сначала надо решать технологические проблемы =).

    Особенности ведения переговоров с банками и платежными решениями и как отбивать чарджбеки




    Пара слов про мошенников в этой сфере


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



    Источник: Хабрахабр

    Категория: Программирование » Веб-разработка

    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
    Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

    Добавление комментария

    Имя:*
    E-Mail:
    Комментарий:
    Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
    Введите два слова, показанных на изображении: *