Установка

Как добавить CryptumPay Widget на ваш сайт.

Установка через CDN

Самый простой способ — загрузить виджет через CDN. Инструменты сборки и пакетные менеджеры не нужны.

Базовая установка

Добавьте этот тег <script> в HTML:

html

<script
  src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
  async
  integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
  crossorigin="anonymous"
></script>

Обязательные атрибуты

Атрибут	Обязателен	Описание
`src`	✅ Да	URL CDN с номером версии
`integrity`	✅ Да	SRI-хеш для проверки безопасности
`crossorigin`	✅ Да	Должен быть `"anonymous"` для CORS
`async`	⚠️ Рекомендуется	Асинхронная загрузка виджета

ВНИМАНИЕ: БЕЗОПАСНОСТЬ

Атрибут integrity обязателен. Он предотвращает загрузку подменённого кода.

Всегда копируйте полный тег <script> с docs.cryptumpay.com — не вводите URL и хеши вручную.

Управление версиями

Где найти актуальную версию

Текущая версия виджета и хеш целостности всегда доступны в начале этой страницы в разделе Базовая установка.

Страница обновляется с каждым релизом — всегда обращайтесь к ней за актуальной версией и правильным хешем.

Манифест также доступен программно:

https://cdn.cryptumpay.com/{version}/manifest.json

Пример: https://cdn.cryptumpay.com/2.3.2/manifest.json

Обновление версии

При обновлении до новой версии:

Возьмите новый тег <script> с этой страницы
Обновите src и integrity вместе
Протестируйте на staging-окружении
Задеплойте в продакшен

ХЕШ ЦЕЛОСТНОСТИ МЕНЯЕТСЯ

Хеш целостности меняется с каждой версией. Оба атрибута нужно обновлять вместе.

Режимы загрузки

Асинхронная загрузка (рекомендуется)

Загружает виджет без блокировки рендеринга страницы:

html

<script
  src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
  async
  integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
  crossorigin="anonymous"
></script>

<script>
// Ждём загрузки виджета
document.addEventListener('CryptumPay:ready', (event) => {
  const button = new event.detail.Button('payment-button');
});
</script>

Преимущества:

✅ Быстрая первоначальная загрузка страницы
✅ Не блокирует парсинг HTML
✅ Лучшие показатели Core Web Vitals
✅ Рекомендуется для продакшена

Особенности:

⚠️ Необходимо использовать событие CryptumPay:ready
⚠️ Инициализация кнопки откладывается

Лучшая практика

Всегда ждите события CryptumPay:ready перед созданием экземпляров кнопки — это гарантирует полную загрузку виджета.

Синхронная загрузка

Загружает виджет немедленно:

html

<script
  src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
  integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
  crossorigin="anonymous"
></script>

<script>
// Виджет доступен немедленно
const button = new CryptumPay.Button('payment-button');
</script>

Преимущества:

✅ Немедленная доступность
✅ Более простой код
✅ Удобно для тестирования

Особенности:

⚠️ Блокирует рендеринг страницы
⚠️ Медленнее первоначальная загрузка
⚠️ Не рекомендуется для продакшена

Сравнение

Параметр	Async	Sync
Скорость загрузки	✅ Быстрая	⚠️ Медленнее
Простота кода	⚠️ Нужно событие	✅ Прямой доступ
Продакшен	✅ Рекомендуется	⚠️ Не рекомендуется
Влияние на SEO	✅ Лучше	⚠️ Хуже

Размещение в HTML

Альтернатива: перед `</body>`

Можно разместить перед закрывающим тегом </body>:

html

<body>
  <!-- Ваш контент -->
  <div id="payment-button"></div>

  <script>
  document.addEventListener('CryptumPay:ready', (event) => {
    const button = new event.detail.Button('payment-button');
  });
  </script>
  
  <!-- Загрузка виджета -->
  <script
    src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
    async
    integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
    crossorigin="anonymous"
  ></script>
</body>

Проверка установки

Проверьте загрузку

Откройте консоль браузера и убедитесь, что виджет загружен:

javascript

console.log(typeof CryptumPay); // Должно вывести "object"
console.log(CryptumPay.Button);  // Должно вывести функцию

Ошибка проверки целостности

Если проверка целостности не прошла, вы увидите ошибку:

Failed to find a valid digest in the 'integrity' attribute

Решение:

Возьмите правильный тег <script> из документации
Скопируйте оба атрибута: src и integrity
Убедитесь в отсутствии опечаток и изменений

Следующие шаги

Варианты использования — как CryptumPay подходит для вашего бизнеса
Загрузка виджета — подробно о режимах загрузки
Инициализация кнопки — создание первой кнопки

Установка ​