توفر Moyasar طريقة سلسة لدمج مدفوعات بطاقات الائتمان في تطبيق الويب الخاص بك. اتبع هذه الخطوات لإعداد وبدء قبول المدفوعات.

ما هي بوابة الدفع؟

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

كيف تعمل بوابات الدفع؟

تعمل بوابات الدفع عن طريق تشفير ونقل تفاصيل المعاملة بأمان من متصفح العميل إلى خادم الويب الخاص بالتاجر ثم إلى معالج الدفع. إليك العملية خطوة بخطوة:

العميل يبدأ الدفع: يدخل العميل معلومات الدفع الخاصة به على موقع التاجر.
التشفير: تشفر بوابة الدفع تفاصيل المعاملة.
الموافقة على المعاملة: ترسل بوابة الدفع البيانات المشفرة إلى معالج الدفع أو البنك المستحوذ. يتحقق البنك من تفاصيل المعاملة ويوافق أو يرفض بناءً على حد ائتمان العميل وعوامل أخرى.
تأكيد المعاملة: ترسل بوابة الدفع رسالة الموافقة أو الرفض مرة أخرى إلى موقع التاجر. يُعلم التاجر العميل بحالة المعاملة.

متى أحتاج إلى بوابة دفع؟

تحتاج إلى بوابة دفع إذا كنت تخطط لقبول مدفوعات بطاقات الائتمان على موقعك أو تطبيق الجوال. إنها ضرورية لضمان معاملات آمنة وتوفير تجربة دفع سلسة لعملائك.

أكثر بوابات الدفع موثوقية في المملكة العربية السعودية

Moyasar: معروفة بسهولة التكامل وميزات الأمان القوية.
Payfort: بوابة دفع موثوقة وآمنة مستخدمة على نطاق واسع في الشرق الأوسط.
HyperPay: تقدم خيارات دفع واسعة وإجراءات أمان قوية.
Tap Payments: توفر تجربة دفع سلسة مع طرق دفع متعددة.

دمج خطوة بخطوة لدفع Moyasar عبر الويب باستخدام بطاقات الائتمان

الخطوة 1: إعداد حساب Moyasar الخاص بك

التسجيل/تسجيل الدخول: قم بزيارة Moyasar وسجل للحصول على حساب جديد أو سجل الدخول إذا كان لديك حساب بالفعل.
الحصول على مفاتيح API: بعد تسجيل الدخول، انتقل إلى لوحة التحكم. اذهب إلى قسم API Keys وانسخ Publishable Key و Secret Key. ستُستخدم هذه المفاتيح لمصادقة طلباتك.

الخطوة 2: إضافة نص Moyasar إلى صفحة الويب الخاصة بك

أضف مكتبة JavaScript الخاصة بـ Moyasar في ملف HTML الخاص بك. أضف علامة النص التالية داخل قسم <head>:

<head>
    <!-- مكتبة Moyasar JS -->
    <script src="https://cdn.moyasar.com/mpf/0.3.0/moyasar.min.js"></script>
</head>

الخطوة 3: إنشاء نموذج دفع

أنشئ نموذجاً لجمع تفاصيل الدفع من المستخدمين. إليك مثالاً أساسياً:

<form id="payment-form">
    <div class="form-group">
        <label for="card-name">اسم حامل البطاقة</label>
        <input type="text" id="card-name" placeholder="محمد أحمد" required>
    </div>
    <div class="form-group">
        <label for="card-number">رقم البطاقة</label>
        <input type="text" id="card-number" placeholder="4242 4242 4242 4242" required>
    </div>
    <div class="form-group">
        <label for="expiry-month">شهر انتهاء الصلاحية</label>
        <input type="text" id="expiry-month" placeholder="MM" required>
    </div>
    <div class="form-group">
        <label for="expiry-year">سنة انتهاء الصلاحية</label>
        <input type="text" id="expiry-year" placeholder="YY" required>
    </div>
    <div class="form-group">
        <label for="cvv">CVV</label>
        <input type="text" id="cvv" placeholder="123" required>
    </div>
    <button type="submit">ادفع الآن</button>
</form>

الخطوة 4: تهيئة دفع Moyasar

أضف نصاً للتعامل مع إرسال النموذج ومعالجة الدفع باستخدام API الخاص بـ Moyasar:

<script>
document.getElementById('payment-form').addEventListener('submit', function(event) {
    event.preventDefault();
 
    const cardName = document.getElementById('card-name').value;
    const cardNumber = document.getElementById('card-number').value;
    const expiryMonth = document.getElementById('expiry-month').value;
    const expiryYear = document.getElementById('expiry-year').value;
    const cvv = document.getElementById('cvv').value;
 
    Moyasar.init({
        element: '#payment-form',
        amount: 1000, // المبلغ بالهللات (مثال: 1000 هللة = 10 ريال سعودي)
        currency: 'SAR',
        description: 'وصف الدفع',
        publishable_api_key: 'YOUR_PUBLISHABLE_KEY',
        on_success: function(response) {
            console.log('نجح الدفع:', response);
        },
        on_failure: function(error) {
            console.error('فشل الدفع:', error);
        }
    });
 
    Moyasar.pay({
        method: 'creditcard',
        creditcard: {
            name: cardName,
            number: cardNumber,
            month: expiryMonth,
            year: expiryYear,
            cvv: cvv
        }
    });
});
</script>

الخطوة 5: التعامل مع استجابة الدفع

ستتعامل callbacks الخاصة بـ on_success و on_failure مع استجابة الدفع. يمكنك تخصيص هذه الدوال لعرض رسائل مناسبة للمستخدم أو اتخاذ إجراءات إضافية بناءً على حالة الدفع.

الخطوة 6: اختبار تكاملك

قبل البث المباشر، اختبر تكاملك باستخدام تفاصيل بطاقات الاختبار المقدمة من Moyasar. تأكد من التحقق من سيناريوهات مختلفة مثل المدفوعات الناجحة والمدفوعات الفاشلة ومعالجة الأخطاء.

الخطوة 7: الانطلاق

بمجرد اختبار تكاملك بشكل شامل، استبدل Publishable Key و Secret Key بمفاتيحك الحية من لوحة تحكم Moyasar. تكاملك الآن جاهز لقبول المدفوعات الحية.

الخلاصة

باتباع هذه الخطوات، يمكنك دمج نظام الدفع عبر الويب من Moyasar باستخدام بطاقات الائتمان في تطبيق الويب الخاص بك. لمزيد من المعلومات التفصيلية والتكوينات المتقدمة، راجع وثائق Moyasar.

إذا واجهت أي مشاكل أو احتجت إلى مساعدة إضافية، فريق دعم Moyasar متاح لمساعدتك. برمجة سعيدة!

دمج الدفع عبر الويب من Moyasar باستخدام بطاقات الائتمان