Страница оплаты: варианты подключения и правила повышения конверсии

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

И так, что вы узнаете. Рассказываем по пунктам:

• Интеграция вашей страницы оплаты через API
• Интеграция с помощью страницы оплаты провайдера
• Интеграция вашей страницы оплаты со скриптом шифрования
• 10 правил оформления страницы оплаты

Совершая покупку на сайте, пользователь должен заполнить поля платежной формы и нажать кнопку «Оплатить» для совершения транзакции. Персональные данные (имя, номер и срок действия карты, CVV-код, сумма платежа) отправляются в платежную систему и верифицируются для подтверждения операции.

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

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

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

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

Интеграция по API (программный интерфейс приложения) – это взаимодействие вашей встроенной в сайт платежной страницы с платежным шлюзом посредством прямой связи между серверами. При этом персональные карточные данные плательщика собираются и хранятся на стороне продавца и передаются на сервер платежного провайдера.

Интеграция по API позволяет разным системам и задействованным в транзакции программам “понимать” друг друга и соединяться напрямую с помощью специально написанных разработчиками программных кодов.

Преимущества

• Вы сможете силами своих специалистов оформить и доработать дизайн платежной страницы в соответствии с общей стилистикой сайта.
• Более гибкая настройка платежной формы на различных устройствах.
• Возможность расширенного сбора данных о пользователях и изучения UX (IP-адрес, email, номер телефона, устройство).
  
  

Особенности

• Требует сертификата PCI DSS, стандарта безопасности хранения данных держателей банковских карт Payment Card Industry Security Standards Council, принятого платежными системами. Получение сертификата соответствующего уровня зависит от ряда условий.
• Необходима собственная команда разработчиков для обработки и поддержки страницы оплаты и взаимодействия с API платежного шлюза.
• Подключение каждого нового платежного метода (например, Apple Pay или PayPal) требует доработки программного кода.
• Ответственность за стабильность платежного процесса частично ложиться на вашу команду.
  
  

Интеграция через API подходит вашему бизнесу, если:

• Ваша компания имеет сертификат PCI DSS.
• есть собственный штат разработчиков.
• имеется необходимость время от времени менять платежные сценарии и дизайн страницы оплаты.
• У вас большое количество форм и сценариев взаимодействия с пользователями
  
  

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

При таком способе интеграции платежная страница создается на стороне платежного провайдера и вызывается с его сервера. На выбор она может встраиваться в страницу сайта (iframe), рис.1, открываться в модальном окне (pop-up), рис.2, или на отдельной странице браузера, рис.3. При этом все пользовательские данные собираются, обрабатываются и хранятся на стороне платежного провайдера.

Преимущества

• Не требует получения сертификата PCI DSS, поскольку данные плательщиков отправляются сразу на сервер платежного провайдера.
• Быстрое подключение новых платежных методов по запросу берет на себя платежный провайдер.
• Ответственность за стабильность процесса оплаты также лежит на платежном провайдере.
• Требуется минимальная поддержка со стороны ваших IT-разработчиков.
  
  

Особенности

• Для изменения дизайна страницы оплаты требуется привлечение разработчиков со стороны платежного провайдера.
  
  

Интеграция с помощью страницы оплаты провайдера подходит вашему бизнесу, если:

• у вашей компании нет сертификата PCI DSS.
• собственная разработка отсутствует или ее ресурсы ограничены.
• вы пробуете новый дизайн сайта или меняете существующий.
  
  

Внутри интеграции онлайн-платежей на ваш сайт с помощью платежной страницы провайдера есть свои подвиды. Какой из них выбрать, зависит от того, создан ли ваш сайт на одном из типовых конструкторов CMS (Content Management System), или имеет собственный уникальный движок.

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

1. Интеграция с помощью модулей CMS

Сегодня многие сайты выполняются на типовых CMS-платформах, которые позволяют создавать и управлять интернет-ресурсами, не имея специальных навыков веб-программирования. Это, например, Magento, OpenCart, osCommerce, PrestaShop, WordPress и Bitrix.

Для этих CMS-систем разработаны типовые программные модули (плагины) страниц оплаты. Их можно легко интегрировать в соответствующую CMS без всяких внутренних доработок и с минимальными трудозатратами. При этом статусы заказов и покупок будут актуально отображаться и для пользователей, и в системе управления сайтом.

2. Интеграция с помощью SDK-библиотек

Если вы используете сайт собственной разработки, то он, скорее всего, написан на одном из популярных языков веб-программирования: Java, JavaScript, Go, PHP или Python.

Для каждого языка программирования существует специальный набор средств, или библиотеки SDK (Software Development Kit). С их помощью можно собрать приложение для платежной страницы шлюза и вставить его на сайт.

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

Итак, у нас остался последний по списку, но не последний по значимости способ интеграции – интеграция с помощью страницы оплаты со скриптом шифрования. Не требует повышенного уровня сертификации PCI DSS. При этом, дает полный контроль над дизайном платежной формы. Это комбинированный способ интеграции, в котором, по сути, участвуют две платежные страницы – ваша платежная страница и платежная страница провайдера.

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

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

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

2) Следующий этап — переход на страницу оплаты платежного провайдера. Для пользователя она отображается как страница с элементом, который означает загрузку данных — прелоадер.

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

Именно страница оплаты провайдера осуществляет всю дальнейшую обработку платежа.

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

Таким образом, при интеграции с использованием скрипта шифрования все сценарии и технические процессы транзакции (включая запрос 3DS2-аутентификации, маршрутизацию и т.д.) берет на себя платежная страница на стороне платежного провайдера. А благодаря токенизации обмен карточными данными между вашей страницей оплаты и платежным шлюзом защищен так же хорошо, как при межсерверной связи при интеграции по API.

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

Преимущества

• Полный контроль над оформлением и управлением вашей страницей оплаты, как при подключении через API.
• Не требуется участия ваших разработчиков в обработке различных сценариев платежей.
• Токенизация обеспечивает дополнительную защиту данных.
• Не требует повышенного уровня сертификации PCI DSS (в отличие от интеграции через API).
  
  

Особенности

• Этот вид интеграции возможен только для платежей по банковским картам.
  
  

Интеграция со скриптом шифрования подходит вашему бизнесу, если:

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

Уже выбрали способ подключения платежной страницы? Теперь пора подумать над ее внешним видом.

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

Приведем основные правила его оформления.

1) Дизайн платежной страницы и дизайн сайта выполняются в одном стиле. Это повышает доверие пользователей к процессу оплаты.

2) Навязчивая страница оплаты, которая появляется сразу после выбора товара или вообще возникает ниоткуда – это плохо. Покупатель должен подумать, прежде чем заплатить, и сам “подойти” к виртуальной кассе, когда будет к этому готов.

3) Для простоты использования и повышения конверсии страница оплаты не должна содержать лишних элементов, рекламы, призывов к оплате и других отвлекающих деталей.

4) Необходимо визуально показать поля, обязательные и необязательные для заполнения.

5) На странице сбора дополнительных данных (если такая есть) рекомендуется сначала отображать поля, которые легче заполнить (например, e-mail или имя пользователя).

6) Для пользователей из других регионов нужно локализовать платежную страницу: использовать понятный язык, популярные региональные методы оплаты и возможность выбора из нескольких валют.

7) Необходимо подчеркивать безопасность платежей с вашего сайта, размещая логотипы платежных систем, сертификацию PCI DSS, Visa Secure, Mastercard ID Check, а также информацию о политике конфиденциальности на видном для пользователя месте.

8) Нужно дать пользователю возможность исправить ошибку при вводе персональных и карточных данных, не стирая уже заполненные поля и не дожидаясь нажатия на кнопку “Оплатить”.

9) Страница оплаты должна быть адаптивной для разных устройств и экранов.

10) Пользователю должно быть удобно попадать с сайта на платежную страницу и обратно.

Хотите узнать больше о возможностях интеграции и простых, быстрых и безопасных платежах? Обратитесь за дополнительными консультациями в ECOMMPAY.