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: "buyNow"}}paymentConfig={{products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]}}onPaymentSuccess={(signature) => {console.log("Payment confirmed:", signature);}}/>);}
تحقق من Commerce Kit Playground لتكوين واختبار المكون.
زر الإكرامية
زر الإكرامية
نافذة الدفع
نافذة الدفع
نافذة رمز QR لـ Solana Pay
نافذة رمز QR لـ Solana Pay
أوضاع الدفع
يحدد خيار mode سلوك الزر:
| الوضع | الوصف |
|---|---|
buyNow | شراء منتج واحد بمبلغ ثابت |
cart | سلة تسوق بمنتجات متعددة |
tip | يختار المستخدم المبلغ الخاص به (تبرعات/إكراميات) |
التكوين
التكوين المطلوب
| الخاصية | النوع | الوصف |
|---|---|---|
merchant.name | string | اسم النشاط التجاري المعروض أثناء الدفع |
merchant.wallet | string | عنوان محفظة سولانا لاستلام المدفوعات |
mode | 'buyNow' | 'cart' | 'tip' | نوع تدفق الدفع |
التكوين الاختياري
| الخاصية | النوع | الوصف |
|---|---|---|
network | 'mainnet' | 'devnet' | شبكة سولانا (افتراضي: 'mainnet') |
rpcUrl | string | نقطة نهاية RPC مخصصة |
allowedMints | string[] | تقييد الرموز المميزة المقبولة حسب عنوان السك |
showQR | boolean | تفعيل خيار الدفع برمز QR |
theme | ThemeConfig | التخصيص المرئي (الألوان، نصف قطر الحدود، إلخ.) |
إعدادات الدفع
لأوضاع buyNow و cart، قدم المنتجات عبر paymentConfig:
paymentConfig={{products: [{ id: '1', name: 'T-Shirt', price: 25, quantity: 2 },{ id: '2', name: 'Hoodie', price: 45, quantity: 1 }]}}
استدعاءات الأحداث
| الاستدعاء | المعاملات | الوصف |
|---|---|---|
onPaymentSuccess | (signature: string) | تم تأكيد المعاملة على السلسلة |
onPaymentError | (error: Error) | فشلت عملية الدفع في أي مرحلة |
onPaymentStart | () | تم بدء عملية الدفع |
onCancel | () | ألغى المستخدم عملية الدفع |
محفز مخصص
استبدل الزر الافتراضي بعنصرك الخاص:
<PaymentButtonconfig={{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>
Is this page helpful?