اختار طريقة الدمج
اختار واحدة من أربع طرق للدمج على حسب حجم الكود اللي ناوي تكتبه.
فيه أربع طرق لتحصيل المدفوعات مع XPay. كلها بتعتمد على نفس جلسة الدفع (Checkout Session)، فاستدعاء الـ API اللي السيرفر بتاعك بيعمله والـ webhook اللي بيوصله واحدين في الطرق الأربعة. الفرق الوحيد هو حجم كود الواجهة (frontend) اللي هتكتبه، ومكان إدخال العميل لبيانات بطاقته.
لو محتار تختار إيه، ابدأ بـ روابط الدفع. تقدر تنتقل لدمج أغنى بعدين من غير ما تعيد كتابة الـ backend بتاعك.
مقارنة جنب بعض
| الطريقة | الكود اللي بتكتبه | تجربة العميل | اختارها لو |
|---|---|---|---|
| روابط الدفع | مفيش | صفحة XPay مستضافة بيوصلها عن طريق رابطك | عايز صفر كود، أو بتبيع عن طريق الفواتير أو السوشيال أو الشات |
| الدفع المستضاف | السيرفر بس | صفحة XPay مستضافة بيوصلها عن طريق تحويل | عايز تتجنّب أي تعقيد في الواجهة والتحويل تمام بالنسبالك |
| Drop-in | السيرفر + حوالي 10 أسطر واجهة | نافذة منبثقة على موقعك، أو iframe متضمَّن | عايز العميل يفضل على نطاقك والنموذج لسه مستضاف من XPay |
| Elements | السيرفر + واجهة مخصّصة | نموذج بتبنيه بنفسك، على موقعك | عايز تحكم كامل في واجهة الدفع |
الطرق الأربعة
روابط الدفع
اعمل رابط دفع من لوحة التحكم أو عن طريق الـ API وشاركه. إحنا بنستضيف صفحة الدفع، والعميل بيدفع، والسيرفر بتاعك بيوصله webhook بحدث checkout.session.completed. من غير أي كود واجهة خالص.
الدفع المستضاف
السيرفر بتاعك بيستدعي POST /checkout/sessions ويحوّل العميل للـ url اللي رجعت في الرد. وبعد الدفع العميل بيرجع للرابط اللي ظبطته في afterCompletion. أبسط طريق فيه أي كود.
Drop-in
السيرفر بتاعك بينشئ جلسة دفع، والواجهة بتاعتك بتفتحها بـ xpay.checkout({ clientSecret, mode: "modal" }) أو بتضمّنها داخليًا بـ mode: "inline". والعميل مش بيغادر نطاقك أبدًا.
Elements
السيرفر بتاعك بينشئ جلسة دفع، والواجهة بتاعتك بتبني واجهة دفع مخصّصة حوالين الـ <PaymentElement /> بتاع XPay. أكتر كود، وأقصى تحكم.
إيه اللي بيبقى ثابت في الطرق الأربعة
- استدعاء API واحد. كل طريقة (ما عدا رابط الدفع اللي من غير كود، وده برضه بيغلّف جلسة دفع من تحت لتحت) بتبدأ بـ
POST /checkout/sessions. - webhook واحد. كل دفعة ناجحة بتطلق
checkout.session.completedوبتحمل نفس جلسة الدفع اللي كنت هتاخدها من الـ API. - تدفق عميل واحد. البطاقات، والـ 3D Secure، ووسائل الدفع المحلية زي ڤاليو وفوري، كلها بتشتغل بنفس الطريقة.
أنت مش بتحبس نفسك في طريقة معيّنة لما تبدأ. جلسة الدفع هي العمود الفقري، وطرق الدمج مجرد طرق مختلفة لفتحها.
رايح فين بعد كده
البداية السريعة
لسه معملتش دفعة اختبار؟ شغّل XPay من الأول للآخر في خمس دقايق عن طريق رابط دفع.
مرجع الـ API
عايز تتصفّح الـ API قبل ما تختار؟ كل نقطة نهاية، مولّدة من مواصفة OpenAPI الحيّة.
مثال HTML عادي
كل نمط في الصفحة دي كملفات HTML عادية جاهزة للتشغيل: CDN script tag + الـ factory العام
XPay()، من غير build step.
متجر مثال Next.js
متجر شغّال بيغطي الدفع المستضاف، وdrop-in، وinline، وElements، زائد مستقبِل webhooks متحقّق من التوقيع.