Документация

Виджет оплаты

Встройте оплату через Kaspi Pay на ваш сайт за 1 минуту

Быстрый старт

Добавьте 2 строки на сайт — скрипт и кнопку:

html
Скачать
<script src="https://pay.aibot.kz/widget.js"></script>
<button onclick="PayBot.checkout({apiKey:'kp_live_your_key', amount:5000})">
  Оплатить 5 000 ₸
</button>
Виджет создаёт popup с QR-кодом Kaspi. Клиент сканирует — вы получаете webhook.

Полный пример

html
Скачать
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Оплата — Мой магазин</title>
  <script src="https://pay.aibot.kz/widget.js"></script>
  <style>
    .pay-btn {
      background: #2d6a4f;
      color: white;
      border: none;
      padding: 12px 32px;
      border-radius: 12px;
      font-size: 16px;
      cursor: pointer;
    }
    .pay-btn:hover { background: #1b4332; }
  </style>
</head>
<body>
  <h1>Заказ #123</h1>
  <p>Итого: 5 000 ₸</p>
  <button class="pay-btn" onclick="payNow()">Оплатить через Kaspi</button>

  <script>
  function payNow() {
    PayBot.checkout({
      apiKey: "kp_live_your_key",
      amount: 5000,
      description: "Заказ #123",
      onSuccess: function(data) {
        alert("Оплачено! ID: " + data.operation_id);
        window.location.href = "/success";
      },
      onCancel: function() {
        console.log("Окно закрыто");
      },
      theme: {
        primaryColor: "#2d6a4f"
      }
    });
  }
  </script>
</body>
</html>

Hosted Checkout (серверная интеграция)

Для бэкенд-интеграции — создайте checkout сессию и перенаправьте клиента:

1. Создать сессию

bash
Скачать
curl -X POST https://payapi.aibot.kz/v1/checkout/session \
  -H "X-API-Key: kp_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 5000,
    "description": "Заказ #123",
    "success_url": "https://yoursite.com/success",
    "cancel_url": "https://yoursite.com/cancel"
  }'

2. Ответ

json
Скачать
{
  "session_id": "cs_abc123",
  "checkout_url": "https://pay.aibot.kz/checkout/cs_abc123",
  "expires_at": "2026-04-02T15:30:00Z"
}

3. Перенаправить клиента

javascript
Скачать
// Серверный redirect
window.location.href = data.checkout_url;

После оплаты клиент автоматически перенаправляется на success_url.

Параметры PayBot.checkout()

ПараметрТипОбязательныйОписание
apiKeystringДаВаш API ключ (kp_live_ или kp_test_)
amountnumberДаСумма в тенге (целое число)
descriptionstringНетОписание платежа (видит клиент)
onSuccessfunctionНетCallback при успешной оплате
onCancelfunctionНетCallback при закрытии окна
themeobjectНетКастомизация: {primaryColor: "#hex"}

Интеграция с React

javascript
Скачать
import { useEffect } from "react";

function PayButton({ amount, description, onSuccess }) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://pay.aibot.kz/widget.js";
    document.head.appendChild(script);
    return () => document.head.removeChild(script);
  }, []);

  const handlePay = () => {
    window.PayBot.checkout({
      apiKey: process.env.NEXT_PUBLIC_PAYBOT_KEY,
      amount,
      description,
      onSuccess,
    });
  };

  return <button onClick={handlePay}>Оплатить {amount} ₸</button>;
}

Интеграция с Vue

javascript
Скачать
<template>
  <button @click="pay">Оплатить {{ amount }} ₸</button>
</template>

<script setup>
import { onMounted } from 'vue'

const props = defineProps(['amount', 'description'])
const emit = defineEmits(['success'])

onMounted(() => {
  const s = document.createElement('script')
  s.src = 'https://pay.aibot.kz/widget.js'
  document.head.appendChild(s)
})

function pay() {
  window.PayBot.checkout({
    apiKey: import.meta.env.VITE_PAYBOT_KEY,
    amount: props.amount,
    description: props.description,
    onSuccess: (data) => emit('success', data),
  })
}
</script>

Sandbox режим

Используйте kp_test_ ключ для тестирования. Sandbox автоматически симулирует оплату через 5 секунд.

javascript
Скачать
PayBot.checkout({
  apiKey: "kp_test_your_key",  // sandbox ключ
  amount: 1000,
  onSuccess: (data) => console.log("Test payment:", data),
});