Bir React uygulamasında cüzdan bağlayan, ödeyenin bir token seçmesine olanak tanıyan ve adresinize gerçek bir ödemeyi onaylayan bir ödeme düğmesiyle sonuçlanacaksınız. Node.js 20+, bir React veya Next.js uygulaması (yeni bir create-next-app uygundur) ve ödeme yapacak bir cüzdana ihtiyacınız var.
Commerce Kit şu anda beta aşamasındadır. Kararlı sürümden önce API'ler değişebilir.
1. Commerce Kit'i yükleyin
pnpm add @solana-commerce/kit
2. Düğmeyi ekleyin
PaymentButton bileşenini uygulamanızın herhangi bir yerine ekleyin ve satıcı cüzdanını kontrol ettiğiniz bir adrese ayarlayın:
import { PaymentButton } from "@solana-commerce/kit";function Checkout() {return (<PaymentButtonconfig={{merchant: { name: "My Store", wallet: "your-wallet-address" },mode: "tip"}}onPaymentSuccess={(signature) => {console.log("Payment confirmed:", signature);}}/>);}
Bileşen; cüzdan bağlantısını, token seçimini, işlem
süreçlerini ve arayüz durumunu dahili olarak yönetir. mode: "tip" ödemeyi yapan kişinin
tutarı seçmesine olanak tanır; sabit fiyatlı ve sepet ödemeleri için ödeme modlarına
bakın.
Tarayıcıda deneyin
Ödeme düğgesini yapılandırın ve bu sayfadan ayrılmadan bahşiş akışını başlatın.
Commerce Kit Oyun Alanını tam ekranda açın
3. Ödeme alın
Uygulamanızı çalıştırın, düğmeye tıklayın, bir cüzdan bağlayın ve ödeme yapın. onPaymentSuccess geri çağrısı, makbuzunuz olan işlem imzasını alır: getTransaction ile veya herhangi bir gezginde arayın.
Sırada ne var
- Solana'da ödemeler nasıl çalışır - cüzdanlar, stablecoin'ler, token account'lar ve ücretler
- Ödemeleri doğrulayın - bir siparişi yerine getirmeden önce sunucu tarafında ödemeyi onaylayın
- Ödeme gönderin - kendi arka ucunuzdan ödemeler ve transferler
- Canlıya hazırlık - gerçek para hareket etmeden önce
Is this page helpful?