Деменция.net

Клиент
Услуги
Настройка формы приема платежей и интеграция с Миксплат
Год
2023

Клиент

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

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

Перейти на сайт

Задача

В рамках поддержки нашей команде часто приходится работать со сторонними сервисами, например:

  • платежными системами;
  • службами доставки;
  • сервисами почтовой рассылки.

Такой запрос появился и у клиента — благотворительного фонда «Память Поколений».

У нас на поддержке находится несколько сайтов фонда, относящихся к разным проектам. Задача заключалась в том, чтобы создать механику уже готовой страницы гайда на сайте Деменция.net, разработанном на базе конструктора Tilda (Тильда). 

Основная сложность состояла в том, что требовалась интеграция с двумя сторонними сервисами – платежным сервисом Миксплат и платформой автоматизации Mindbox.

Техническое задание

Для размещения гайда «Конструктор памяти» была подготовлена и сверстана специальная страница в фирменном дизайне ресурса.

Специалистам Webit поручили подключение pop-up для оплаты и получения PDF-файла гайда, настройка приема пожертвований через систему Миксплат, а также сбор e-mail адресов пользователей, запросивших гайд, в личный аккаунт клиента на платформе Mindbox. Сам файл гайда, а также текст письма клиенту, сделавшему пожертвование, у клиента были готовы.

Этапы работы над задачей

Всю задачу поделили на пять этапов:
  • 01
    Верстка и настройка всплывающего окна pop-up
  • 02
    Настройка приема платежей через платежный сервис Миксплат
  • 03
    Настройка отправки писем с гайдом пользователям 
по e-mail
  • 04
    Тестирование и отладка
  • 05
    Подключение на основную страницу сайта Деменция.net

В первую очередь сверстали pop-up на заранее подготовленной для этого тестовой странице сайта, недоступной для пользователей.

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

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

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

Страница с выбором способа внесения пожертвования
Здесь можно выбрать способ оплаты – банковская карта, СБП, мобильный платеж и другие варианты.

Интеграция с платежной системой Миксплат

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

Стандартный виджет Миксплат не подошел под существующий дизайн, поэтому окно pop-up решили верстать с нуля. К работе не привлекали дизайнера, поскольку вся страница уже была готова, нужно было сделать только всплывающее окно. Все работы проводились на тестовой странице сайта Деменция.net, чтобы можно было несколько раз протестировать работу функционала перед запуском и внести правки от клиента.

Фрагмент страницы документации для переадресации на платежную форму Миксплат

После подключения формы протестировали корректность ее работы — выполнили несколько пробных платежей. Клиент попросил добавить в форму Description с назначением платежа — «Пожертвование на развитие проекта Деменция.net». Это также было выполнено уже после того, как закончили настройку.

Особенности интеграции с Mindbox

Кроме подключения к Миксплат мы также настроили сбор и передачу почтовых адресов пользователей в сервис Mindbox.

Уже после настройки автоматической рассылки письма с гайдом возникли сложности. У владельцев почты на Gmail письма попадали в папку «Спам», а у пользователей Mail.ru возникали ошибки с кодировкой. Специалисты протестировали работу на всех почтовых сервисах, нашли и устранили неисправность.

Также были настроены адаптивные версии формы для корректного отображения на мобильных устройствах.

Адаптивная версия формы приема платежей

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

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

Результаты

Теперь посетители сайта проекта Деменция.net благодаря гайду «Конструктор памяти» смогут попробовать различные упражнения для сохранения своих когнитивных функций и поддержать работу фонда «Память Поколений» своими пожертвованиями.

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

С момента внедрения формы гайд «‎Конструктор памяти»‎ приобрели 369 человек, которые поддержали проект Деменция.net на сумму в размере 78 тысяч рублей.

Получить консультацию по моей задаче

Команда, работающая над проектом

  • Павел Стариков
    Fullstack Разработчик
  • Иванова Элеонора
    Менеджер проекта

Используемые технологии

  • PHP
  • Javascript
  • REST API