Przycisk płatności

Commerce Kit jest obecnie w wersji beta. API mogą się zmienić przed wydaniem stabilnej wersji. Więcej informacji o Commerce Kit znajdziesz w dokumentacji Commerce Kit.

Komponent PaymentButton z Commerce Kit zapewnia pełny interfejs płatności — obsługuje połączenie z portfelem, wybór tokena, przetwarzanie transakcji oraz stan UI od razu po wdrożeniu.

Instalacja

pnpm add @solana-commerce/kit

Podstawowe użycie

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

Wypróbuj Commerce Kit Playground, aby skonfigurować i przetestować komponent.

Przycisk napiwku

Okno płatności

Okno kodu QR Solana Pay

Tryby płatności

Opcja mode określa działanie przycisku:

Tryb	Opis
`tip`	Użytkownik wybiera własną kwotę (darowizny/napiwki)

Konfiguracja

Wymagana konfiguracja

Właściwość	Typ	Opis
`merchant.name`	`string`	Nazwa firmy wyświetlana podczas płatności
`merchant.wallet`	`string`	Adres portfela Solana do odbioru płatności
`mode`	'tip'`	Typ przepływu płatności

Opcjonalna konfiguracja

Właściwość	Typ	Opis
`network`	`'mainnet' \| 'devnet'`	Sieć Solana (domyślnie: `'mainnet'`)
`rpcUrl`	`string`	Własny endpoint RPC
`allowedMints`	`string[]`	Ogranicz akceptowane tokeny według adresu mint
`showQR`	`boolean`	Włącz opcję płatności kodem QR
`theme`	`ThemeConfig`	Wizualna personalizacja (kolory, promień zaokrąglenia itp.)

Wywołania zwrotne zdarzeń

Callback	Parametry	Opis
`onPaymentSuccess`	`(signature: string)`	Transakcja potwierdzona on-chain
`onPaymentError`	`(error: Error)`	Płatność nie powiodła się na którymkolwiek etapie
`onPaymentStart`	`()`	Rozpoczęto proces płatności
`onCancel`	`()`	Użytkownik anulował płatność

Własny wyzwalacz

Zastąp domyślny przycisk własnym elementem:

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "tip"
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Spis treści