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

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: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

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

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

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

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

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

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

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

Конфигурация оплаты

Для режимов buyNow и cart предоставьте продукты через paymentConfig:

paymentConfig={{
  products: [
    { id: '1', name: 'T-Shirt', price: 25, quantity: 2 },
    { id: '2', name: 'Hoodie', price: 45, quantity: 1 }
  ]
}}

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

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

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

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

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "buyNow"
  }}
  paymentConfig={{
    products: [{ id: "1", name: "Product", price: 10, quantity: 1 }]
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

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

Установка

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

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

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

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

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