Интеграция ApiPay с Lovable — приём платежей Kaspi Pay за 5 минут

Создай полную интеграцию с платёжной системой ApiPay (Kaspi Pay) с вебхуками и realtime обновлениями. 1. SUPABASE ТАБЛИЦА «invoices»: CREATE TABLE invoices ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, apipay_id INTEGER UNIQUE, amount DECIMAL(12,2) NOT NULL, phone_number TEXT NOT NULL, description TEXT, status TEXT DEFAULT 'pending', external_order_id TEXT, paid_at TIMESTAMPTZ, created_at TIMESTAMPTZ DEFAULT now() ); ALTER TABLE invoices ENABLE ROW LEVEL SECURITY; Включи Realtime для этой таблицы. 2. EDGE FUNCTION «create-invoice»: Endpoint: POST https://api.apipay.kz/api/v1/invoices Авторизация: заголовок X-API-Key со значением из Deno.env.get('APIPAY_API_KEY') Content-Type: application/json Тело запроса: { "amount": number, "phone_number": string, "description": string, "external_order_id": string } Ответ API (201 Created — создание асинхронное): { "id": number, "amount": "15000.00", "phone": "87001234567", "status": "processing", "description": "Заказ #1", "external_order_id": "order_abc", "created_at": "2026-01-15T10:00:00Z" } ВАЖНО: успешное создание — код 201 (не 200), а начальный статус — "processing" (не "pending"). Поле телефона в ответе называется "phone". Дальнейшие переходы статуса (processing → pending → paid, либо cancelled/expired/error) приходят асинхронно — узнавай о них через вебхук или опрос GET /invoices/{id}. Не считай "processing" ошибкой и не жди "pending" в ответе на создание. Edge Function должна: - Принимать POST {amount, phone_number, description} - Валидировать: amount 0.01–99999999.99, phone_number формат 8XXXXXXXXXX (11 цифр) - Генерировать external_order_id (UUID) - Отправлять запрос к API - Считать успехом код 201; сохранять счёт в таблицу invoices (apipay_id = id из ответа, начальный статус processing) - Возвращать результат - CORS заголовки 3. EDGE FUNCTION «apipay-webhook»: Эта функция принимает POST-запросы от ApiPay при изменении статуса счёта. Формат входящего запроса: - Заголовок X-Webhook-Signature: sha256= — HMAC-SHA256 от сырого тела запроса - Тело: { "event": "invoice.status_changed", "invoice": { "id": 42, "external_order_id": "order_abc", "status": "paid", "amount": "15000.00", "paid_at": "2026-01-15T10:30:00Z" }, "source": "my-api-key" } Верификация подписи: - Получить секрет: Deno.env.get('APIPAY_WEBHOOK_SECRET') - Заголовок X-Webhook-Signature имеет вид: sha256= - Считать подпись по СЫРОМУ телу запроса (raw body до JSON.parse), а не по разобранному объекту - Построить ожидаемое значение с тем же префиксом: expected = 'sha256=' + hex(HMAC-SHA256(raw body, secret)) - Сравнить expected с заголовком целиком (вместе с префиксом sha256=), constant-time (timingSafeEqual) - Если не совпадает — вернуть 401 Edge Function должна: - Проверить подпись HMAC-SHA256 - Обновить запись в таблице invoices: SET status = invoice.status, paid_at = invoice.paid_at WHERE apipay_id = invoice.id - Вернуть 200 OK 4. UI КОМПОНЕНТЫ: Страница «Оплата»: - Форма: Телефон (маска 8 ___ ___ __ __), Сумма (число), Описание (текст) - Кнопка «Выставить счёт» - После успеха: уведомление «Счёт отправлен! Клиент получит уведомление в Kaspi» - Таблица счетов из Supabase с колонками: ID, Сумма, Телефон, Статус, Дата - Realtime подписка на таблицу invoices — статусы обновляются автоматически - Статус-бейджи: pending (жёлтый), paid (зелёный), cancelled (серый), expired (красный) Используй Shadcn UI. Всё на русском языке. ВАЖНО: Добавь секрет APIPAY_WEBHOOK_SECRET в Lovable Cloud → Secrets (значение из ApiPay.kz → Настройки → Подключение).