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

2 Грудня, 2020Дмитро Хоптюк12 хв

За час існування платежів в інтернеті, а це понад 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-практики. А далі – тільки простіше.