Yoomoney Widget

React компонент для формы оплаты через YooMoney со встроенными шрифтами Factor IO.

Установка

npm install yoomoney-widget

Использование

Базовый вид (форма оплаты)

import React from 'react';
import { Yoomoney } from 'yoomoney-widget';

function App() {
  return (
    <Yoomoney
        receiver="0000000000000000"
        label="Пополнение счета"
        successURL="https://kaurcev.dev/success"
        defaultSum={100}
        minSum={50}
    />
  );
}

С выбором логотипа

import React from 'react';
import { Yoomoney } from 'yoomoney-widget';

function App() {
  return (
    <Yoomoney
        receiver="0000000000000000"
        logo="white"
        defaultSum={500}
        minSum={100}
    />
  );
}

Кастомизация стилей

import React from 'react';
import { Yoomoney } from 'yoomoney-widget';

function App() {
  return (
    <Yoomoney
        receiver="0000000000000000"
        formStyle={{
            backgroundColor: '#f9f9f9',
            padding: '20px',
            borderRadius: '20px'
        }}
        inputStyle={{
            background: '#ffffff',
            border: '1px solid #ddd'
        }}
        buttonStyle={{
            background: '#ff6b6b',
            fontWeight: 'normal'
        }}
    />
  );
}

Модальное окно с затемнением и блюром

import React from 'react';
import { YoomoneyModal } from 'yoomoney-widget';

function App() {
  return (
    <YoomoneyModal
      receiver="0000000000000000"
      buttonText="Оплатить заказ"
      modalTitle="Оформление платежа"
      defaultSum={1500}
      minSum={100}
      closeOnOverlayClick={true}
    />
  );
}

Боковая панель (открывается справа)

import React, { useState } from 'react';
import { YoomoneyPanel } from 'yoomoney-widget';

function App() {
  const [isPanelOpen, setIsPanelOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsPanelOpen(true)}>
        Открыть панель оплаты
      </button>
      
      <YoomoneyPanel
        receiver="0000000000000000"
        isOpen={isPanelOpen}
        onClose={() => setIsPanelOpen(false)}
        panelTitle="Оплата"
        defaultSum={1000}
        minSum={50}
        showCloseButton={true}
      />
    </div>
  );
}

Пропсы компонентов

Yoomoney (базовый компонент)

| Пропс | Тип | Обязательный | По умолчанию | Описание | |-------|-----|--------------|--------------|----------| | receiver | string | ✓ | - | Номер счета получателя | | label | string | | '' | Метка платежа | | successURL | string | | '' | URL перенаправления после оплаты | | defaultSum | number | | 50 | Сумма по умолчанию | | minSum | number | | 10 | Минимальная сумма | | className | string | | '' | CSS классы | | logo | 'black' \| 'white' | | 'black' | Цвет логотипа | | logoAlign | 'left' \| 'center' \| 'right' | | 'center' | Выравнивание логотипа | | formStyle | React.CSSProperties | | {} | Стили формы | | inputStyle | React.CSSProperties | | {} | Стили поля ввода | | buttonStyle | React.CSSProperties | | {} | Стили кнопки |

YoomoneyModal (модальное окно)

| Пропс | Тип | По умолчанию | Описание | |-------|-----|--------------|----------| | buttonText | string | 'Оплатить' | Текст кнопки открытия | | modalTitle | string | 'Пополнение счета' | Заголовок модалки | | onOpen | () => void | - | Коллбек при открытии | | onClose | () => void | - | Коллбек при закрытии | | closeOnOverlayClick | boolean | true | Закрывать по клику на оверлей | | modalStyle | React.CSSProperties | {} | Стили модалки | | overlayStyle | React.CSSProperties | {} | Стили оверлея | | buttonStyle | React.CSSProperties | {} | Стили кнопки открытия | | buttonClassName | string | '' | Класс кнопки открытия |

Наследует все пропсы Yoomoney

YoomoneyPanel (боковая панель)

| Пропс | Тип | По умолчанию | Описание | |-------|-----|--------------|----------| | isOpen | boolean | false | Открыта ли панель | | panelTitle | string | 'Оплата' | Заголовок панели | | onClose | () => void | - | Коллбек при закрытии | | closeOnOverlayClick | boolean | true | Закрывать по клику на оверлей | | panelStyle | React.CSSProperties | {} | Стили панели | | overlayStyle | React.CSSProperties | {} | Стили оверлея | | showCloseButton | boolean | true | Показывать кнопку закрытия |

Наследует все пропсы Yoomoney

Особенности

• Встроенные шрифты Factor IO (regular, medium, bold)
• Автоматическая загрузка WOFF2 шрифтов
• Программное создание скрытых полей формы
• Поддержка TypeScript
• Адаптивный дизайн
• Кастомизируемые стили

YoomoneyModal

• Кнопка для открытия модального окна
• Overlay с blur-эффектом (4px blur)
• Затемнение фона (rgba(0, 0, 0, 0.5))
• Логотип выровнен по левому краю
• Форма растягивается на всю ширину модального окна
• Закрытие по клику на overlay или кнопке закрытия
• Анимация открытия/закрытия

YoomoneyPanel

• Панель выезжает справа (ширина 400px)
• Overlay с затемнением (без блюра)
• Логотип выровнен по левому краю
• Содержимое формы выровнено по центру
• Вертикальный скролл при необходимости
• Горизонтальный скролл отключен
• Закрытие по клику на overlay, кнопке закрытия или клавише Escape
• Плавная анимация выезда
• Управление состоянием через пропс isOpen

Пример полной конфигурации

import React, { useState } from 'react';
import { Yoomoney, YoomoneyModal, YoomoneyPanel } from 'yoomoney-widget';

function App() {
  const [isPanelOpen, setIsPanelOpen] = useState(false);

  return (
    <div>
      {/* Базовая форма */}
      <Yoomoney
        receiver="0000000000000000"
        label="Заказ #12345"
        successURL="https://example.com/payment/success"
        defaultSum={1500}
        minSum={100}
        logo="white"
        className="my-custom-class"
        formStyle={{ maxWidth: '400px', margin: '0 auto' }}
        inputStyle={{ fontSize: '18px' }}
        buttonStyle={{ fontSize: '18px', padding: '15px' }}
      />

      {/* Модальное окно */}
      <YoomoneyModal
        receiver="0000000000000000"
        buttonText="Оплатить картой"
        modalTitle="Быстрая оплата"
        defaultSum={2000}
        minSum={500}
        modalStyle={{ background: '#f8f9ff', border: '1px solid #e0e0e0' }}
        buttonStyle={{ background: 'linear-gradient(135deg, #702ff4, #8b3ffd)' }}
      />

      {/* Боковая панель */}
      <button onClick={() => setIsPanelOpen(true)}>
        Оплатить через панель
      </button>
      
      <YoomoneyPanel
        receiver="0000000000000000"
        isOpen={isPanelOpen}
        onClose={() => setIsPanelOpen(false)}
        panelTitle="Оплата заказа"
        defaultSum={2500}
        minSum={100}
        logo="white"
        panelStyle={{ background: '#fafafa' }}
        formStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.8)' }}
      />
    </div>
  );
}

Требования

• React >= 16.8.0
• TypeScript (опционально)

Лицензия

MIT

Что было добавлено/изменено:

1. Раздел "Модальное окно с затемнением и блюром" - пример использования нового компонента
2. Раздел "Боковая панель (открывается справа)" - пример использования YoomoneyPanel
3. Таблица пропсов для YoomoneyModal - все настройки модального окна
4. Таблица пропсов для YoomoneyPanel - все настройки боковой панели
5. Раздел "Особенности" - детальное описание особенностей каждого компонента:
   • YoomoneyModal: blur-эффект, выравнивание лого, растягивание формы
   • YoomoneyPanel: выезд справа, выравнивание содержимого, управление скроллом
6. Пример полной конфигурации - демонстрация всех трех компонентов вместе
7. Уточнения по умолчанию:
   • Для модального окна: overlay с blur (4px), затемнение 50%
   • Для панели: белая панель, выезжает справа, ширина 400px