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 kompletny interfejs płatności — obsługuje połączenie z portfelem, wybór tokena, przetwarzanie transakcji oraz stan UI bez dodatkowej konfiguracji.

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: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

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

Przycisk napiwku

Modal płatności

Modal kodu QR Solana Pay

Tryby płatności

Opcja mode określa zachowanie przycisku:

Tryb	Opis
`buyNow`	Zakup pojedynczego produktu ze stałą kwotą
`cart`	Koszyk z wieloma produktami
`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`	`'buyNow' \| 'cart' \| '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, zaokrąglenie rogów itp.)

Konfiguracja płatności

Dla trybów buyNow oraz cart produkty należy przekazać przez paymentConfig:

paymentConfig={{
  products: [
    { id: '1', name: 'T-Shirt', price: 25, quantity: 2 },
    { id: '2', name: 'Hoodie', price: 45, quantity: 1 }
  ]
}}

Callbacki 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: "buyNow"
  }}
  paymentConfig={{
    products: [{ id: "1", name: "Product", price: 10, quantity: 1 }]
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Spis treści