Кнопка оплати

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 Playground, щоб налаштувати та протестувати компонент.

Режим	Опис
`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`	Візуальне налаштування (кольори, радіус меж тощо)

Зворотні виклики подій

Зворотний виклик	Параметри	Опис
`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

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

Налаштування

Обов'язкова конфігурація

Опціональна конфігурація

Зворотні виклики подій

Власний тригер

Зміст