Платёжная кнопка

Commerce Kit сейчас находится в бета-версии. API могут измениться до стабильного релиза. Дополнительную информацию о Commerce Kit смотрите в документации Commerce Kit.

Компонент PaymentButton из Commerce Kit предоставляет полноценный платёжный интерфейс — подключение кошелька, выбор токена, обработка транзакций и управление состоянием UI из коробки.

Установка

pnpm add @solana-commerce/kit

Базовое использование

import { PaymentButton } from "@solana-commerce/kit";

function Checkout() {
  return (
    <PaymentButton
      config={{
        merchant: { name: "My Store", wallet: "your-wallet-address" },
        mode: "tip"
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

Ознакомьтесь с песочницей Commerce Kit, чтобы настроить и протестировать компонент.

Режим	Описание
`tip`	Пользователь сам выбирает сумму (донаты/чаевые)

Конфигурация

Обязательные параметры

Свойство	Тип	Описание
`merchant.name`	`string`	Название бизнеса, отображаемое при оплате
`merchant.wallet`	`string`	Адрес Solana-кошелька для получения платежей
`mode`	'tip'`	Тип платёжного сценария

Необязательные параметры

Свойство	Тип	Описание
`network`	`'mainnet' \| 'devnet'`	Сеть Solana (по умолчанию: `'mainnet'`)
`rpcUrl`	`string`	Пользовательский RPC-эндпоинт
`allowedMints`	`string[]`	Ограничить принимаемые токены по mint-адресу
`showQR`	`boolean`	Включить оплату через QR-код
`theme`	`ThemeConfig`	Визуальная настройка (цвета, скругление углов и др.)

Обратные вызовы событий

Callback	Параметры	Описание
`onPaymentSuccess`	`(signature: string)`	Транзакция подтверждена в блокчейне
`onPaymentError`	`(error: Error)`	Платёж не прошёл на любом этапе
`onPaymentStart`	`()`	Запущен процесс оплаты
`onCancel`	`()`	Пользователь отменил платёж

Пользовательский триггер

Замените стандартную кнопку своим элементом:

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Платёжная кнопка

Установка

Базовое использование

Кнопка чаевых

Модальное окно оплаты

Модальное окно с QR-кодом Solana Pay

Режимы оплаты

Конфигурация

Обязательные параметры

Необязательные параметры

Обратные вызовы событий

Пользовательский триггер

Содержание