كيف يمكنني انشاء حقل بطاقة ائتمانية تسحب $

Zen Eddin Allaham · 17 مايو

Mustafa Suleiman · 17 مايو

هل تقصد فعليًا؟ أم كود HTML كشكل فقط؟ سأفترض HTML لأنّ بوابة الدفع أمر متقدم ويحتاج إلى استخدام أحد مزودي الخدمة مثل stripe وغيره.

سيكون الكود كالتالي:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج بطاقة ائتمان</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
            
        }
        .credit-card-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 350px;
        }
        .credit-card-form h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        .form-group input[type="text"],
        .form-group input[type="number"], /* أو tel للوحة مفاتيح رقمية أفضل على الجوال */
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /*  لتضمين padding و border ضمن العرض الكلي */
        }
        .expiry-group {
            display: flex;
            gap: 10px;
        }
        .expiry-group .form-group {
            flex: 1;
        }
        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <div class="credit-card-form">
        <h2>نموذج إدخال بيانات بطاقة ائتمان</h2>


        <form action="#" method="POST" onsubmit="alert('تم إرسال النموذج (للعرض فقط، لم يتم إرسال أي بيانات فعلية أو معالجتها)!'); return false;">
            <div class="form-group">
                <label for="card-number">رقم البطاقة:</label>
                <input type="text" id="card-number" name="cardNumber" placeholder="xxxx xxxx xxxx xxxx"
                       pattern="\d{4} ?\d{4} ?\d{4} ?\d{4}" maxlength="19" required>
            </div>

            <div class="form-group">
                <label for="card-holder">اسم صاحب البطاقة:</label>
                <input type="text" id="card-holder" name="cardHolder" placeholder="الاسم كما يظهر على البطاقة" required>
            </div>

            <div class="expiry-group">
                <div class="form-group">
                    <label for="expiry-month">شهر انتهاء الصلاحية:</label>
                    <select id="expiry-month" name="expiryMonth" required>
                        <option value="">اختر الشهر</option>
                        <option value="01">01 - يناير</option>
                        <option value="02">02 - فبراير</option>
                        <option value="03">03 - مارس</option>
                        <option value="04">04 - أبريل</option>
                        <option value="05">05 - مايو</option>
                        <option value="06">06 - يونيو</option>
                        <option value="07">07 - يوليو</option>
                        <option value="08">08 - أغسطس</option>
                        <option value="09">09 - سبتمبر</option>
                        <option value="10">10 - أكتوبر</option>
                        <option value="11">11 - نوفمبر</option>
                        <option value="12">12 - ديسمبر</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="expiry-year">سنة انتهاء الصلاحية:</label>
                    <select id="expiry-year" name="expiryYear" required>
                        <option value="">اختر السنة</option>
                        <!-- تستطيع إضافة المزيد من السنوات هنا باستخدام JavaScript إذا أردت -->
                        <option value="2024">2024</option>
                        <option value="2025">2025</option>
                        <option value="2026">2026</option>
                        <option value="2027">2027</option>
                        <option value="2028">2028</option>
                        <option value="2029">2029</option>
                        <option value="2030">2030</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="cvv">CVV/CVC:</label>
                <input type="text" id="cvv" name="cvv" placeholder="123" pattern="\d{3,4}" maxlength="4" required>
            </div>

            <button type="submit" class="submit-btn">إرسال (تجريبي)</button>
        </form>
    </div>

</body>
</html>

Zen Eddin Allaham · 17 مايو

ليس مجرد للشكل اريدها ان تكون فعالة

محمد_عاطف · 17 مايو

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

أشهر بوابة للدفع من خلال البطاقة الإئتمانية هي stripe و paypal .

ويمكنك استعمال stripe من هنا https://stripe.com/

عبدالباسط ابراهيم · 17 مايو

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

https://stripe.com/

وإا كنت تسأحل بالنسبة للجزء الخاص بال ui فيمكنك البحث عن credit card input html css وستظهر لك العديد من التصميمات الجاهزة لهذا الحقل .

Zen Eddin Allaham · 17 مايو

كيف استخدم هذا الموقع /https://stripe.com

محمد_عاطف · 17 مايو

بتاريخ 5 دقائق مضت قال Zen:

كيف استخدم هذا الموقع /https://stripe.com

يمكنك قراءة الإجابة التالية :

كيف يمكنني انشاء حقل بطاقة ائتمانية تسحب $

السؤال

Zen Eddin Allaham

6 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Zen Eddin Allaham

محمد_عاطف

عبدالباسط ابراهيم

Zen Eddin Allaham

محمد_عاطف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية