Быстрый старт: приём платежа

В результате вы получите кнопку оплаты в 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 и комиссии
• Верификация платежей — подтверждение платежа на стороне сервера перед выполнением заказа
• Отправка платежей — выплаты и переводы из вашего собственного бэкенда
• Готовность к продакшену — перед тем как начнут двигаться реальные деньги