البدء السريع: قبول دفعة

ستحصل في النهاية على زر دفع في تطبيق React يتصل بمحفظة، ويتيح للدافع اختيار رمز مميز، ويؤكد دفعة حقيقية إلى عنوانك. تحتاج إلى Node.js 20 أو أحدث، وتطبيق React أو Next.js (يكفي إنشاء create-next-app جديد)، ومحفظة للدفع منها.

1. تثبيت Commerce Kit

pnpm add @solana-commerce/kit

2. إضافة الزر

أضف مكوّن PaymentButton في أي مكان من تطبيقك واضبط محفظة التاجر على عنوان تتحكم فيه:

import { PaymentButton } from "@solana-commerce/kit";

function Checkout() {
  return (
    <PaymentButton
      config={{
        merchant: { name: "My Store", wallet: "your-wallet-address" },
        mode: "tip"
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

يتولى المكوّن داخليًا إدارة اتصال المحفظة، واختيار الرمز المميز، ومعالجة المعاملات، وحالة واجهة المستخدم. يتيح mode: "tip" للدافع اختيار المبلغ؛ راجع أوضاع الدفع للاطلاع على عمليات الدفع بسعر ثابت وسلة التسوق.

جرّبه في المتصفح

اضبط زر الدفع وابدأ تدفق الإكرامية دون مغادرة هذه الصفحة.

افتح ملعب Commerce Kit بملء الشاشة

3. استلام دفعة

شغّل تطبيقك، وانقر على الزر، وقم بتوصيل المحفظة، ثم ادفع. يتلقى رد النداء onPaymentSuccess توقيع المعاملة الذي يُعدّ إيصالك: ابحث عنه باستخدام getTransaction أو في أي مستكشف.

إلى أين تذهب بعد ذلك

• كيف تعمل المدفوعات على سولانا - المحافظ، والعملات المستقرة، وtoken account، والرسوم
• التحقق من المدفوعات - تأكيد الدفعة من جانب الخادم قبل تنفيذ الطلب
• إرسال المدفوعات - المدفوعات والتحويلات من الواجهة الخلفية الخاصة بك
• الجاهزية للإنتاج - قبل تحريك الأموال الحقيقية