Веб-клиент для платёжной системы

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

Клиент

К нам обратился крупный финансовый стартап, который создаёт в России новую международную платёжную систему.

Задача

Создать веб-клиент для связи пользователей с процессингом платёжной системы.

Вызовы

Разработать платёжный веб-клиент с нуля

В связи с тем, что зарубежные сервисы работают нестабильно, а часть из них вовсе ушла из России, компания приняла решение создать собственный платёжный инструмент для осуществления трансграничных переводов с выплатой в наличных. Вся разработка веб-клиента и консоли администрирования — backend и frontend — закреплена за нашей командой. Со стороны клиента — процессинг, служба каталогов и система двухфакторной аутентификации. Веб-клиент предназначен для использования клиентами и сотрудниками платёжной системы. Нам нужно было обеспечить безопасность проведения операций и скорость отправки переводов.

Уложиться в сжатые сроки

На реализацию нам дали четыре месяца. За первые два месяца мы должны были создать MVP веб-клиента, который включает в себя основную функциональность рабочей среды для оператора и консоли администрирования. В следующую итерацию мы должны были доработать систему и наполнить её функциональностью для разных видов переводов и сервисных возможностей.

Подготовить продукт для внесения в реестр отечественного ПО

Помимо разработки веб-сервиса было необходимо внести ПО в реестр отечественного программного обеспечения. Команда наших аналитиков подготовила техническое задание по стандартам ГОСТ. Это обязательное требование для всех программных продуктов, которые в дальнейшем попадают в реестр зарегистрированного программного обеспечения Российской Федерации.

Что получилось

Сервис для отправки денег за рубеж через отделения банков-партнёров, которые подключены к системе.

В проекте заложены возможности масштабирования и роста: можно увеличить и число функций, и число стран-участников. У компании появилось готовое решение (веб-сервис) для взаимодействия партнёров с системой денежных переводов. Простая и понятная функциональность позволяет отправлять, выплачивать денежные переводы и администрировать веб-клиент для конечных пользователей. Проект предполагает дальнейшее масштабирование — расширение функциональности, увеличение количества направлений отправки и кастомизацию интерфейсов.

Как мы это сделали

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

Мы запустили параллельно сразу несколько процессов по методологии Agile. Наладили процесс выявления бизнес-требований, подготовки технического задания и макетов. За архитектуру сервиса и консоль администрирования отвечали команды backend и frontend.

Разработали удобное флоу авторизации

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

Оператор получает от клиента все данные о переводе, формирует платёж в системе и рассчитывает комиссию. После оплаты и отправки перевода распечатывается квитанция, которая содержит ключевую информацию для получения.

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

Далее оператор может выбрать отделение, к которому он относится. После того как он выберет из списка своё отделение, произойдёт привязка его логина и отделения.

Спроектировали главную страницу

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

Каждому оператору доступен определённый набор функций, в зависимости от настроек в админ-консоли. В ней администрируются права операторов по отделениям и странам. В боковой панели отображён полный список доступных операций. В основных блоках указан код оператора и отделения, партнёр, адрес, контактные телефоны службы поддержки.

Обеспечили безопасную выплату перевода

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

В анкете прописаны поля для заполнения и предусмотрены маски — опции для избежания ошибок. Отображается номер перевода, курс обмена и прочая необходимая информация.

Дневник операций

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

Эта информация нужна для контроля операций и в случае, если отправитель обратится к оператору для уточнения подробностей.

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

Отмена выплаты перевода

Функция отмены перевода нужна для того, чтобы можно было исправить ошибку оператора. Например, перевод в системе выполнен, однако денежные средства клиенту по какой-то причине выдать невозможно (не хватает наличных в кассе, клиента не устраивают купюры и пр.). В этом случае веб-клиент позволяет оператору отменить выплату перевода, чтобы клиент смог получить его в другом отделении. Функциональность предусматривает отмену выплаты, а также отмену отправки ошибочного перевода.

Наладили взаимодействие с backend и протестировали

Мы разрабатывали не только frontend, но и backend сервисы — это пошло на пользу проекту. Обычно backend на стороне другой команды усложняет коммуникацию. Команда не всегда понимает, что происходит в «голове» сервиса. Из-за этого может тормозить клиентская часть — frontend.

В данном проекте мы полностью отвечали за всю разработку с нуля, решили первым делать backend, а затем дополнить его frontend-частью. Временами уходило чуть больше времени на то, чтобы синхронизировать команды для интеграции. Но учитывая, что команда работала в максимально сжатые сроки, справилась она отлично. Все правки и замечания клиента отрабатывались оперативно за счёт слаженной работы и прямого управления внутри компании.

Тестирование backend заняло больше времени, чем клиентской части. В сервисной части сконцентрирован большой объём работ, к тому же мы старались успеть к интеграции с frontend. У последнего запас времени был побольше и ошибки — минимальные.

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

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

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

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

Результат

За 4 месяца реализовали веб-клиент для выплаты денежных переводов в зафиксированных направлениях .
У сервиса широкие возможности для развития и доработки за счёт продуманной архитектуры.
Реализованная версия не требует рефакторинга, что зачастую сопровождает MVP на «скорую руку».

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