4 мин.

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

Сегодня расскажу как я добавлял кнопку для сбора пожертвований (донатов) к блогу.

Процесс состоял из двух этапов:

Выбора сервиса для сбора пожертвований;
Реализации самой кнопки;

Выбор сервиса для сбора пожертвований

Существует множество сервисов, которые позволяют собрать пожертвования (донаты) с пользователей:

Быстрый поиск в интернете выдал следующие результаты:

BuyMeACoffee - на первый взгляд - то что нужно, но находится за рубежом и не обслуживает клиентов из РФ;
Ko-fi - аналогично BuyMeACoffee, но ещё говорят и кидает на деньги если ты из РФ;
Coindrop - интересный open-source сервис, но как мне показалось больше подходит для крипты;
ЮKassa - всё хорошо, я им даже пользовался в "У нас праздник", но не работает с физ. лицами;
ЮMoney - та же ЮKassa, но вид сбоку;
CloudTips - сервис для чаевых и донатов от Т-банка, предназначен именно для физиков и безвозмездных пожертвований.

В итоге я решил остановиться на последнем варианте и создал себе страницу на CloudTips.

Реализация кнопки

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

Я решил немного заморочиться и оформить её в виде кнопки.

Компонент DonateButton

import classNames from "classnames";
import React from "react";
import { FaHeart } from "react-icons/fa";

import styles from "./DonateButton.module.css";

const DONATION_LINK = "https://pay.cloudtips.ru/p/7d0e9b9f";

const DonateButton: React.FC = () => {
  return (
    <a
      href={DONATION_LINK}
      rel="noreferrer"
      target="_blank"
      className={classNames(
        "bg-red-600 rounded-md p-2 text-white flex flex-row gap-2 justify-center items-center text-xl",
        styles.wrap
      )}
    >
      <FaHeart size={20} className={styles.heart} />
      <span>Отправить донат</span>
    </a>
  );
};

export default DonateButton;

Стили для компонента

.wrap {
  animation: glow 800ms ease-out infinite alternate;
  border-color: rgb(153, 51, 51);
  box-shadow:
    0 0 5px rgba(255, 0, 0, 0.2),
    inset 0 0 5px rgba(255, 0, 0, 0.1);
  color: rgb(255, 238, 238);
  outline: none;
}

@keyframes glow {
  0% {
    border-color: rgb(153, 51, 51);
    box-shadow:
      0 0 5px rgba(255, 0, 0, 0.2),
      inset 0 0 5px rgba(255, 0, 0, 0.1);
  }
  100% {
    border-color: rgb(255, 102, 102);
    box-shadow:
      0 0 20px rgba(255, 0, 0, 0.6),
      inset 0 0 10px rgba(255, 0, 0, 0.4);
  }
}

.heart {
  animation: heartbeat 0.9s linear infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}

На этом всё! 🎉

Увидеть результат можно под этим и другими постами 🙂

Подписывайтесь на мой Youtube канал, Telegram и на сообщество Вконтакте 🙂

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

Выбор сервиса для сбора пожертвований

Реализация кнопки

Компонент DonateButton

Стили для компонента

Поделиться

Поддержать автора

Вам может быть интересно:

Подключение счётчика Яндекс Метрики к Next.js приложению

Добавляем индикатор времени чтения к статьям блога