NFC Эксперт Пример реализации — мобильное приложение «Уральских авиалиний» для iOS
Когда в начале 2010-х мы запускали продукт для приема платежей с мобильных устройств и из мобильных приложений
, мы даже не подозревали, какой дикий рост покажет мобильный трафик уже в ближайшие несколько лет.
https://www.youtube.com/watch?v=ytcopyrightru
Сегодня из каждого утюга несется история о начале эпохи мобильной коммерции, но получить адекватные, точные, а главное —локализованные на Россию статистические данные получается с трудом. Вводя в Google запрос «доля iOS в России», мы получаем множество приблизительных цифр, основанных на мировой статистике и показателях продаж устройств по отчетам крупнейших торговых сетей.
К счастью, мы ежедневно обрабатываем десятки тысяч платежей и имеем доступ к реальным показателям того, с чего же россияне платят в Интернете. Сегодня мы покажем вам данные с 2013 по 2015 год, за которые считанные проценты оплат с мобильных устройств превратились в пятую часть нашего платежного трафика.
В 2013 году мобильный трафик рос более чем в 2 раза быстрее «десктопного», а в 2014 — более чем в 6 раз. И, судя по всему, в ближайшие годы это движение не остановить. На диаграмме ниже представлены показатели мобильного трафика за последние 3 года с разделением по ключевым мобильных операционным системам.
Отметим, что эти цифры распределены по устройствам, с которых были успешно совершенны платежи через PayOnline. Чистый коммерческий трафик без примеси интернет-серферов и пользователей бесплатных приложений 🙂
Одним из первых клиентов нашей компании, использовавшим SDK для интеграции платежного сервиса в мобильное приложение под iOS, стала авиакомпания «Уральские авиалинии».
Начинается все с ввода параметров полета:
В результатах поиска выбираем подходящий рейс:
Подтверждаем количество пассажиров и стоимость:
Вводим данные о пассажире:
И данные плательщика. На введенный адрес электронной почты PayOnline отправит платежную квитанцию сразу после завершения оплаты:
После этого билет бронируется, чтобы в тот момент, когда вы совершаете оплату, никто не купил ваш билет прямо «у вас перед носом» (что может быть особенно обидно, если билет был последний):
И, наконец, оплата. Как вы видите, дизайн платежной формы ничем не отличается от оформления остальных экранов мобильного приложения. А лаконичность формы позволяет минимизировать долю отказов на стадии оплаты:
Экран обработки оплаты также соответствует общему дизайну приложения:
Экран завершения оплаты мы не сделали, так как в на тот момент Екатеринбург лететь никто не собрался 🙂
Но данные мониторинга ежедневно сообщают об успешных платежах через приложение.
Кейс 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 тегов с банковских карт по прежнему остается недоступным.
Отличается от обычной реализации наличием 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 по отношению к сторонним платежным сервисам в приложениях.
Кейс 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, при этом чтобы проверка сработала, ее должны поддерживать как банк-эквайер, так и банк-эмитент.