Инициализация кнопки

Способы инициализации платёжных кнопок CryptumPay.

Авто-инициализация

Для простых случаев можно использовать авто-инициализацию без JavaScript:

<div
  class="cryptumpay-auto-button-v1"
  id="payment-button"
  data-button-text="Оплатить через CryptumPay"
  data-project-id="ваш-project-id"
  data-project-order-title="Премиум подписка"
  data-project-order-description="Доступ ко всем премиум-функциям на 3 месяца"
  data-default-fiat-currency="usd"
  data-default-fiat-amount="99.99"
  data-ui-size="normal"
  data-ui-radius="10"
  data-color-scheme="light"
  data-button-color="colored"
></div>

Полный список data-атрибутов: Параметры конфигурации

Без JavaScript

Виджет автоматически инициализирует любой элемент с классом cryptumpay-auto-button-v1. Авто-инициализация идеальна для статических сайтов или когда хочется избежать написания JavaScript.

Базовая инициализация

Наиболее распространённый способ создать кнопку:

document.addEventListener('CryptumPay:ready', () => {
  const button = new CryptumPay.Button('payment-button');
  
  button.setOptions({
    projectId: 'ваш-project-id',
    buttonText: 'Оплатить через CryptumPay',
    projectOrderTitle: 'Премиум подписка',
    projectOrderDescription: 'Ежемесячный платёж за подписку',
    defaultFiatAmount: '99.99'
  });
});

Полный список параметров конфигурации: Параметры конфигурации

Доступ к авто-инициализированным кнопкам

Используйте Button.find(), чтобы получить ссылку на авто-инициализированную кнопку:

document.addEventListener('CryptumPay:ready', () => {
  // Поиск по ID элемента
  const button = CryptumPay.Button.find('payment-button');
  
  // Добавление колбэков
  button.onFinishOrder((orderId, projectData) => {
    console.log('Оплата завершена:', orderId);
  });

  // Или изменение опций
  button.setOptions({
    projectOrderMeta: 'user123'
  });
});

Требования к контейнеру

Контейнер кнопки должен существовать в DOM до инициализации:

// ❌ ПЛОХО: контейнер ещё не существует
const button = new CryptumPay.Button('payment-button');
document.body.innerHTML = '<div id="payment-button"></div>';

// ✅ ХОРОШО: контейнер создан заранее
document.body.innerHTML = '<div id="payment-button"></div>';
const button = new CryptumPay.Button('payment-button');

Минимальные стили контейнера

Контейнер должен иметь минимальную высоту, чтобы избежать layout shift:

<div id="payment-button" style="min-height: 50px;"></div>

Или через CSS:

#payment-button {
  min-height: 50px;
}

Обработка ошибок

Контейнер не найден

try {
  const button = new CryptumPay.Button('nonexistent');
} catch (error) {
  console.error('Контейнер не найден:', error);
}

Виджет ещё не загружен

// ❌ ПЛОХО: использование до загрузки виджета
const button = new CryptumPay.Button('payment-button');

// ✅ ХОРОШО: ожидание события ready
document.addEventListener('CryptumPay:ready', () => {
  const button = new CryptumPay.Button('payment-button');
});

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

• Колбэки — обработка событий оплаты