Опыт Тинькофф Оплаты: улучшили мобильный SDK и сделали оплату в интернете еще удобнее +33


AliExpress RU&CIS

image

Привет! В начале лета мы обновили Tinkoff Acquiring SDK и зарелизили вторую версию для Android и iOS. Tinkoff Acquiring SDK — это open-source-библиотека для мобильных платформ. С ней удобно принимать оплату в приложениях. В статье хочу рассказать, чем это круто для владельцев интернет-бизнеса и их покупателей.

Что улучшили


Проблемы, которые были в прошлой версии:

  1. Сложная архитектура библиотеки. Из-за этого разработчики тратили много времени на поиск и исправление ошибок.
  2. Избыточный API библиотеки. Разработчики часто ошибались при интеграции SDK.
  3. Не соблюдаются требования Apple Pay и Google Pay по настройке этих видов оплаты.

Что мы сделали, чтобы это исправить, и что ещё нового появилось:

  1. Полностью переписали код для обеих операционных систем. Провели рефакторинг кода и добавили много полезных функций. Теперь библиотеки работают на Kotlin и Swift.
  2. Добавили Систему быстрых платежей. Можно платить через СБП по QR-коду или через «Мгновенный счёт» — по кнопке на экране оплаты.
  3. Поддерживаем решение all in one. Всё в одном месте: привязка карт, бесконтактная оплата, быстрые платежи по QR-коду.
  4. Обновили дизайн. Добавили темную тему. Но и не забыли про кастомизацию темы на Android, которая была в прошлой версии.
  5. Продолжаем поддерживать предыдущую версию. Подумали обо всех клиентах, не обделили старых и новых — SDK работает одинаково и в первой, и во второй версии. Но рекомендуем все же обновиться, чтобы пользоваться новыми функциями.

А теперь обо всем по порядку.

Для чего нужен Tinkoff Acquiring SDK


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

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

Вот что умеет SDK:

Сканировать и распознавать банковские карты с помощью камеры и NFC и сохранять их. Покупатель один раз привязывает карту в приложении, а потом вводит только CVC-код, чтобы оплатить покупки.

Принимать все виды платежей в приложении: по банковским картам, через личный кабинет tinkoff.ru, Apple Pay и Google Pay. В том числе рекуррентные платежи — то есть автоматические, по подписке, без повторного ввода реквизитов.

imageimage

Оплачивать с помощью Системы быстрых платежей (СБП). SDK помогает принимать платежи через СБП: покупатель оплачивает товары по QR-коду, в котором содержится вся информация о заказе. Реализуем два сценария: оплату в клиентском приложении и выставление счёта.

Поддерживать онлайн-кассу и фискализацию. Всё в соответствии с ФЗ-54.

Настраивать окно оплаты под дизайн приложения. Доступно в приложениях на Android.

Архитектурные улучшения


Проблема. Архитектура кода SDK устроена так, что поддерживать и внедрять в него новые функции сложно и долго.

Решение. Разработчики SDK провели полный рефакторинг старого кода библиотек:

— код написан на современных языках Kotlin и Swift. Это ускорило процесс разработки и помогло выстроить удобную архитектуру, которую легко поддерживать и расширять: мы быстрее внедряем новые функции, а клиенты быстрее получают обновления. В первой версии код написан на Java и Objective-C;

— на Android настройки экрана созданы с помощью Kotlin DSL. А вся многопоточная работа построена на корутинах: они помогают обрабатывать запросы в сеть, размер библиотеки при этом увеличивается менее чем на 1 МБ;

— в проекте сократилось количество кода. Используем Generic enum, обработку ошибок с помощью throws и расширения некоторых базовых классов. Поддерживать проект стало проще;

— обновили API библиотек. Методы вызова экранов и основных функций для оплаты вынесли в отдельный класс. Это единая точка входа библиотеки: гораздо проще вызывать методы API из одного места, чем из раскиданных по коду.

Структуру методов спроектировали так, чтобы работа с API была удобной и понятной. Методы хорошо задокументированы и соответствуют привычным стандартам кода на Java, Kotlin, Swift.

Например, так выглядит формирование настроек экрана оплаты и его запуск в SDK Android:

val tinkoffAcquiring = TinkoffAcquiring("terminalKey", "password", "publicKey")
        val paymentOptions = PaymentOptions()
                .setOptions {
                    orderOptions {
                        orderId = "777"
                        amount = Money.ofCoins(1000)
                        title = "Order Title"
                        description = "Order Description"
                    }
                    customerOptions {
                        customerKey = "user-key"
                        checkType = CheckType.HOLD.toString()
                        email = "useremail@gmail.com"
                    }
                    featuresOptions {
                        localizationSource = AsdkSource(Language.RU)
                        useSecureKeyboard = true
                    }
                }
tinkoffAcquiring.openPaymentScreen(this, paymentOptions, PAYMENT_REQUEST_CODE)

Пример SDK iOS:

let credentional = AcquiringSdkCredential(terminalKey: "terminalKey", password: "terminalPassword", publicKey: "testPublicKey")
let acquiringSDKConfiguration = AcquiringSdkConfiguration(credential: credentional)

if let sdk = try? AcquiringUISDK.init(configuration: acquiringSDKConfiguration) {
	sdk.presentPaymentView(on: self, paymentData: createPaymentData(), configuration: acquiringViewConfiguration()) { [weak self] (response) in
		self?.responseReviewing(response)
	}
}

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

Например, на нашем экране оплаты совершаются два запроса на сервер, а продавцу нужна дополнительная обработка заказа в приложении. Поэтому один из запросов должен выполняться до открытия экрана SDK, а второй — уже на экране. Мы можем такое реализовать.

Для этого в SDK есть отдельный модуль Core. Он не зависит от платформы разработки, и с помощью него можно вызывать методы Tinkoff Acquiring API. А модуль с UI-частью предлагает другие решения без экрана SDK — дополнительные методы, которые запускают экран оплаты с определенного этапа.

Google Pay и Apple Pay


Проблема. Google и Apple требуют, чтобы их способы оплаты находились не рядом с картами на экране оплаты SDK, а как отдельные кнопки в приложении, которые нужно делать самостоятельно. Разработчикам клиента приходится выполнять больше работы по настройке Google Pay и Apple Pay.

Решение. В обновленном SDK улучшили поддержку приема платежей через Google Pay и Apple Pay.

Мы учитываем требование Google и Apple, но при этом упрощаем задачу разработчикам. Большую часть настроек оплаты берет на себя SDK, а разработчикам клиента нужно вызвать всего несколько методов.

Эти методы выполняют:

  • настройку сервисов для платежа Google Pay и Apple Pay;
  • обработку доступности сервисов на девайсе;
  • вызов сервиса для оплаты;
  • обработку результата оплаты.

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

Система быстрых платежей


Это новая функция на рынке финтеха и новая технология, поэтому разработчикам пришлось реализовывать ее в SDK с нуля. СБП помогает принимать платежи по QR-коду и моментально зачислять деньги на счет продавца — они приходят сразу же, даже в выходные и праздники.

Как это работает:

  1. При оплате заказа покупатель нажимает «Оплатить через СБП».
  2. Покупатель попадает в банковское приложение и там подтверждает списание денег. Сумма будет указана в платежной форме.
  3. После оплаты деньги сразу приходят на расчетный счет продавца.

imageimage

Подключить новый способ оплаты клиенты могут в личном кабинете Тинькофф Оплаты. После этого в мобильном SDK у клиентов откроется возможность принимать платежи через СБП — по кнопке и QR-коду.

«Мгновенный счёт». На экране оплаты появляется кнопка с логотипом СБП.

Настройка экрана fpsEnabled включает кнопку для быстрой оплаты в Android SDK:

var paymentOptions = PaymentOptions().setOptions {
    orderOptions { /*options*/ }
    customerOptions { /*options*/ }
    featuresOptions {
        fpsEnabled = true         
    }
}

В iOS SDK нужно передать buttonPaySPB:

let viewConfigration = AcquiringViewConfigration.init()
viewConfigration.fields = []
viewConfigration.fields.append(AcquiringViewConfigration.InfoFields.buttonPaySPB)

По статическому QR-коду. Продавец должен открыть экран оплаты на своем устройстве, а покупатель — отсканировать QR-код с экрана. Это можно сделать в банковском приложении или любым QR-ридером — откроется мобильное приложение банка, покупатель введет сумму заказа и оплатит товар.

Для экрана оплаты по QR-коду в SDK есть соответствующий метод. Разработчику приложения нужно создать кнопку в разметке и вызвать метод.

На Android:

tinkoffAcquiring.openStaticQrScreen(context, screenOptions, STATIC_QR_REQUEST_CODE)

Метод на iOS:

sdk.presentPaymentSbpQrImage(on: self, paymentData: createPaymentData(), configuration: acquiringViewConfiguration()) { [weak self] (response) in
			self?.responseReviewing(response)
		}

Обновленный дизайн и темная тема


Было:
imageimage

Стало:
imageimage

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

Еще экраны SDK теперь поддерживают горизонтальную ориентацию девайса и темную тему. Чтобы поддерживать настройки клиентского приложения, в Android SDK режим темной темы можно указать в настройках экранов. Возможные значения: «Всегда включена», «Всегда выключена», «Переключение в зависимости от настроек девайса или режима экономии заряда батареи». В iOS SDK темная тема переключается в зависимости от настроек самого приложения.

Локализация экранов


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

Решение. Запустили расширенную поддержку локализации экранов для Android SDK. Теперь она не зависит от локали девайса. Можно создать свою локализацию на любой язык или поставить стандартную локализацию SDK. На обеих платформах по-прежнему поддерживается русская и английская локализация.

Как начать пользоваться


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

Методы подключения библиотек, документацию и исходный код смотрите на нашем GitHub:

> Android SDK

> iOS SDK

Если есть любые вопросы по библиотеке или нужна помощь с переходом на новую версию, напишите нам, поможем разобраться: oplata@tinkoff.ru. Или создайте Issue в соответствующем разделе на GitHub.




Комментарии (16):

  1. amarao
    /#22218144 / +3

    … одной рукой лечит, другой калечит.


    Вы уже месяц сломали пополнение в валюте через unistream, а саппорт просит показать, какая там ошибка (как будто пользователям дают смотреть в мониторы операционисток).

  2. xaero26
    /#22218660

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

    • maryapc
      /#22227260

      У нас есть некоторые расширения логики в новой версии, например можно инициировать платеж в приложении, выполнить дополнительную обработку на вашем сервере и уже после открыть экран sdk с переданным paymentId, для ввода карточных данных пользователем и подтверждения платежа. В общем случае, логика обработки платежей происходит на наших серверах и изменения в законодательстве сразу же будут учтены. Если у вас есть вопросы по конкретным кейсам, напишите нам на почту oplata@tinkoff.ru, поможем разобраться.

      • xaero26
        /#22227336

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

  3. boss_lexa
    /#22219232

    Почему тинькофф не сделает встраиваемые поля в дизайн сайта продавца?
    Через iframe можно все сделать безопасно и удобно для продавца.

      • maryapc
        /#22228290

        Передала ваш вопрос коллегам, я напишу, когда получу ответ

      • maryapc
        /#22229028

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

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

        • boss_lexa
          /#22229660

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

          При этом с точки зрения стандарта безопасности PCI DSS все остается на высоком уровне — каждое поле для данных карты грузится как отдельный прозрачный iframe с защищенного сервера банка, а поля можно стилизовать в рамках параметров API.

          Клиент при этом доволен улучшенной платежной конверсией и нет головной боли с PCI DSS в отличии от скрипта Checkout от cloudpayments (дочерняя компания tinkoff), где клиенту нужно постоянно сканировать свой сервер на уязвимости и заниматься процедурами для соответствия PCI DSS. Порог вхождения для клиента за счет упрощения сложностей с PCI DSS намного сокращается.

          Почему на западе такое есть — а в России только одну компанию нашел.

          Спросите пожалуйста у колег еще раз — когда сделаете такое?

  4. navrocky
    /#22219382

    А эту проблему когда полечите?
    github.com/TinkoffCreditSystems/AcquiringSdkAndroid/issues/14

    Мы пока используем веб версию на мобилках и ждем…

    • maryapc
      /#22226714

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

      • navrocky
        /#22228166

        Да, это был я. Спасибо, что рассматриваете эту проблему. Ждём решения

  5. edo1h
    /#22220408

    Покупатель попадает в банковское приложение и там подтверждает списание денег. Сумма будет указана в платежной форме.

    можно подробнее о там как это работает для покупателя?


    какие банки? (со сбера можно платить?)
    оплата проходит со счёта, а не с карты? (никакого КБ, со счёта кредитной карты будет с комиссией/не в грейс?)

    • maryapc
      /#22227300

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

      • edo1h
        /#22228492

        комиссии с кредитной карты не предусмотрено, так как это покупка

        это вы сейчас именно за ТКС говорите? или так во всех банках, это требование ЦБ?