Ödeme butonu

Commerce Kit şu anda beta aşamasındadır. API'ler kararlı sürümden önce değişebilir. Commerce Kit hakkında ek ayrıntılar için Commerce Kit belgelerine bakın.

PaymentButton bileşeni, Commerce Kit'ten eksiksiz bir ödeme arayüzü sağlar—cüzdan bağlantısı, token seçimi, işlem işleme ve kullanıcı arayüzü durumunu hazır olarak yönetir.

Kurulum

pnpm add @solana-commerce/kit

Temel kullanım

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

Bileşeni yapılandırmak ve test etmek için Commerce Kit Playground'a göz atın.

Bahşiş butonu

Ödeme modalı

Solana Pay QR kod modalı

Ödeme modları

mode seçeneği buton davranışını belirler:

Mod	Açıklama
`buyNow`	Sabit tutarlı tek ürün satın alma
`cart`	Birden fazla ürünlü alışveriş sepeti
`tip`	Kullanıcı kendi tutarını seçer (bağışlar/bahşişler)

Yapılandırma

Gerekli yapılandırma

Özellik	Tür	Açıklama
`merchant.name`	`string`	Ödeme sırasında gösterilen işletme adı
`merchant.wallet`	`string`	Ödeme almak için Solana cüzdan adresi
`mode`	`'buyNow' \| 'cart' \| 'tip'`	Ödeme akışı türü

İsteğe bağlı yapılandırma

Özellik	Tür	Açıklama
`network`	`'mainnet' \| 'devnet'`	Solana ağı (varsayılan: `'mainnet'`)
`rpcUrl`	`string`	Özel RPC uç noktası
`allowedMints`	`string[]`	Kabul edilen token'ları mint adresine göre kısıtla
`showQR`	`boolean`	QR kod ödeme seçeneğini etkinleştir
`theme`	`ThemeConfig`	Görsel özelleştirme (renkler, kenarlık yarıçapı vb.)

Ödeme yapılandırması

buyNow ve cart modları için, ürünleri paymentConfig aracılığıyla sağlayın:

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

Olay geri çağrıları

Geri çağrı	Parametreler	Açıklama
`onPaymentSuccess`	`(signature: string)`	İşlem zincir üzerinde onaylandı
`onPaymentError`	`(error: Error)`	Ödeme herhangi bir aşamada başarısız oldu
`onPaymentStart`	`()`	Ödeme akışı başlatıldı
`onCancel`	`()`	Kullanıcı ödemeyi iptal etti

Özel tetikleyici

Varsayılan düğmeyi kendi öğenizle değiştirin:

<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>

İçindekiler