5. Панель оплаты и истории платежей - qwsnxnjene/courier-transport GitHub Wiki

Payment.js — это React-компонент, реализующий интерфейс для ввода платёжных данных и отображения истории оплат пользователя. Компонент не взаимодействует с сервером, история хранится локально в состоянии.

Основные функции компонента

• Состояния компонента:

  • paymentData: объект с полями для платёжных данных (номер карты, срок действия, CVV).
  • error: строка для ошибок при заполнении формы.
  • success: булево значение, определяющее успешность "оплаты".
  • history: массив объектов с информацией о совершённых "платежах".

• Обработка ввода:

  • Функция handleInputChange обновляет соответствующее поле в paymentData.

• Обработка оплаты:

  • Функция handlePayment валидирует данные, добавляет новую запись в history и устанавливает success в true.
  • В случае ошибки отображает сообщение.

• История оплат:

  • Массив history отображается в виде списка с датой, суммой и маской карты.

• UI:

  • Форма для ввода платёжных данных.
  • Сообщение об успешной "оплате".
  • Список истории оплат.
  • Кнопка закрытия формы.

Пример использования

<Payment onClose={() => { /* закрытие модального окна */ }} />

Внешний вид

• Используются CSS-классы: profile-overlay, profile-panel, close-profile, payment-form, form-group, payment-button, error-message, success-message, payment-history.
• История оплат отображается под формой.

Зависимости

• React (useState)