Руководства по интеграции

Эксклюзивный стоковый контент для СНГ

Пошаговые инструкции и готовые фрагменты кода для подключения библиотеки StockFlow к вашему сайту, мобильному приложению или CMS. Каждый пример протестирован на реальных проектах и обновлён в соответствии с API v3.2.

Подключение через REST API

Базовая интеграция для веб-приложений. Авторизация через Bearer-токен, пагинация результатов, фильтрация по категориям и разрешению. Включает примеры на cURL, Python (requests) и JavaScript (fetch). Открыть руководство

Встраивание галереи на сайт

Готовый виджет StockFlow Gallery Widget v2.4 — один HTML-тег и инициализация через конфигурационный объект. Поддержка тёмной темы, ленивой загрузки и кастомных шрифтов. Совместимо с WordPress, Tilda и чистым HTML/CSS. Открыть руководство

Интеграция с React-приложением

Официальный пакет @stockflow/react-sdk v1.8.0. Хуки useStockClips, useSearch и useLicense для управления состоянием. Примеры компонентов с поддержкой Next.js App Router и Server Components. Открыть руководство

Мобильная интеграция (iOS / Android)

SDK для Swift (StockFlowKit 2.1.3 через SPM) и Kotlin (com.stockflow:sdk:2.1.3 через Maven). Готовые CollectionView и RecyclerView адаптеры, офлайн-кэш, обработка водяных знаков и скачивание лицензированных файлов. Открыть руководство

Webhook для уведомлений о лицензиях

Настройка подписок на события license.issued, license.expired и download.completed. Валидация HMAC-SHA256 подписей, обработка повторных доставок и интеграция с вашими биллинговыми системами. Открыть руководство

Импорт в CMS: WordPress и Bitrix

Плагины stockflow-wp-import (версия 3.0) и stockflow-bitrix-module (версия 1.4). Автоматическая синхронизация коллекций, маппинг категорий и управление лицензированием прямо из админки. Открыть руководство

Примеры кода

Копируйте и адаптируйте. Все фрагменты используют актуальную версию API и включают обработку ошибок.

JavaScript — REST API

Запрос коллекции клипов

const response = await fetch(
  'https://api.stockflow.ru/v3/collections/curated-nature/clips',
  {
    headers: {
      'Authorization': 'Bearer sk_live_4f8a2c9d1e6b3a7f',
      'Accept': 'application/json'
    }
  }
);
const { clips, total, page } = await response.json();
// clips — массив из 24 объектов с полями id, title, duration, formats, licenseUrl

Python — requests

Поиск по ключевым словам

import requests

headers = {
    "Authorization": "Bearer sk_live_4f8a2c9d1e6b3a7f",
    "Accept": "application/json"
}

params = {
    "q": "городская архитектура осень",
    "sort": "relevance",
    "page_size": 12
}

resp = requests.get(
    "https://api.stockflow.ru/v3/search/clips",
    headers=headers, params=params
)
results = resp.json()
for clip in results["clips"]:
    print(clip["id"], clip["title"], clip["duration_ms"])

React — @stockflow/react-sdk

Компонент галереи

import { useStockClips, ClipCard } from '@stockflow/react-sdk';

function NatureGallery() {
  const { clips, loading, error } = useStockClips({
    collection: 'curated-nature',
    pageSize: 16
  });

  if (loading) return Загрузка коллекции...;
  if (error) return Ошибка: {error.message};

  return (
    <div className="gallery-grid">
      {clips.map(clip => (
        <ClipCard key={clip.id} clip={clip} />
      ))}
    </div>
  );
}

HTML — Gallery Widget

Быстрая вставка на любую страницу

<script src="https://cdn.stockflow.ru/widget/v2.4/stockflow-gallery.min.js"></script>

<div
  id="stockflow-gallery"
  data-collection="curated-nature"
  data-columns="4"
  data-theme="dark"
  data-api-key="pk_live_9b3e7f2a8c1d4e6g"
></div>

<script>
  StockFlowGallery.init('stockflow-gallery', {
    onClipSelect: (clip) => {
      console.log('Выбран клип:', clip.id);
    }
  });
</script>

Swift — StockFlowKit

Загрузка коллекции в iOS

import StockFlowKit

let client = StockFlowClient(apiKey: "sk_live_4f8a2c9d1e6b3a7f")

Task {
    do {
        let clips = try await client.clips(
            collection: "curated-nature",
            page: 1,
            pageSize: 20
        )
        for clip in clips.items {
            print(clip.id, clip.title, clip.duration)
        }
    } catch {
        print("StockFlow error: \(error)")
    }
}

cURL — Webhook-тест

Проверка подписи webhook-события

# Тестовый вызов webhook-эндпоинта
curl -X POST https://your-domain.com/webhooks/stockflow \
  -H "Content-Type: application/json" \
  -H "X-StockFlow-Signature: hmac-sha256=..." \
  -d '{
    "event": "license.issued",
    "data": {
      "clip_id": "clp_8d3f2a1b9c7e",
      "license_type": "editorial",
      "customer_email": "editor@newsagency.ru"
    }
  }'

Полная документация API