Каталог пакетов
Checkout kit разбит на 16 отдельных пакетов, поэтому ставить нужно только то, что используете. Обычному веб-приложению нужны:
core— платёжный движок (нужен всегда);- один пакет провайдера, например
provider-stripe; runtime-browser— чтобы движок работал в браузере;react— если приложение на React 19;ui— если нужны готовые компоненты (необязательно).
Все 16 пакетов опубликованы в публичном npm. В каждом есть JavaScript (ESM), типы TypeScript и экспорты; установка проверяется в отдельном чистом проекте. Версии независимы: в таблицах ниже указаны опубликованные версии. Команда npm view @checkout-kit/core version (или имя другого пакета) покажет текущую версию latest.
Основа и хосты
| Пакет | Версия | Что делает | Руководство |
|---|---|---|---|
@checkout-kit/core | 0.2.0 | Платёжный движок: типы платежей, список провайдеров, состояние, восстановление и HTTP-клиент. Без кода для браузера и без React. | Архитектура |
@checkout-kit/runtime-browser | 0.2.0 | Выполняет дополнительные шаги в браузере: перенаправления и фреймы, поля провайдера, SDK провайдеров, QR-коды. Плюс session storage и страница возврата. | Браузер |
@checkout-kit/react | 0.1.1 | Связка с React 19: провайдер контекста, хуки для чтения состояния и компонент, который показывает дополнительные шаги. | React |
@checkout-kit/ui | 0.2.1 | Готовые компоненты оплаты (поля, состояния, раскладки). Их стили не влияют на остальную страницу. | UI |
@checkout-kit/webview-bridge | 0.1.1 | Для мобильных приложений: типизированные сообщения, команды из приложения, навигация и deep link. Части в приложении браузер не нужен. | WebView |
Адаптеры конкретных провайдеров
Эти три пакета работают с настоящими провайдерами. Браузер обращается к вашему серверу, а сервер — к провайдеру. К каждому есть пример ввода данных карты через SDK провайдера, рабочий сервер, тестовые данные и браузерные тесты. Проверить всё на своём тестовом аккаунте (песочнице) всё равно нужно самостоятельно.
| Пакет / id | Версия | Чем платит покупатель и как проходит оплата | Руководство |
|---|---|---|---|
@checkout-kit/provider-stripe / stripe | 0.1.1 | Токен PaymentMethod из Stripe.js. Используются PaymentIntents, шаги SDK и перенаправления. Деньги списываются автоматически. | Stripe |
@checkout-kit/provider-adyen / adyen | 0.2.0 | Зашифрованные данные из компонента Adyen, токен сохранённой карты или данные карты напрямую, если вы это разрешили. Advanced flow; состояние проверяет сервер. | Adyen |
@checkout-kit/provider-paypal / paypal | 0.1.1 | На вашей странице ничего не вводится. Покупатель подтверждает оплату в PayPal (Orders v2), потом ваш сервер списывает и проверяет платёж. | PayPal |
Названия всех пакетов начинаются с @checkout-kit/.
Протоколы-примеры
Эти пакеты — рабочие шаблоны для типовых платёжных API. Они общаются только со встроенным симулятором. Берите их за основу для своего провайдера. Сами по себе они не дают ни Apple Pay, ни Google Pay, ни подключения к настоящему банку, даже если протокол похож.
| Пакет / id | Версия | Показывает, как работать с | Руководство |
|---|---|---|---|
@checkout-kit/provider-psp / psp | 0.1.1 | JSON API, сохранёнными картами, 3DS2. | PSP |
@checkout-kit/provider-acquiring / acquiring | 0.1.1 | API банка на HTML-формах, числовыми статусами, 3DS1. | Эквайер |
@checkout-kit/provider-hpp / hpp | 0.1.1 | Страницей оплаты на сайте провайдера и проверкой возврата. | Платёжная страница |
@checkout-kit/provider-hosted-fields / hostedfields | 0.1.1 | Полями карты во фрейме провайдера, которые возвращают токен. | Поля провайдера |
@checkout-kit/provider-wallet / wallet | 0.1.1 | SDK кошелька и проверкой токена кошелька. | Кошелёк |
@checkout-kit/provider-bank-transfer / transfer | 0.1.1 | Показом QR-кода или кода оплаты и ожиданием поступления денег. | Перевод |
Пакеты для разработки
| Пакет | Версия | Что делает |
|---|---|---|
@checkout-kit/testing | 0.1.1 | Тестовые карты, поддельные провайдеры и раннеры, поддельный платёжный сервер (MSW). Каждое импортируется отдельно. |
@checkout-kit/conformance | 0.1.1 | Готовый набор тестов Vitest для плагинов провайдеров. Проверяет повторы, повторные запросы и данные от чужого заказа. |
Подробнее — в разделе тестирование. Никогда не используйте поддельный сервер как настоящий платёжный сервер.
Установка и зоны ответственности
В быстром старте есть готовые команды для каждого варианта, всех протоколов-примеров и обоих пакетов для разработки. Ставьте указанные выше имена со scope из npm: авторизация GitHub Packages и установщик архивов не нужны. Архивы GitHub остаются альтернативой для старых комплектов и сборок из исходников.
Библиотека проводит оплату на стороне клиента: шаги, повторы, восстановление.
Ваш сервер отвечает за:
- вход покупателя;
- цены;
- секретные ключи;
- хранение заказов в базе данных;
- то, что каждая операция выполняется только один раз (идемпотентность), даже при параллельных запросах;
- проверку уведомлений провайдера (вебхуков);
- выдачу заказа.
Подробнее — в разделе сервер мерчанта.