زر الدفع

Commerce Kit حاليًا في مرحلة تجريبية. قد تتغير واجهات برمجة التطبيقات قبل الإصدار المستقر. لمزيد من التفاصيل حول Commerce Kit، راجع وثائق Commerce Kit.

يوفر مكون PaymentButton من Commerce Kit واجهة دفع كاملة—تتعامل مع اتصال المحفظة، واختيار الرمز المميز، ومعالجة المعاملات، وحالة واجهة المستخدم بشكل جاهز.

التثبيت

pnpm add @solana-commerce/kit

الاستخدام الأساسي

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

تحقق من Commerce Kit Playground لتكوين واختبار المكون.

زر الإكرامية

زر الإكراميةزر الإكرامية

نافذة الدفع

نافذة الدفعنافذة الدفع

نافذة رمز QR لـ Solana Pay

نافذة رمز QR لـ Solana Payنافذة رمز QR لـ Solana Pay

أوضاع الدفع

يحدد خيار mode سلوك الزر:

الوضعالوصف
buyNowشراء منتج واحد بمبلغ ثابت
cartسلة تسوق بمنتجات متعددة
tipيختار المستخدم المبلغ الخاص به (تبرعات/إكراميات)

التكوين

التكوين المطلوب

الخاصيةالنوعالوصف
merchant.namestringاسم النشاط التجاري المعروض أثناء الدفع
merchant.walletstringعنوان محفظة سولانا لاستلام المدفوعات
mode'buyNow' | 'cart' | 'tip'نوع تدفق الدفع

التكوين الاختياري

الخاصيةالنوعالوصف
network'mainnet' | 'devnet'شبكة سولانا (افتراضي: 'mainnet')
rpcUrlstringنقطة نهاية RPC مخصصة
allowedMintsstring[]تقييد الرموز المميزة المقبولة حسب عنوان السك
showQRbooleanتفعيل خيار الدفع برمز QR
themeThemeConfigالتخصيص المرئي (الألوان، نصف قطر الحدود، إلخ.)

إعدادات الدفع

لأوضاع 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()ألغى المستخدم عملية الدفع

محفز مخصص

استبدل الزر الافتراضي بعنصرك الخاص:

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

Is this page helpful?

تدار بواسطة

© 2026 مؤسسة سولانا.
جميع الحقوق محفوظة.
تواصل معنا