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

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

Режим	Опис
`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 }
  ]
}}

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

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

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