زر الدفع في موقع إلكتروني: أربع طرق للاستخلاص دون متجر إلكتروني

زر الدفع في موقع إلكتروني لا يتطلب متجرًا إلكترونيًا: إنه مجرد رابط نحو صفحة دفع تستضيفها ChariPay، تضعونه في أي صفحة، سواء كانت موقع WordPress دون WooCommerce، أو موقعًا مصنوعًا بأداة بناء المواقع، أو صفحة هبوط. وهناك أربعة خيارات حسب حاجتكم: زر نحو رابط دفع قابل لإعادة الاستعمال، بسعر ثابت، يُنشأ عبر API؛ أو نموذج ينشئ خادمكم انطلاقًا منه رابطًا أو جلسة بالمبلغ الصحيح؛ أو صفحة منتج مستضافة، دون مطوّر؛ أو، حين يصبح الموقع متجرًا حقيقيًا، WooCommerce أو Shopify. يشرح هذا الدليل كل خيار، ثم ما يُكتب حول الزر وكيف تعرفون من دفع.

زر الدفع في موقع إلكتروني دون متجر: المبدأ

ChariPay منصة دفع مغربية، مزوّد خدمات دفع (PSP) تشغّله Chari Money، مؤسسة أداء مرخَّصة من بنك المغرب. ومبدأ زر الدفع مع ChariPay بسيط عن قصد: الزر ليس سوى رابط. حين ينقر الزائر، يغادر صفحتكم نحو صفحة دفع تستضيفها ChariPay، فيُدخل بطاقته، ويؤكد العملية لدى بنكه عبر ‎3-D Secure، ويصل المبلغ إلى حساب الأداء الخاص بكم.

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

وما يتغير من خيار إلى آخر هو طريقة إنشاء العنوان الموجود خلف الزر: مرة واحدة وإلى الأبد، أو لكل زائر.

الخيار 1: زر نحو رابط دفع قابل لإعادة الاستعمال

هذا خيار السعر الثابت، بنداء واحد إلى API يُجرى مرة واحدة وإلى الأبد. رابط الدفع مبلغ ووصف؛ يدفع الزبون في صفحة تستضيفها ChariPay. وهو لاستعمال واحد أو قابل لإعادة الاستعمال، بمدة صلاحية تختارونها — 24 ساعة، 7 أيام، 30 يومًا، بلا انتهاء، أو تاريخ محدد — وبحالة واضحة: نشط، مدفوع، ملغى، منتهي الصلاحية. وللزر، يلزم الرابط القابل لإعادة الاستعمال: العنوان نفسه يخدم كل الزوار، بالسعر نفسه. من بوابة التاجر، كل رابط دفع تنشئونه هو رابط لاستعمال واحد. أما الرابط القابل لإعادة الاستعمال — مبلغ واحد يؤدّيه عدة زبناء — فيُنشأ عبر API بـsingleUse: false؛ وبعد إنشائه يظهر في بوابة التاجر كباقي الروابط. وتُخصَّص صفحة الدفع من إعدادات الحساب، باسمكم وشعاركم.

1. 1أنشئوا الرابط مرة واحدة عبر API: POST /v1/payment-links بـsingleUse: false، وبمبلغ ثابت ووصف واضح («استشارة من 45 دقيقة»، «انخراط سنوي»)، وبتاريخ انتهاء (expiresAt) إن كان للعرض نهاية؛ والنداء الكامل، في صيغته لاستعمال واحد، معروض في الخيار 2.
2. 2انسخوا عنوانه: payUrl المُعاد عند الإنشاء.
3. 3ألصقوه كوجهة للزر في محرر موقعكم، وأعطوا الزر تسمية واضحة.
4. 4اختبروا: انقروا على الزر، وتحققوا من الصفحة التي تُفتح، ومن المبلغ والوصف.

الحالات النموذجية: سعر واحد (استشارة، ورشة، رسم دخول)، أو انخراط بمبلغ ثابت، أو حصة تدريب. مدرّب رياضي في طنجة مثلًا يمكنه وضع «احجز وادفع حصتي» أسفل جدول أسعاره. وقاعدة ينبغي تذكرها: الرابط القابل لإعادة الاستعمال لا يستخلص إلا البطاقة؛ أما النقد فيمر عبر رابط لاستعمال واحد، مرجع واحد لكل إيداع. ومن دون مطوّر، للبيع مرات عديدة بالسعر نفسه، انشروا منتجًا في متجركم المستضاف وشاركوا رابطه: إنه الخيار 3.

العرض الكامل في صفحة روابط الدفع، وكل حقل من حقول الرابط مشروح في دليل إنشاء رابط دفع.

جرّبوا الآن، على صفحة تجريبية: ابدؤوا في وضع الاختبار. ثلاثة حقول (الاسم، والبريد الإلكتروني المهني، والمؤسسة)، ورابط تفعيل يصلكم بالبريد لاختيار كلمة المرور، ثم بوابة التاجر حيث تنشئون بأنفسكم مفتاح الاختبار بعد إعادة مصادقة؛ وبه تنشئون رابط اختبار قابلًا لإعادة الاستعمال، وتضعونه خلف زر، وتسدّدونه ببطاقة الاختبار. الأمر مجاني، بلا حد زمني ودون موافقة تنتظرونها: والتحقق من مؤسستكم (KYB) لا يشترطه إلا الانتقال إلى الإنتاج.

الخيار 2: نموذج، وخادمكم ينشئ الرابط أو الجلسة

حين يتغير المبلغ أو الزبون في كل مرة، كعرض أسعار أو حجز بخيارات أو طلبية حسب الطلب، لا يعود الرابط الثابت كافيًا. فيفتح الزر عندئذ نموذجًا قصيرًا يرسل الطلب إلى خادمكم؛ وخادمكم هو من ينشئ الأداء بالمبلغ الصحيح، ثم يعيد توجيه الزائر إلى الصفحة المستضافة.

أمام خادمكم إمكانيتان. الأولى رابط لاستعمال واحد. نداء واحد يكفي: يعيد POST /v1/payment-links عنوان payUrl لمشاركته.

curl -X POST 'https://api-psp.charipay.ma/v1/payment-links' \
  -H 'X-CHARI-PAY-API-KEY: chari_sk_test_...' \
  -H 'Content-Type: application/json' \
  -H 'Idempotency-Key: order-1042-link' \
  -d '{
    "amount": 149.90,
    "description": "Commande #1042",
    "singleUse": true,
    "externalId": "order-1042",
    "customerEmail": "amine.bennani@example.com",
    "customerPhone": "+212600000000",
    "metadata": { "cartId": "c_987" }
  }'

يتضمن الرد (201، أو 200 عند الإعادة بـexternalId نفسه) مرجع الرابط reference (pl_…) وعنوانه payUrl، الذي يعيد خادمكم توجيه الزائر إليه. وفي صفحة رابط لاستعمال واحد، يمكن لزبونكم الاختيار بين البطاقة والنقد في الوكالة.

والإمكانية الثانية جلسة دفع: تنشئون الجلسة من جهة الخادم، وتعيدون توجيه المشتري إلى صفحة الدفع المستضافة — بالبطاقة مع ‎3-D Secure —، وتتلقون النتيجة عبر ويب هوك موقَّع. وعمليًا، يعيد خادمكم توجيه الزائر إلى checkoutUrl المُعاد عند إنشاء الجلسة. والجلسة لا تستخلص إلا البطاقة.

وفي الحالتين، يبقى مفتاح API على الخادم، لا في شفرة الصفحة أبدًا: فالزر الذي ينادي API من المتصفح يكشف مفتاحكم لكل الزوار. وللاختيار بين الإمكانيتين، اقرؤوا رابط دفع أم صفحة دفع.

الخيار 3: صفحة منتج مستضافة

هذا هو الطريق دون مطوّر لسعر ثابت، وحل وسط إن كنتم تبيعون بضعة منتجات. انشروا منتجاتكم في واجهتكم المستضافة وتابعوا طلبياتكم — في انتظار الأداء، مدفوعة، مشحونة، مسلَّمة — من بوابة التاجر. ولكل منتج سعره ومخزونه الاختياري وصفحة بيعه؛ ويشير زركم ببساطة إلى هذه الصفحة، وهي التي تستخلص. وفي المتجر المستضاف، يختار المشتري عند الطلب الأداء بالبطاقة — على صفحة الدفع المستضافة مع ‎3-D Secure — أو نقدًا: فيتلقى مرجعًا يسدّده في وكالة من شبكة Chari.

والميزة مقارنة بالخيار 1 هي التتبّع: كل شراء يصبح طلبية تتابعونها في بوابة التاجر حتى التسليم، ويمكن أن يحمل كل منتج مخزونًا. صانعة خزف في آسفي مثلًا يمكنها توجيه كل زر «اشترِ» في موقعها التعريفي إلى الصفحة المستضافة للقطعة المقابلة. والشرح خطوة بخطوة في دليل المتجر المستضاف.

الخيار 4: الانتقال إلى WooCommerce أو Shopify

تأتي لحظة يصبح فيها الموقع التعريفي متجرًا: فهرس يكبر، وسلة، ورسوم توصيل. ولا تحتاجون حينها إلى زر بل إلى منصة تجارة. لا توجد إضافة ChariPay لـShopify ولا لـWooCommerce: ترسلون رابط دفع لكل طلبية، دون سطر شفرة واحد، أو تربطون صفحة الدفع المستضافة عبر API لإعادة توجيه تلقائية.

وإن كان موقعكم يعمل أصلًا على WordPress، فدليل WooCommerce في المغرب يشرح التركيبتين. وعلى Shopify، راجعوا Shopify في المغرب. وفي كل الأحوال، تبقى صفحة الدفع هي صفحة الدفع المستضافة لدى ChariPay.

اختيار الخيار المناسب: الجدول

قراءة سريعة: لسعر ثابت، الخيار 1 إن كان مطوّر يستطيع إنشاء الرابط مرة واحدة عبر API، والخيار 3 في غير ذلك؛ وانتقلوا إلى الخيار 2 بمجرد أن يتوقف المبلغ على الزبون؛ والخيار 3 يناسبكم أيضًا إن كنتم تبيعون أشياء بمخزون؛ وفكروا في الخيار 4 حين تصبح السلة ضرورية.

ما يُكتب على الزر وحوله

الزر الذي يقنع يقول بالضبط ما سيحدث. ثلاث قواعد بسيطة:

• تسمية واضحة: «ادفع» متبوعة بما يُشترى والمبلغ بالدرهم، مثل «ادفع حصتي — 149,90 درهمًا» بدل «تأكيد».
• وصف متطابق بين صفحتكم والرابط: ينبغي أن يجد الزبون في صفحة الدفع الكلمات التي قرأها للتو.
• جملة عمّا يلي: «ستنتقلون إلى صفحة دفع تستضيفها ChariPay، باسمنا؛ وستؤكدون العملية لدى بنككم.»

وأضيفوا سطرًا يذكر من يشغّل الأداء، مثلًا: «أداء تعالجه ChariPay، مزوّد خدمات دفع (PSP) تشغّله Chari Money، مؤسسة أداء مرخَّصة من بنك المغرب.» أما ثقة المشتري لحظة الأداء فموضوع قائم بذاته، يتناوله مقال الدفع الإلكتروني الآمن.

معرفة من دفع: بوابة التاجر أو ويب هوك

دون مطوّر، يُتابَع كل شيء في بوابة التاجر: يصلكم إشعار عند كل استخلاص، ويعرض كل رابط حالته، نشط أو مدفوع أو ملغى أو منتهي الصلاحية. وبالنسبة إلى الرابط القابل لإعادة الاستعمال، تعيد API أيضًا، عبر GET /v1/payment-links/{reference}، عدد الأداءات المتلقاة (useCount) والمجموع المستخلص (totalCollected). والرابط القابل لإعادة الاستعمال واحد للجميع: إن احتجتم إلى ربط كل أداء بزبون محدد، فالخيار 2 أنسب.

ومع مطوّر، تعيد الجلسة النتيجة عبر ويب هوك موقَّع، ويجد خادمكم الطلبية عبر metadata الخاص بكم، الذي يعود كما هو في الحدث؛ وبالنسبة إلى الجلسة، يحمل الحدث أيضًا orderId الخاص بكم. أكّدوا الطلبية عند استلام الويب هوك، لا عند إعادة التوجيه وحدها: فإعادة التوجيه تعني أن المشتري عاد، لا أن الأداء قد تمّ.

وأخيرًا، بالنسبة إلى النقد: بمجرد أن تؤكد الشبكة الإيداع، يصبح الرابط «مدفوعًا» ويصلكم الإشعار في بوابة التاجر؛ ومن جهة الخادم تُقرأ حالة الرابط عبر GET /v1/payment-links/{reference}.

أسئلة شائعة

كيف أضيف زر دفع إلى موقع إلكتروني؟

ألصقوا كوجهة لزر، في محرر موقعكم، عنوان صفحة دفع تستضيفها ChariPay. لسعر ثابت: رابط دفع قابل لإعادة الاستعمال، يُنشأ مرة واحدة عبر API بـsingleUse: false، أو، دون مطوّر، صفحة منتج في متجركم المستضاف. ولمبلغ متغير، ينشئ خادمكم رابطًا لاستعمال واحد أو جلسة دفع لكل زائر.

هل يجب تثبيت إضافة أو سكربت؟

لا. الزر مجرد رابط نحو صفحة دفع مستضافة: لا شيء تثبّتونه ولا شفرة تنسخونها في الصفحة. وإن أصبح موقعكم متجرًا، فاعلموا أنه لا توجد إضافة ChariPay لـShopify ولا لـWooCommerce: ترسلون رابط دفع لكل طلبية، أو تربطون صفحة الدفع المستضافة عبر API.

هل يعمل الزر في موقع WordPress دون WooCommerce؟

نعم. الزر ليس سوى رابط: يعمل في أي صفحة تتيح إنشاء زر وإعطاءه عنوانًا، سواء كانت WordPress دون WooCommerce، أو موقعًا مصنوعًا بأداة بناء المواقع، أو صفحة هبوط. ويتم الأداء في الصفحة التي تستضيفها ChariPay، وتتابعون المستخلصات في بوابة التاجر.

هل يمكن استعمال زر لمبالغ متغيرة؟

نعم، مع الخيار 2. يفتح الزر نموذجًا يرسل الطلب إلى خادمكم؛ فينشئ هذا الأخير رابطًا لاستعمال واحد أو جلسة دفع بالمبلغ الصحيح، ثم يعيد توجيه الزائر إلى صفحة الدفع. ويبقى مفتاح API على الخادم. أما الرابط القابل لإعادة الاستعمال فله دائمًا المبلغ الثابت نفسه.

هل يقبل زر الدفع النقد في الوكالة؟

لا يقبله الزر الموجَّه نحو رابط قابل لإعادة الاستعمال، الذي لا يستخلص إلا البطاقة، ولا جلسة الدفع. فمن جهة الروابط، يمر النقد عبر رابط لاستعمال واحد: إن أنشأ خادمكم رابطًا لكل زبون، أمكن لهذا الزبون أن يختار في الصفحة الأداء بالبطاقة أو نقدًا، بمرجع يسدّده في وكالة من شبكة Chari. أما صفحة المنتج في المتجر المستضاف فتتيح للمشتري اختيار النقد عند الطلب.

هل يتم الأداء داخل موقعي؟

لا: ينتقل الزائر إلى صفحة دفع تستضيفها ChariPay، باسمكم، ثم يمكنه العودة إلى موقعكم. وعبر API، تعيده عناوين العودة الخاصة بالرابط (acceptUrl، declineUrl) أو بالجلسة إلى صفحاتكم. وهذا بالضبط ما يبعدكم عن بيانات البطاقة: فلا ترون أبدًا رقم بطاقة، ولا يمر عبر موقعكم.

كيف أعرف من دفع عبر الزر؟

في بوابة التاجر، يصلكم إشعار عند كل استخلاص ويعرض كل رابط حالته. وبالنسبة إلى الرابط القابل لإعادة الاستعمال، يعطي useCount وtotalCollected عدد الأداءات والمجموع؛ ولربط كل أداء بزبون محدد، فضّلوا رابطًا لاستعمال واحد أو جلسة دفع ينشئهما خادمكم، مع metadata الخاص بكم.

الخطوة التالية

جرّبوا الخيار 1 اليوم على صفحة تجريبية: ابدؤوا في وضع الاختبار، وأنشئوا مفتاح الاختبار ثم رابطًا قابلًا لإعادة الاستعمال عبر API، وضعوه خلف زر، وسدّدوه ببطاقة الاختبار ‎4918 9141 0719 5005، CVV 123، وأي تاريخ انتهاء مستقبلي، ورمز ‎3-D Secure 555. ثم انتقلوا إلى الخيار 2 أو 3 إن تغيّر المبلغ أو كبر فهرسكم: دليل إنشاء رابط دفع ودليل المتجر المستضاف يرافقانكم.