Коротко
Кнопка «Оплатить через Kaspi» на сайте — это либо обычная ссылка на постоянную страницу оплаты qut.kz/p/<slug> (без кода, подходит для одной цены или открытой суммы), либо кнопка, по которой ваш сервер создаёт счёт через API Qut Pay и перенаправляет покупателя на payUrl (счёт на каждый заказ со своей суммой и номером). В обоих случаях покупатель платит в приложении Kaspi, деньги приходят на ваш Kaspi Pay, а сайт узнаёт об оплате по webhook invoice.paid. Для этого нужен бизнес-аккаунт Kaspi Pay и подключённый кассир — что нужно, чтобы начать.
Какой способ выбрать
Кнопка-ссылка qut.kz/p/<slug> | Кнопка со счётом через API | |
|---|---|---|
| Нужен ли код на сервере | нет | да, один запрос |
| Сумма | фиксированная или вводит покупатель | своя у каждого заказа |
| Номер заказа в счёте | нет | да, externalOrderId |
| Куда подходит | лендинг, Instagram, визитка, одна услуга | интернет-магазин, корзина, личный кабинет |
| Как узнать об оплате | в кабинете или по webhook | webhook + GET /invoices/{id} |
Для WordPress и OpenCart кнопку добавляет готовый модуль: WooCommerce, OpenCart. Для Tilda — форм-хук.
Способ 1. Кнопка-ссылка без кода
- В кабинете откройте раздел Ссылки и создайте ссылку: адрес (например
konsultaciya), название, сумму — фиксированную или открытую. Подробно: ссылки на оплату. - Вставьте на сайт обычную ссылку, оформленную как кнопка:
<a href="https://qut.kz/p/konsultaciya" class="btn">Оплатить через Kaspi</a>При каждом открытии ссылки создаётся новый счёт, поэтому одну кнопку могут нажимать сколько угодно покупателей. Ссылку можно приостановить и включить снова, адрес при этом не меняется.
Способ 2. Кнопка со счётом на каждый заказ
Кнопка отправляет запрос на ваш сервер, сервер создаёт счёт в Qut Pay и перенаправляет покупателя на страницу оплаты. API-ключ при этом остаётся на сервере — в HTML и JavaScript страницы его быть не должно.
Запрос, который делает сервер:
curl -X POST https://api.qut.kz/api/v1/invoices \
-H "X-API-Key: qp_live_…" -H "Content-Type: application/json" \
-H "Idempotency-Key: order-A-1041" \
-d '{"amount": 12000, "externalOrderId": "A-1041", "description": "Заказ A-1041", "successUrl": "https://example.kz/thanks"}'В ответе 201 приходят id, payUrl, qrUrl, deepLink, expiresAt. Набросок на Node.js (Express):
app.post('/pay', async (req, res) => {
const r = await fetch('https://api.qut.kz/api/v1/invoices', {
method: 'POST',
headers: { 'X-API-Key': process.env.QUTPAY_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ amount: 12000, externalOrderId: req.body.orderId, description: 'Заказ ' + req.body.orderId }),
});
const invoice = await r.json();
res.redirect(invoice.payUrl);
});Кнопка на странице — обычная форма: <form method="post" action="/pay"><input type="hidden" name="orderId" value="A-1041"><button>Оплатить через Kaspi</button></form>. На PHP и Python то же делается через SDK PHP и SDK Python; все поля запроса — в статье создание счёта через API.
На телефоне: открыть приложение Kaspi
payUrl ведёт на страницу qut.kz/pay/<id>, где уже есть QR для компьютера и кнопка для телефона. Если вы рисуете свою страницу оплаты, на телефоне показывайте кнопку с адресом deepLink — она открывает приложение Kaspi сразу со счётом, а QR оставьте для экрана компьютера: сканировать QR с того же телефона, на котором он показан, нельзя. QR действует около трёх минут (точное время — в expiresAt) — почему истекает QR.
Что видит покупатель
После нажатия покупатель видит в приложении Kaspi сумму, описание счёта и номер вашего кассира (его показывает сам Kaspi), подтверждает платёж — и деньги зачисляются на ваш бизнес-счёт Kaspi Pay. Если в счёте указан successUrl, покупатель может вернуться по нему на ваш сайт. Подробно: что видит покупатель.
Как сайт узнаёт об оплате
Возврат покупателя на страницу «спасибо» оплату не подтверждает. Заказ отмечайте оплаченным по webhook invoice.paid с проверенной подписью HMAC-SHA256 или по статусу paid из GET /invoices/{id} с вашего сервера. Адрес webhook добавляется в кабинете в разделе Интеграции — настройка вебхуков, как автоматически узнать об оплате. Для кнопки-ссылки webhook тоже приходит, а оплаты видны в кабинете в разделе Счета.
Вопросы и ответы
Можно ли сделать кнопку только на JavaScript, без сервера? Для способа 2 — нет: API-ключ нельзя класть в код страницы. Без сервера используйте кнопку-ссылку qut.kz/p/<slug>.
Как проверить кнопку до реальных платежей? Создайте ключ qp_test_…: счёт создаётся так же, а оплату имитирует POST /invoices/{id}/simulate — песочница.
Что будет, если покупатель нажмёт кнопку дважды? С заголовком Idempotency-Key повторный запрос вернёт тот же счёт, нового не создастся — идемпотентность.
Нужен ли чек покупателю? Да, его выдаёт продавец; при включённой Kaspi Кассе чек уходит покупателю сам — фискальный чек.