Quickstart: przyjmowanie płatności

W rezultacie otrzymasz przycisk płatności w aplikacji React, który łączy portfel, umożliwia płacącemu wybór tokena i potwierdza prawdziwą płatność na Twój adres. Potrzebujesz Node.js 20+, aplikacji React lub Next.js (świeży projekt create-next-app wystarczy) oraz portfela do płatności.

1. Zainstaluj Commerce Kit

pnpm add @solana-commerce/kit

2. Dodaj przycisk

Umieść komponent PaymentButton w dowolnym miejscu swojej aplikacji i ustaw portfel sprzedawcy na adres, który kontrolujesz:

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

Komponent wewnętrznie obsługuje połączenie portfela, wybór tokena, przetwarzanie transakcji i stan interfejsu użytkownika. mode: "tip" pozwala płacącemu wybrać kwotę; zobacz tryby płatności dla płatności o stałej cenie i realizacji koszyka.

Wypróbuj w przeglądarce

Skonfiguruj przycisk płatności i uruchom przepływ napiwków bez opuszczania tej strony.

Otwórz Commerce Kit Playground na pełnym ekranie

3. Przyjmij płatność

Uruchom aplikację, kliknij przycisk, połącz portfel i dokonaj płatności. Callback onPaymentSuccess otrzymuje sygnaturę transakcji, która jest Twoim potwierdzeniem: sprawdź ją za pomocą getTransaction lub w dowolnym eksploratorze.

Co dalej

• Jak działają płatności w Solanie – portfele, stablecoiny, token account i opłaty
• Weryfikacja płatności – potwierdź płatność po stronie serwera przed realizacją zamówienia
• Wysyłanie płatności – wypłaty i przelewy z własnego backendu
• Gotowość produkcyjna – zanim zaczną przepływać prawdziwe pieniądze