Скрипт виджета Копилка на чистом JavaScript для приема оплаты в BTC

Автор: Роман Чернышов    Опубликовано: 2 марта 2025

Привет всем! В рамках портфолио, хочу поделиться с вами результатом очередного проекта: «Скрипт виджета «Копилка» на чистом JavaScript для приема платежей в BTC». Ко мне обратился клиент, администратор платформы крипто-платежных шлюзов. Его компания предлагает бесплатные плагины для популярных CMS, виджеты для пожертвований, платежные кнопки и формы, выставление счетов, массовые выплаты и RestAPI для white label платежей. Он нашел меня на фриланс-бирже Kwork и предложил сотрудничество. Работа с клиентом велась через платформу Kwork, и все финансовые операции проходили через систему «безопасной сделки». При необходимости мы могли обратиться к арбитражу, но в итоге все прошло гладко, как обычно.

Поставленные задачи

В рамках данного проекта, были поставлены и реализованы следующие задачи:

Реализовать виджет донатов на чистом JS, с минимальными сторонними библиотеками.

При клике на кнопку Pay (оплатить), открывается окно с реквизитами н оплату BTC:

Общие требования

Тип: Виджет для встраивания на сайт с помощью готового скрипта.

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

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

Примеры и фреймы: Все необходимые примеры и фреймы для реализации уже подготовлены.

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

Дизайн

Пресеты. Должна быть возможность выбора из заранее созданных пресетов дизайна.

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

Цвета.  Основной цвет. Изменяет все элементы, которые в текущей версии оформлены в синий цвет.
Дополнительный цвет: Применяется к тексту, за исключением заголовков и подзаголовков.

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

Функционал оплаты. При нажатии на кнопку «Pay» блок переворачивается, показывая QR-код и ссылку для оплаты.

Слева. Значок ссылки, открывающий в новом окне страницу с оплатой.

Справа. Кнопка для копирования адреса.

Плашка. Всегда белая, независимо от выбранных настроек дизайна.

Дополнительные требования

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

Примечание

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

Сфера проведения работ

• Фронтэнд (работа со скриптами JavaScript, HTML, CSS, обеспечивающих работу фронтенда, личного кабинета пользователей, раздела сайта, виджетов);

Стек технологий

Языки программирования и фреймворки:

• JavaScript;
• HTML 5;
• CSS 3;

Внешние сервисы

• Изучение документации, подключение и настройка внешнего сервиса по API (Application Programming Interface);

Возникшие сложности

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

CSS, HTML, JavaScript / jQuery     btc, виджет, копилка