مجموعة Commerce Kit حاليًا في مرحلة تجريبية. قد تتغير واجهات برمجة التطبيقات قبل الإصدار المستقر. لمزيد من التفاصيل حول Commerce Kit، راجع وثائق Commerce Kit.
يوفر مكون PaymentButton من
Commerce Kit واجهة دفع
كاملة—تتعامل مع اتصال المحفظة، واختيار الرمز المميز، ومعالجة المعاملات، وحالة
واجهة المستخدم بشكل جاهز.
التثبيت
pnpm add @solana-commerce/kit
الاستخدام الأساسي
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);}}/>);}
تحقق من ساحة تجربة Commerce Kit لتكوين واختبار المكون.
زر الإكرامية
زر الإكرامية
نافذة الدفع
نافذة الدفع
نافذة رمز QR لـ Solana Pay
نافذة رمز QR لـ Solana Pay
أوضاع الدفع
يحدد خيار mode سلوك الزر:
| الوضع | الوصف |
|---|---|
tip | يختار المستخدم المبلغ الخاص به (تبرعات/إكراميات) |
التكوين
التكوين المطلوب
| الخاصية | النوع | الوصف |
|---|---|---|
merchant.name | string | اسم النشاط التجاري المعروض أثناء الدفع |
merchant.wallet | string | عنوان محفظة سولانا لاستلام المدفوعات |
mode | 'tip'` | نوع تدفق الدفع |
التكوين الاختياري
| الخاصية | النوع | الوصف |
|---|---|---|
network | 'mainnet' | 'devnet' | شبكة سولانا (افتراضي: 'mainnet') |
rpcUrl | string | نقطة نهاية RPC مخصصة |
allowedMints | string[] | تقييد الرموز المميزة المقبولة حسب عنوان السك |
showQR | boolean | تفعيل خيار الدفع برمز QR |
theme | ThemeConfig | التخصيص المرئي (الألوان، نصف قطر الحدود، إلخ.) |
استدعاءات الأحداث
| الاستدعاء | المعاملات | الوصف |
|---|---|---|
onPaymentSuccess | (signature: string) | تم تأكيد المعاملة على السلسلة |
onPaymentError | (error: Error) | فشلت الدفعة في أي مرحلة |
onPaymentStart | () | تم بدء عملية الدفع |
onCancel | () | ألغى المستخدم الدفعة |
محفز مخصص
استبدل الزر الافتراضي بعنصرك الخاص:
<PaymentButtonconfig={{merchant: { name: "Shop", wallet: "address" },mode: "tip"}}><button className="my-custom-button">Pay with Solana</button></PaymentButton>
Is this page helpful?