اضافة طرق الدفع (API) الى المتجر الالكترونى

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

فبعد التسجيل في مزود خدمة الدفع مثل Stripe أو PayPal ستحصل على مفاتيح API الخاصة بك.

ستجدها غالبا في لوحة التحكم الخاصة بالمزود وتتضمن هذه المفاتيح مفتاح Publishable API ومفتاح Secret API.

هنا نأتي لمرحلة إعداد نموذج الدفع، بحيث يمكنك إنشاء نموذج دفع بسيط باستخدام HTML و PHP. على سبيل المثال:

  <form action="process_payment.php" method="POST">
       <input type="text" name="card_number" placeholder="Card Number">
       <input type="text" name="expiry_date" placeholder="Expiry Date">
       <input type="text" name="cvv" placeholder="CVV">
       <button type="submit">Pay Now</button>
   </form>

ثم ننتقل إلى مرحلة ربط النموذج بواجهة برمجة التطبيقات (API) لمزود الدفع:
  هنا نذهب إلى ملف PHP (مثلا process_payment.php)، يمكنك استخدام مكتبة Stripe لربط النموذج بواجهة API لـ Stripe. بهذا الشكل:
 

  <?php
   require_once('vendor/autoload.php'); // تحميل ملفات Stripe
   \Stripe\Stripe::setApiKey('your_secret_key');

   if ($_SERVER['REQUEST_METHOD'] == 'POST') {
       $token = $_POST['stripeToken'];

       $charge = \Stripe\Charge::create([
           'amount' => 1000, // المبلغ بالسنت
           'currency' => 'usd',
           'source' => $token,
           'description' => 'Payment for services'
       ]);

       // يتم معالجة الدفع بنجاح
       echo 'Payment processed successfully';
   }
   ?>

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

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

مرحبا

لإضافة طرق دفع مثل فيز وماستركارد إلى موقعك الإلكتروني المستضيف على خادم عادي يتعين عليك اتباع بعض الخطوات الأساسية يتطلب ذلك تضمين بوابة دفع تدعم هذه البطاقات وربطها بموقع الويب الخاص بك الخطوات العامة تشمل:

 اختيار بوابة دفع
    اختر بوابة دفع تدعم فيزا وماستركارد بعض الحلول الشهيرة تشمل Stripe PayPal Braintree وغيرها

 إنشاء حساب تاجر
    سجل حساب تاجر على البوابة التي اخترتها اتبع التعليمات وقد تحتاج إلى تقديم بعض المعلومات الضرورية

 احصل على مفاتيح API
    بعد تسجيل الدخول إلى حسابك على البوابة احصل على مفاتيح API الضرورية هناك مفتاح عام وآخر سري

 تكامل البوابة مع موقعك
    استخدم لغة البرمجة التي تستخدمها موقعك (مثل PHP Nodejs Python) لتكامل البوابة مع موقعك قد يكون هناك SDKs (مكتبات تطوير البرمجيات) متاحة لسهولة التكامل

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

 تجربة الدفع
    قم بتجربة الدفع باستخدام بطاقات اختبار أو وضع التجربة المقدم من البوابة

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

 امتثال الأمان
    تأكد من اتباع متطلبات الأمان لحماية بيانات البطاقة الائتمان وامتثال للمعايير الأمانية مثل PCI DSS

 النشر
    بمجر التأكد من عملية الدفع بشكل صحيح وآمن نشر تحديثات موقعك ليتمكن الزوار من الدفع باستخدام فيزا وماستركارد

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

اولا عليك اختيار مزود خدمة بوابة الدفع مثل (paypal ,stripe,paymobe) كل بوابة دفع تختلف طريقة عمل التكامل معها وتختلف ايضا في شروطها و نسبة العموله علي كل تحويل ويجب علي الانتبه لها قبل اختيار بوابة الدفع 
 

Paypal:

• منصة عالمية مشهورة مع قاعدة مستخدمين كبيرة.
• سهلة الاستخدام والتكامل مع العديد من المنصات.
• تدعم العديد من العملات واللغات.
• رسوم معالجة عالية نسبيًا.
• قد تواجه بعض القيود في بعض الدول.

Stripe:

• منصة حديثة مع واجهة برمجة تطبيقات قوية.
• تدعم العديد من العملات واللغات.
• رسوم معالجة تنافسية.
• سهلة الاستخدام والتكامل مع العديد من المنصات.

Paymob:

• منصة مصرية متخصصة في معالجة المدفوعات في مصر والمنطقة العربية.
• تدعم العديد من العملات العربية.
• رسوم معالجة تنافسية.
• سهلة الاستخدام والتكامل مع العديد من المنصات العربية.
• قد تواجه مشاكل في الدول خارج مصر والمنطقة العربية

مثال اذا كنت تعمل مع لارافل وتريد تكامل مع stripe هي تدعم الفيزا و الماستركارد 
1. يجب عليك الدخول الي المنصه وانشاء حساب
2. الاتجاه الي الاعدادت و جلب api key
3 . تبداء في التكامل مع منصتك يمكنك اتباع هذه الخطوات 

داخل الكنترول الخاص بك ضع هذه الداله 
 

public function stripePost(Request $request)
{


    Stripe::setApiKey(env('STRIPE_SECRET_KEY'));

    try {
        // التحقق من صحة بيانات الطلب
        $validatedData = $request->validate([
            'order_id' => 'required|integer',
        ]);
        
        // إنشاء عملية شحن باستخدام مكتبة Stripe
        Charge::create([
            "amount" => $request->total * 100, // تحويل المبلغ إلى سنت لاستخدامه مع Stripe
            "currency" => "aed", // العملة المستخدمة (درهم إماراتي)
            "source" => $request->stripeToken, // المعرف الفريد للبطاقة المستخدمة
        ]);
    }

في الصفحه المسؤاله عن الوجهه الاماميه يمكنك وضع الحقول المسؤله عن ادخال بيانات وسيلة الدفع 

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <div class="container">
        <header class="site-header">
            <div class="logo-container">
                <img src="{{ asset('assets/img/Logo.png') }}" alt="Khayma Logo" class="site-logo" />
            </div>
        </header>
     
        <!-- الرسالة في حالة نجاح العملية -->
        @if (Session::has('success'))
            <div class="alert alert-success text-center">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                <p>{{ Session::get('success') }}</p>
            </div>
        @endif
        <!-- الرسالة في حالة فشل العملية -->
        @if (Session::has('error'))
            <div class="alert alert-danger text-center">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                <p>{{ Session::get('error') }}</p>
            </div>
        @endif

        <!-- نموذج الدفع -->
        <form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation"
            data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_PUBLISHABLE_KEY') }}" id="payment-form">
            @csrf

            <!-- حقل اسم صاحب البطاقة -->
            <div class='form-row row'>
                <div class='col-xs-12 form-group required'>
                    <label class='control-label'>Name on Card</label>
                    <input class='form-control' size='4' type='text'>
                </div>
            </div>

            <!-- حقل رقم البطاقة -->
            <div class='form-row row'>
                <div class='col-xs-12 form-group card required'>
                    <label class='control-label'>Card Number</label>
                    <input autocomplete='off' class='form-control card-number' size='20' type='text'>
                </div>
            </div>

            <!-- حقول تاريخ انتهاء الصلاحية ورمز التحقق -->
            <div class='form-row row'>
                <div class='col-xs-12 col-md-4 form-group cvc required'>
                    <label class='control-label'>CVC</label>
                    <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4'
                        type='text'>
                </div>
                <div class='col-xs-12 col-md-4 form-group expiration required'>
                    <label class='control-label'>EXP Month</label> <input class='form-control card-expiry-month'
                        placeholder='MM' size='2' type='text'>
                </div>
                <div class='col-xs-12 col-md-4 form-group expiration required'>
                    <label class='control-label'>EXP Year</label>
                    <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
                </div>
            </div>

            <!-- حقول مخفية لتخزين معرف الطلب والمبلغ الإجمالي -->
            <input type="hidden" name="order_id" value="{{ $order->id }}" hidden>
            <input type="hidden" name="total" value="{{ $order->total }}" hidden>
            
            <!-- رسالة الخطأ -->
            <div class='form-row row'>
                <div class='col-md-12 error form-group hide'>
                    <div class='alert-danger alert'>Please correct the errors and try again.</div>
                </div>
            </div>

            <!-- زر الدفع -->
            <div class="row">
                <div class="col-xs-12">
                    <button type="submit">Pay Now ({{ $order->total }} AED) </button>
                </div>
            </div>

        </form>
    </div>

</body>

<!-- تضمين مكتبة Stripe -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<!-- نص السكريبت للتحقق ومعالجة الدفع -->
<script type="text/javascript">
    $(function() {
        var $form = $(".require-validation");

        // تفعيل التحقق عند إرسال النموذج
        $('form.require-validation').bind('submit', function(e) {
            var $form = $(".require-validation"),
                inputSelector = ['input[type=email]', 'input[type=password]',
                    'input[type=text]', 'input[type=file]',
                    'textarea'
                ].join(', '),
                $inputs = $form.find('.required').find(inputSelector),
                $errorMessage = $form.find('div.error'),
                valid = true;

            $errorMessage.addClass('hide');

            $('.has-error').removeClass('has-error');
            $inputs.each(function(i, el) {
                var $input = $(el);
                if ($input.val() === '') {
                    $input.parent().addClass('has-error');
                    $errorMessage.removeClass('hide');
                    e.preventDefault();
                }
            });

            if (!$form.data('cc-on-file')) {
                e.preventDefault();
                // تعيين مفتاح نشر Stripe وإنشاء الرمز
                Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                Stripe.createToken({
                    number: $('.card-number').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: $('.card-expiry-month').val(),
                    exp_year: $('.card-expiry-year').val()
                }, stripeResponseHandler);
            }
        });

        // معالجة استجابة Stripe
        function stripeResponseHandler(status, response) {
            if (response.error) {
                $('.error')
                    .removeClass('hide')
                    .find('.alert')
                    .text(response.error.message);
            } else {
                var token = response['id'];

                // مسح قيم الحقول وإضافة الرمز كقيمة مخفية
                $form.find('input[type=text]').empty();
                $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                $form.get(0).submit();
            }
        }
    });
</script>

</html>