Швидкий старт: прийом платежу

У результаті ви отримаєте кнопку оплати у React-додатку, яка підключає гаманець, дозволяє платнику вибрати токен і підтверджує реальний платіж на вашу адресу. Вам знадобляться Node.js 20+, додаток на React або Next.js (щойно створений create-next-app підійде), а також гаманець для оплати.

1. Встановіть Commerce Kit

pnpm add @solana-commerce/kit

2. Додайте кнопку

Розмістіть компонент PaymentButton будь-де у вашому додатку та вкажіть гаманець продавця — адресу, якою ви керуєте:

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);
      }}
    />
  );
}

Компонент самостійно обробляє підключення гаманця, вибір токена, обробку транзакцій і стан інтерфейсу. mode: "tip" дозволяє платнику самостійно вибрати суму; перегляньте режими оплати для оплати за фіксованою ціною та оформлення замовлень у кошику.

Спробуйте у браузері

Налаштуйте кнопку оплати та запустіть процес чайових, не залишаючи цієї сторінки.

Відкрити Commerce Kit Playground на повний екран

3. Прийміть платіж

Запустіть додаток, натисніть кнопку, підключіть гаманець і здійсніть оплату. Зворотний виклик onPaymentSuccess отримує підпис транзакції, який є вашою квитанцією: перевірте його за допомогою getTransaction або в будь-якому провіднику.

Що робити далі

• Як працюють платежі в Solana — гаманці, стейблкоїни, token account та комісії
• Перевірка платежів — підтвердіть платіж на стороні сервера перед виконанням замовлення
• Надсилання платежів — виплати та перекази з вашого власного бекенду
• Готовність до продакшну — перш ніж переходити до реальних грошей