# Как сделать кнопку «Оплатить через Kaspi» на сайте — три способа

> Кнопка оплаты Kaspi без кода — ссылка qut.kz/p/<slug> в обычном теге <a>; кнопка со счётом на каждый заказ — запрос с вашего сервера и редирект на payUrl; на телефоне — deepLink в приложение Kaspi. Готовые фрагменты HTML, curl и JavaScript, что видит покупатель и как сайт узнаёт об оплате.

## Коротко

Кнопка «Оплатить через Kaspi» на сайте — это либо обычная ссылка на постоянную страницу оплаты `qut.kz/p/<slug>` (без кода, подходит для одной цены или открытой суммы), либо кнопка, по которой ваш сервер создаёт счёт через API Qut Pay и перенаправляет покупателя на `payUrl` (счёт на каждый заказ со своей суммой и номером). В обоих случаях покупатель платит в приложении Kaspi, деньги приходят на ваш Kaspi Pay, а сайт узнаёт об оплате по webhook `invoice.paid`. Для этого нужен бизнес-аккаунт Kaspi Pay и подключённый кассир — [что нужно, чтобы начать](/kb/ru/what-you-need).

## Какой способ выбрать

| | Кнопка-ссылка `qut.kz/p/<slug>` | Кнопка со счётом через API |
|---|---|---|
| Нужен ли код на сервере | нет | да, один запрос |
| Сумма | фиксированная или вводит покупатель | своя у каждого заказа |
| Номер заказа в счёте | нет | да, `externalOrderId` |
| Куда подходит | лендинг, Instagram, визитка, одна услуга | интернет-магазин, корзина, личный кабинет |
| Как узнать об оплате | в кабинете или по webhook | webhook + `GET /invoices/{id}` |

Для WordPress и OpenCart кнопку добавляет готовый модуль: [WooCommerce](/kb/ru/woocommerce), [OpenCart](/kb/ru/opencart). Для Tilda — [форм-хук](/kb/ru/tilda-forms).

## Способ 1. Кнопка-ссылка без кода

1. В кабинете откройте раздел **Ссылки** и создайте ссылку: адрес (например `konsultaciya`), название, сумму — фиксированную или открытую. Подробно: [ссылки на оплату](/kb/ru/payment-links).
2. Вставьте на сайт обычную ссылку, оформленную как кнопка:

```html
<a href="https://qut.kz/p/konsultaciya" class="btn">Оплатить через Kaspi</a>
```

При каждом открытии ссылки создаётся новый счёт, поэтому одну кнопку могут нажимать сколько угодно покупателей. Ссылку можно приостановить и включить снова, адрес при этом не меняется.

## Способ 2. Кнопка со счётом на каждый заказ

Кнопка отправляет запрос на **ваш** сервер, сервер создаёт счёт в Qut Pay и перенаправляет покупателя на страницу оплаты. API-ключ при этом остаётся на сервере — в HTML и JavaScript страницы его быть не должно.

Запрос, который делает сервер:

```bash
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):

```js
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](/kb/ru/sdk-php) и [SDK Python](/kb/ru/sdk-python); все поля запроса — в статье [создание счёта через API](/kb/ru/create-invoice-api).

## На телефоне: открыть приложение Kaspi

`payUrl` ведёт на страницу `qut.kz/pay/<id>`, где уже есть QR для компьютера и кнопка для телефона. Если вы рисуете свою страницу оплаты, на телефоне показывайте кнопку с адресом `deepLink` — она открывает приложение Kaspi сразу со счётом, а QR оставьте для экрана компьютера: сканировать QR с того же телефона, на котором он показан, нельзя. QR действует около трёх минут (точное время — в `expiresAt`) — [почему истекает QR](/kb/ru/qr-expired).

## Что видит покупатель

После нажатия покупатель видит в приложении Kaspi сумму, описание счёта и номер вашего кассира (его показывает сам Kaspi), подтверждает платёж — и деньги зачисляются на ваш бизнес-счёт Kaspi Pay. Если в счёте указан `successUrl`, покупатель может вернуться по нему на ваш сайт. Подробно: [что видит покупатель](/kb/ru/what-customer-sees).

## Как сайт узнаёт об оплате

Возврат покупателя на страницу «спасибо» оплату не подтверждает. Заказ отмечайте оплаченным по webhook `invoice.paid` с проверенной подписью HMAC-SHA256 или по статусу `paid` из `GET /invoices/{id}` с вашего сервера. Адрес webhook добавляется в кабинете в разделе **Интеграции** — [настройка вебхуков](/kb/ru/webhook-setup), [как автоматически узнать об оплате](/kb/ru/auto-check-payment). Для кнопки-ссылки webhook тоже приходит, а оплаты видны в кабинете в разделе **Счета**.

## Вопросы и ответы

**Можно ли сделать кнопку только на JavaScript, без сервера?** Для способа 2 — нет: API-ключ нельзя класть в код страницы. Без сервера используйте кнопку-ссылку `qut.kz/p/<slug>`.

**Как проверить кнопку до реальных платежей?** Создайте ключ `qp_test_…`: счёт создаётся так же, а оплату имитирует `POST /invoices/{id}/simulate` — [песочница](/kb/ru/sandbox-simulate).

**Что будет, если покупатель нажмёт кнопку дважды?** С заголовком `Idempotency-Key` повторный запрос вернёт тот же счёт, нового не создастся — [идемпотентность](/kb/ru/idempotency).

**Нужен ли чек покупателю?** Да, его выдаёт продавец; при включённой Kaspi Кассе чек уходит покупателю сам — [фискальный чек](/kb/ru/fiscal-receipt).