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

Виджет на сайт

Виджет PayBot — кнопка «Оплатить через Kaspi» одной строкой HTML. Установка на любой сайт, Tilda, WordPress, цвета и события onSuccess.

Виджет рисует кнопку или встроенный iframe PayBot Checkout. Работает в любой CMS — Tilda, WordPress, Webflow, React, Vue. Не требует серверного кода на стороне фронта.

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

Создайте платёжную ссылку на бэкенде, передайте token во фронт, добавьте скрипт:

html
Скачать
<script src="https://paybot.kz/widget.js"
        data-link="pl_abc123def456"
        data-mode="button"
        data-label="Оплатить через Kaspi"
        data-color="#2d6a4f"></script>

В точке вставки появится кнопка. По клику открывается модальное окно с QR-кодом, deep-link для мобильных и live-обновлением статуса.

Атрибуты data-

АтрибутЗначениеПо умолчанию
data-linkpl_… токен платёжной ссылкиобязательно
data-modebutton или inlinebutton
data-labelТекст на кнопкеОплатить через Kaspi
data-colorЦвет кнопки (hex)#2d6a4f
data-langru или kkru

Inline-режим

Иногда удобнее показать QR сразу, без модалки:

html
Скачать
<div id="paybot-checkout"></div>
<script src="https://paybot.kz/widget.js"
        data-link="pl_abc123def456"
        data-mode="inline"
        data-target="#paybot-checkout"></script>

Виджет заполнит #paybot-checkout фреймом с checkout-страницей. Удобно для одно-страничных оплат.

JavaScript API

После загрузки виджета доступен window.PayBot. Используйте для динамики — открыть модалку по клику любой кнопки, реагировать на события, программно закрыть.

html
Скачать
<script src="https://paybot.kz/widget.js"></script>

<button onclick="PayBot.open('pl_abc123def456')">Оплатить</button>

<script>
PayBot.on("paid",     (e) => console.log("Оплачено!", e.token));
PayBot.on("expired",  (e) => alert("Срок истёк"));
PayBot.on("cancelled", () => console.log("Клиент отменил"));
PayBot.on("error",    (e) => console.error("Ошибка:", e.message));
PayBot.on("loaded",   () => console.log("Виджет готов"));
</script>

Методы

МетодОписание
PayBot.open(token)Открыть модалку с указанным токеном
PayBot.close()Закрыть модалку
PayBot.on(event, cb)Подписаться на событие
PayBot.off(event, cb)Отписаться

События

СобытиеКогда срабатывает
loadedВиджет загрузился и готов к работе
paidПлатёж подтверждён Kaspi
expiredИстёк срок ссылки
cancelledКлиент закрыл окно до оплаты
errorСетевая или валидационная ошибка

Интеграция в фреймворки

React

jsx
import { useEffect, useRef } from "react";

export function PayButton({ token, onPaid }) {
  const loaded = useRef(false);

  useEffect(() => {
    if (loaded.current) return;
    const s = document.createElement("script");
    s.src = "https://paybot.kz/widget.js";
    s.async = true;
    s.onload = () => {
      loaded.current = true;
      window.PayBot.on("paid", onPaid);
    };
    document.body.appendChild(s);
  }, [onPaid]);

  return (
    <button onClick={() => window.PayBot?.open(token)}>
      Оплатить через Kaspi
    </button>
  );
}

Vue 3

vue
<script setup>
import { onMounted } from "vue";

const props = defineProps({ token: String });
const emit = defineEmits(["paid"]);

onMounted(() => {
  const s = document.createElement("script");
  s.src = "https://paybot.kz/widget.js";
  s.onload = () => window.PayBot.on("paid", (e) => emit("paid", e));
  document.body.appendChild(s);
});
</script>

<template>
  <button @click="window.PayBot?.open(token)">Оплатить через Kaspi</button>
</template>

Vanilla HTML

html
Скачать
<!DOCTYPE html>
<html>
<body>
  <button id="pay">Оплатить</button>

  <script src="https://paybot.kz/widget.js"></script>
  <script>
    document.getElementById("pay").onclick = async () => {
      // Получаем токен с вашего бэкенда
      const r = await fetch("/api/create-payment", { method: "POST" });
      const { token } = await r.json();
      PayBot.open(token);
    };

    PayBot.on("paid", () => window.location.href = "/thanks");
  </script>
</body>
</html>

Безопасность

  • •Виджет работает только с токенами pl_… — без kp_live_… ключа во фронте
  • •Платёжная ссылка создаётся на вашем бэкенде с серверным ключом
  • •Все события идут через postMessage с origin-check — подмена невозможна
  • •iframe загружается по HTTPS с CSP-заголовками

Размеры и зависимости

  • •16 KB gzip
  • •Без зависимостей
  • •Поддержка: все браузеры начиная с iOS 13, Android 9, Edge 88
  • •CSP: разрешите https://paybot.kz для frame-src и script-src

Что дальше

Назад

← Hosted Checkout

Дальше

Брендирование →