Параметры конфигурации

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

Интерфейс ButtonOptions

interface ButtonOptions {
  // Обязательно, если не задано через data-атрибуты
  projectId?: string;
  buttonText?: string;
  projectOrderTitle?: string;
  projectOrderDescription?: string;

  // Заказ, созданный на бэкенде, который нужно отобразить
  orderId?: string;

  // Конфигурация заказа
  projectUserId?: string;
  projectOrderMeta?: string;
  defaultFiatCurrency?: 'usd' | 'eur';
  defaultFiatAmount?: string;
  
  // Кастомизация UI
  uiSize?: 'mini' | 'normal';
  uiRadius?: '10' | '30';
  buttonColor?: 'white' | 'black' | 'colored' | 'transparent';
  colorScheme?: 'light' | 'dark' | 'auto';
}

Параметры

projectId

Тип: string
Обязателен: Да
Data-атрибут: data-project-id

ID вашего проекта CryptumPay. Получите его в Консоли мерчанта.

button.setOptions({
  projectId: 'ваш-project-id'
});

projectOrderTitle

Тип: string
Обязателен: Да (если не задан через заказ с бэкенда)
Data-атрибут: data-project-order-title

Заголовок платёжного заказа, отображаемый пользователю. Обязателен при создании заказов с фронтенда, опционален при восстановлении существующих заказов, созданных на бэкенде.

button.setOptions({
  projectOrderTitle: 'Премиум подписка'
});

projectOrderDescription

Тип: string
Обязателен: Да (если не задан через заказ с бэкенда)
Data-атрибут: data-project-order-description

Подробное описание платёжного заказа. Обязателен при создании заказов с фронтенда, опционален при восстановлении заказов с бэкенда.

button.setOptions({
  projectOrderDescription: 'Ежемесячный платёж за доступ ко всем премиум-функциям'
});

projectUserId

Тип: string
Обязателен: Нет
Data-атрибут: data-project-user-id

Ваш внутренний ID пользователя для привязки платежа к конкретному пользователю в вашей системе.

button.setOptions({
  projectUserId: 'user_12345'
});

projectOrderMeta

Тип: string
Обязателен: Нет
Data-атрибут: data-project-order-meta

Произвольные метаданные в формате JSON-строки для прикрепления к заказу.

button.setOptions({
  projectOrderMeta: JSON.stringify({
    plan: 'premium',
    period: 'monthly'
  })
});

defaultFiatCurrency

Тип: 'usd' | 'eur'
Обязателен: Нет
По умолчанию: usd
Data-атрибут: data-default-fiat-currency

Валюта по умолчанию для суммы платежа.

button.setOptions({
  defaultFiatCurrency: 'eur'
});

defaultFiatAmount

Тип: string
Обязателен: Нет
Data-атрибут: data-default-fiat-amount

Сумма платежа в фиатной валюте по умолчанию. Если не указана, пользователь сможет ввести произвольную сумму (удобно для донатов).

button.setOptions({
  defaultFiatAmount: '99.99'
});

orderId

Тип: string
Обязателен: Нет
Data-атрибут: data-order-id

Order ID в CryptumPay для восстановления существующей платёжной сессии.

button.setOptions({
  orderId: '11280ee0-fc4b-4616-b0bb-5751128b76fb'
});

Восстановление заказа

При указании orderId кнопка восстановит существующий заказ вместо создания нового. Удобно для возобновления брошенных оплат.

colorScheme

Тип: 'light' | 'dark' | 'auto'
Обязателен: Нет
По умолчанию: auto
Data-атрибут: data-color-scheme

Цветовая схема платёжного шлюза.

button.setOptions({
  colorScheme: 'dark'
});

buttonColor

Тип: 'white' | 'black' | 'colored' | 'transparent'
Обязателен: Нет
По умолчанию: colored
Data-атрибут: data-button-color

Цвет платёжной кнопки.

button.setOptions({
  buttonColor: 'black'
});

Доступные цвета:

• white — белый фон с тёмным текстом
• black — чёрный фон со светлым текстом
• colored — фирменный фиолетовый градиент [По умолчанию]
• transparent — прозрачный фон

uiSize

Тип: 'mini' | 'normal'
Обязателен: Нет
По умолчанию: normal
Data-атрибут: data-ui-size

Размер платёжной кнопки.

button.setOptions({
  uiSize: 'mini'
});

Размеры:

• mini — компактная кнопка для ограниченного пространства
• normal — стандартный размер кнопки [По умолчанию]

uiRadius

Тип: '10' | '30'
Обязателен: Нет
По умолчанию: 30
Data-атрибут: data-ui-radius

Скругление углов кнопки в пикселях.

button.setOptions({
  uiRadius: '10'
});

buttonText

Тип: string
Обязателен: Нет
По умолчанию: CryptumPay
Data-атрибут: data-button-text

Произвольный текст внутри платёжной кнопки.

button.setOptions({
  buttonText: 'Оплатить через CryptumPay'
});

Полный пример

button.setOptions({
  projectId: 'ваш-project-id',
  buttonText: 'Оплатить через CryptumPay',
  projectOrderTitle: 'Премиум подписка',
  projectOrderDescription: 'Ежемесячная подписка со всеми функциями',
  projectUserId: 'user_12345',
  projectOrderMeta: JSON.stringify({ plan: 'premium' }),
  defaultFiatCurrency: 'usd',
  defaultFiatAmount: '99.99',
  uiSize: 'normal',
  uiRadius: '10',
  colorScheme: 'colored'
});

Обновление параметров

Параметры можно обновлять в любой момент — кнопка обновится автоматически:

// Начальные настройки
button.setOptions({
  projectId: 'ваш-project-id',
  buttonColor: 'colored'
});

// Позднее
button.setOptions({
  buttonColor: 'black',
});

Частичное обновление

При обновлении не нужно снова указывать projectId — существующие параметры сохраняются.

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

• Класс Button — методы и свойства класса Button
• Поток событий — схема потока событий
• Кастомизация UI — руководство по визуальной настройке