Класс Button

Класс Button — основной интерфейс для интеграции CryptumPay Widget в ваш сайт.

Конструктор

new Button(containerId: string)

Создаёт новый экземпляр платёжной кнопки и монтирует его в указанный контейнер.

Параметры:

• containerId (string) — ID DOM-элемента, в котором будет отрисована кнопка

Пример:

const button = new CryptumPay.Button('payment-button');

Методы жизненного цикла

setOptions(options: ButtonOptions): void

Настраивает платёжную кнопку с заданными параметрами.

Параметры:

• options (ButtonOptions) — объект конфигурации

Пример:

button.setOptions({
  projectId: 'ваш-project-id',
  buttonText: 'Оплатить через CryptumPay',
  buttonColor: 'colored',
  colorScheme: 'light'
});

onCreateOrder(callback: () => Promise<string>): void

Вызывается при нажатии на кнопку оплаты до создания заказа. Используйте для получения динамического Order ID с вашего бэкенда.

Возвращает:

• Promise<string> — должен резолвиться в CryptumPay Order ID

Пример:

button.onCreateOrder(async () => {
  // Создаём заказ на бэкенде
  const response = await fetch('/api/create-order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({})
  });
  
  const data = await response.json();
  return data.id; // Должен вернуть CryptumPay Order ID
});

Создание заказов на сервере

Для серверного создания заказов используйте официальный Node.js SDK:

Установка:

npm install @cryptumpay/node-sdk

Полные примеры — в руководстве Интеграция с бэкендом.

onCreateCustomerOrder(callback: (customerOrderId: string, merchantOrderId: string, projectData: object) => void): void

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

Параметры:

• customerOrderId — внутренний идентификатор ордера CryptumPay, созданного когда пользователь выбрал криптовалюту и сеть
• merchantOrderId — внутренный идентификатор ордера CryptumPay, созданного мерчантом на фиксированную сумму в фиате
• projectData — данные, переданные из вашего приложения (projectOrderMeta, projectUserId и т.д.)

Пример:

button.onCreateCustomerOrder((customerOrderId, merchantOrderId, projectData) => {
  console.log('Кастомерский ордер создан:', customerOrderId, merchantOrderId);
  console.log('Данные проекта:', projectData);
});

onFinishOrder(callback: (orderId: string, projectData: any) => void): void

Вызывается при успешном завершении оплаты.

Параметры:

• orderId — уникальный идентификатор заказа в CryptumPay
• projectData — данные, переданные из вашего приложения (projectOrderMeta, projectUserId и т.д.)

Пример:

button.onFinishOrder((orderId, projectData) => {
  console.log('Оплата завершена:', orderId);
  console.log('Данные проекта:', projectData);
});

Перезапись колбэка

Повторный вызов onFinishOrder(), onCreateCustomerOrder() или onCreateOrder() перезапишет предыдущий колбэк, а не добавит новый.

Безопасность

Всегда подтверждайте завершение оплаты на бэкенде через вебхуки или CryptumPay API. Никогда не доверяйте только клиентским событиям при подтверждении заказа.

unmount(): void

Удаляет кнопку и модальное окно из DOM и очищает все обработчики событий. Используйте при удалении кнопки (например, при навигации в SPA).

Пример:

// Очищаем при переходе на другую страницу
button.unmount();

Статические методы

Button.find(elementId?: string): Button

Находит существующий экземпляр кнопки. Полезно при работе с авто-инициализированными кнопками.

Параметры:

• elementId (string, опционально) — ID элемента кнопки

Пример:

// Найти авто-инициализированную кнопку
const button = CryptumPay.Button.find('payment-button');
button.unmount();

Смотрите также

• Параметры конфигурации — полный список параметров кнопки
• Поток событий — схема потока событий
• Интеграция с бэкендом — создание заказов на сервере