Как принимать платежи в мобильном приложении

Пример реализации — мобильное приложение «Уральских авиалиний» для iOS

Когда в начале 2010-х мы запускали продукт для приема платежей с мобильных устройств и из мобильных приложений

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

https://www.youtube.com/watch?v=ytcopyrightru

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

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

В 2013 году мобильный трафик рос более чем в 2 раза быстрее «десктопного», а в 2014 — более чем в 6 раз. И, судя по всему, в ближайшие годы это движение не остановить. На диаграмме ниже представлены показатели мобильного трафика за последние 3 года с разделением по ключевым мобильных операционным системам.

Отметим, что эти цифры распределены по устройствам, с которых были успешно совершенны платежи через PayOnline. Чистый коммерческий трафик без примеси интернет-серферов и пользователей бесплатных приложений 🙂

Одним из первых клиентов нашей компании, использовавшим SDK для интеграции платежного сервиса в мобильное приложение под iOS, стала авиакомпания «Уральские авиалинии».

Если хотите посмотреть, как происходит процесс бронирования и оплаты билета in-app purchase — кликайте сюда

Начинается все с ввода параметров полета:

Как принимать платежи в мобильном приложении

В результатах поиска выбираем подходящий рейс:

Как принимать платежи в мобильном приложении

Подтверждаем количество пассажиров и стоимость:

Как принимать платежи в мобильном приложении

Вводим данные о пассажире:

Как принимать платежи в мобильном приложении

И данные плательщика. На введенный адрес электронной почты PayOnline отправит платежную квитанцию сразу после завершения оплаты:

Как принимать платежи в мобильном приложении

После этого билет бронируется, чтобы в тот момент, когда вы совершаете оплату, никто не купил ваш билет прямо «у вас перед носом» (что может быть особенно обидно, если билет был последний):

Как принимать платежи в мобильном приложении

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

Читайте ещё про NFC:  Платежная система самсунг пей

Как принимать платежи в мобильном приложении

Экран обработки оплаты также соответствует общему дизайну приложения:

Как принимать платежи в мобильном приложении

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

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

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

Чтобы разобраться в этом вопросе, мы обратились к первоисточнику — «App Store Review Guidelines», главе 11 «Purchasing and currencies».

order.setRequiredRecToken(true)
order.setVerification(true)
 Параметр requiredRecToken требует возвратить токен карты при успешной авторизации карты, а verification — что средства с карты списывать не нужно, а достаточно их заблокировать, а потом вернуть (платежный шлюз возвращает их автоматически). В ответ платежный шлюз вернет параметры recToken — токен карты, recTokenLifeTime — срок действия токена (по сути срок действия карты) и maskedCard — маскированный номер карты, который необходимо привязать в бекенде к токену для дальнейшего отображения клиенту при выборе способа оплаты. Теперь, имея токен карты вы можете в любой момент по требованию клиента или при наступлении срока оплаты, вызвать метод списания по токену через server-to-server API и списать необходимую сумму. Подводные камни: По нашей статистике у довольно значимой части картодержателей не получается оплатить через 3DSecure на мобильном устройстве по ряду причин, от него и шлюза не зависящих: — может не приходить SMS, или пользователь переключаясь между SMS-приложением и вашим, потерял форму с вводом пароля 3D-Secure, так как она открывается в WebView или системном браузере — полезла верстка 3D-Secure страницы банка на смартфоне или планшете (банки очень редко адаптируют такие страницы) — веб-сервер банка отключил поддержку небезопасного протокола TSL 1.0, что делает 3D-Secure недоступным для Android версии {amp}lt;4.1 Лайфхак: Мы на платежном шлюзе умеем включать/отключать налету 3D-Secure, и если все-таки у клиента не получается оплатить, мы под него подстраиваемся, и пытаемся сделать оплату без 3D-Secure пароля.  Также стоит помнить, что если вы сохраняете токены одного платежного провайдера в своей системе, то использовать их на другом провайдере уже не получится, разве что если провайдеры не договорятся между собой о миграции токенов, что в принципе в нашей практике уже было несколько раз. 

Как принимать платежи в мобильном приложении

Функция оптического сканирования карты реализована для Android в библиотеке android-sdk-optical, для iOS в библиотеке CloudipspOptical с использованием card.io SDK.NFC сканирование реализовано при помощи библиотек android-sdk-nfc и react-native-cloudipsp-nfc и доступно только для Android. Хотя Apple и открыла начиная с версии iOS 11  сторонним разработчикам возможность читать RFID метки, но чтение EMV тегов с банковских карт по прежнему остается недоступным.

Читайте ещё про NFC:  Не работает Apple Pay на iPhone

Отличается от обычной реализации наличием NfcCardBridge и навешиванием Intent на него для ожидания события, что карта прочитана (readCard)

Подводные камни:Хотя считывание карты и выполняется посредством NFC, протоколом финансовой авторизации карты по-прежнему служит обычный card not present. Т.е. для полноценной работы этой функциональности, карта должна быть открыта для платежей в интернет.

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

Для того, чтобы воспользоваться сервисом переводов с карты на карту, необходимо будет предварительно зарегистрироваться на сайте платежной платформы Fondy и привязать банковскую карту, на которую будут поступать средства, в свои финансовые настройки. С целью обеспечения безопасности, сумма, которую можно списать посредством NFC без поддержки 3D-Secure может быть не более эквивалента $4.

Переходим к Payment SDK PayOnline для iOS

Payment SDK для приложений iOS позволяет разработчикам легко и непринужденно интегрировать прием платежей по банковским картам в мобильное приложение. Зачем разработчику приложения Payment SDK можно прочитать в материале, который мы опубликовали в блоге

https://www.youtube.com/watch?v=ytadvertiseru

Что самое главное? Главное, что интегрировав прием платежей с помощью SDK для iOS, вы избежите WebView. Все элементы процесса оплаты встраиваются в мобильное приложение и кастомизируются под его дизайн.

Как принимать платежи в мобильном приложении

Объясняя в двух словах: SDK позволяет избежать погружения в пучины интеграции с платежным шлюзом, реализации протокола безопасности 3-D Secure и других нецелевых расходов времени и сил. Но прежде чем переходить к вопросам интеграции, стоит разобраться в непростых правилах Apple по отношению к сторонним платежным сервисам в приложениях.

Читайте ещё про NFC:  Программа эпл пей

Кейс 2. Кастомизируем верстку формы ввода номера карты

Часто возникает необходимость разместить поля для ввода номера карты, срока действия и cvv2 в другой последовательности, чем это предусмотрено стандартным layout в SDK. Но из-за требований PCI DSS вы не можете просто взять, и заменить поле ввода номера карты на стандартный компонент EditText. Для этих целей мы разработали flexible layout.

Для организации ввода карты в SDK есть два механизма:CardInputView — готовый view для использования;CardInputLayout — лишь layout wrapper для потроение view в собственном стиле разметки.

Следовательно можно абсолютно свободно кастомизировать и располагать элементы ввода на сколько хватит фантазии. Есть лишь одно правило которое нужно соблюдать — каждый из элементов ввода (CardNumberEdit,CardExpMmEdit,CardExpYyEdit,CardCvvEdit) должен быть в CardInputLayout один раз, при этом не играет роли уровень вложенности View.

Подводные камни:Кастомизируя поля ввода стоит помнить:— cvv2 может быть длиной как 3, так и 4 символа— номер карты может быть от 14 до 19 символов— можно добиться максимально точной кастомизации к вашему дизайну, сделав форк SDK и внеся изменения уже в своей реализации layout (это не запрещено делать, если вы не начинаете пропускать реквизиты карты через свой бэкенд). Но сделав форк вы теряете поддержку обновлений SDK со стороны шлюза и интеграцию новых фич

https://www.youtube.com/watch?v=ytdevru

Лайфхак:Часто можно встретить на форме ввода реквизитов карты инпуты для ввода имени и фамилии картодержателя и его ZIP кода. Для платежей по СНГ нет практической необходимости это делать в 99% случаев — только некоторые банки США, Канады и Великобритании поддерживают эту технологию, которая называется Address Verification System, при этом чтобы проверка сработала, ее должны поддерживать как банк-эквайер, так и банк-эмитент.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector