الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات لنموذج الدفع

Sam Dutton

يوضِّح لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج دفع آمن وسهل الاستخدام وسهل الاستخدام.

الخطوة 1: استخدام HTML على النحو المنشود

استخدام العناصر المصممة للوظيفة:

• <form>
• <section>
• <label>
• <input> و<select> و<textarea>
• <button>

كما ترى، تعمل هذه العناصر على تفعيل وظائف المتصفح المضمنة، وتحسين إمكانية الوصول، وإضافة معنى إلى الترميز الخاص بك.

• انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.

يُرجى الاطّلاع على ترميز HTML للنموذج في index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

يجب تضمين عناصر <input> لرقم البطاقة والاسم الظاهر على البطاقة وتاريخ انتهاء الصلاحية ورمز الأمان. وهي جميعها ملفوفة في عناصر <section>، ولكل منها تسمية. زر إكمال عملية الدفع بتنسيق HTML <button>. ستتعرّف لاحقًا في هذا الدرس التطبيقي على ميزات المتصفّح التي يمكنك استخدامها باستخدام هذه العناصر.

انقر على عرض التطبيق لمعاينة نموذج الدفع.

• هل النموذج يعمل بشكل جيد بما فيه الكفاية؟
• هل هناك أي شيء تريد تغييره لجعله يعمل بشكل أفضل؟
• ماذا عن الأجهزة الجوّالة؟

انقر على عرض المصدر للعودة إلى رمز المصدر.

الخطوة 2: التصميم للهاتف المحمول وسطح المكتب

رمز HTML الذي أضفته صالح، ولكن تصميم المتصفّح التلقائي يجعل النموذج صعبًا، لا سيما على الأجهزة الجوّالة. ولا يبدو رائعًا أيضًا.

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

انسخ كل صفحات CSS الواردة أدناه والصقها في ملف css/main.css الخاص بك.

وهذا قدر كبير من استخدام CSS! الأشياء الأساسية التي يجب أن تكون على دراية بها هي التغييرات التي تطرأ على الأحجام:

• تمت إضافة padding وmargin إلى المدخلات.
• تختلف القيم font-size والقيم الأخرى بالنسبة إلى أحجام إطارات العرض المختلفة.

عندما تكون مستعدًا، انقر على عرض التطبيق للاطّلاع على النموذج المُصمَّم. ستلاحظ أيضًا أنه تم تعديل الحدود، ويتم استخدام display: block; للتسميات بحيث تنتقل إلى سطر من تلقاء نفسها، ويمكن أن تكون الإدخالات بالعرض الكامل. تشرح أفضل ممارسات نموذج تسجيل الدخول مزايا هذا النهج بمزيد من التفصيل.

يتم استخدام أداة الاختيار :invalid للإشارة إلى الحالات التي يحتوي فيها أحد الإدخالات على قيمة غير صالحة. (ستستخدم هذا لاحقًا في الدرس التطبيقي حول الترميز).

تعتمد خدمة CSS على الأجهزة الجوّالة أولاً:

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

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

• هل النموذج بأكمله مرئي؟
• هل إدخالات النموذج كبيرة بما يكفي؟
• هل النص كله قابل للقراءة؟
• هل لاحظت أي اختلافات بين استخدام جهاز جوّال حقيقي وعرض النموذج في وضع الجهاز في "أدوات مطوري البرامج في Chrome"؟
• هل احتجت إلى تعديل نقاط الإيقاف؟

هناك عدة طرق لاختبار النموذج على أجهزة مختلفة:

• استخدام وضع الجهاز في "أدوات مطوري البرامج في Chrome" لمحاكاة الأجهزة الجوّالة
• أرسِل عنوان URL من جهاز الكمبيوتر إلى هاتفك.
• يمكنك استخدام خدمة، مثل BrowserStack، لاختبار مجموعة من الأجهزة والمتصفحات.

الخطوة 3: إضافة سمات لمساعدة المستخدمين في إدخال البيانات

فعّل المتصفّح لتخزين قيم الإدخال وملؤها تلقائيًا وتوفير إمكانية الوصول إلى ميزات مضمّنة للدفع والتحقّق من الصحة الآمنة.

أضِف سمات إلى النموذج في ملف index.html لكي يظهر على النحو التالي:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

اعرض تطبيقك مرّة أخرى ثم انقر على حقل رقم البطاقة. اعتمادًا على الجهاز والنظام الأساسي، قد ترى أداة اختيار تعرض طرق الدفع المخزنة للمتصفّح، مثل الطريقة الواردة أدناه.

بعد اختيار طريقة الدفع وإدخال رمز الأمان، يملأ المتصفّح النموذج تلقائيًا باستخدام قيم بطاقة الدفع autocomplete التي أضفتها إلى النموذج:

• cc-number
• cc-name
• cc-exp
• cc-csc

وتتحقق العديد من المتصفحات أيضًا من أرقام بطاقات الائتمان ورموز الأمان وتتأكّد من صحتها.

على الأجهزة الجوّالة، ستلاحظ أيضًا ظهور لوحة مفاتيح رقمية بمجرد النقر على حقل رقم البطاقة. هذا لأنك استخدمت inputmode="numeric". بالنسبة للحقول الرقمية، يسهّل ذلك إدخال الأرقام واستحيل إدخال أحرف غير رقمية، كما يدفع المستخدمين إلى تذكر نوع البيانات التي يدخلونها.

من المهم للغاية إضافة جميع قيم autocomplete المتاحة إلى طرق الدفع بشكل صحيح. من الشائع جدًا أن تفوِّت المواقع الإلكترونية القيمة autocomplete لتاريخ انتهاء صلاحية البطاقة والحقول الأخرى. إذا كانت قيمة autofill واحدة غير صحيحة أو غير متوفّرة، على المستخدمين استرداد بطاقتهم الفعلية لإدخال بيانات البطاقة يدويًا، ما قد يؤدي إلى خسارة إمكانية البيع. إذا لم تعمل ميزة الملء التلقائي لطرق الدفع بشكل صحيح، قد يقرر المستخدمون أيضًا الاحتفاظ بسجلّ من تفاصيل بطاقة الدفع على هواتفهم أو أجهزة الكمبيوتر، وهو أمر غير آمن للغاية.

حاوِل إرسال نموذج الدفع باستخدام حقل فارغ. يطلب المتصفح إكمال البيانات المفقودة. الآن، يمكنك إضافة حرف إلى القيمة في حقل رقم البطاقة ومحاولة إرسال النموذج. يحذّر المتصفّح من أنّ القيمة غير صالحة. يحدث ذلك لأنك استخدمت السمة pattern لتحديد قيم صالحة للحقل. يمكن تنفيذ الإجراء نفسه مع maxlength وغيرها من قيود التحقّق ولا حاجة إلى JavaScript.

من المفترض أن تظهر طريقة الدفع الآن على النحو التالي:

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

الخطوة 4: إيقاف زر الدفع بعد إرسال النموذج

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

أضِف ملف JavaScript التالي إلى ملف js/main.js:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

حاوِل إرسال نموذج الدفع لمعرفة ما سيحدث.

إليك الطريقة التي يجب أن يظهر بها الرمز الخاص بك في هذه المرحلة، مع إضافة بعض التعليقات ودالة validate():

• ستلاحظ أن JavaScript يتضمن تعليمة برمجية تم التعليق عليها للتحقق من صحة البيانات. يستخدم هذا الرمز Constraint أمثلة (واجهة برمجة تطبيقات التحقّق من صحة القيود) (وهي متوافقة على نطاق واسع) لإضافة عملية تحقُّق مخصَّصة والوصول إلى واجهة مستخدم المتصفِّح المُدمَجة لضبط التركيز وعرض الطلبات. قم بإلغاء التعليق على التعليمات البرمجية وتجربتها. يجب ضبط القيم المناسبة للسمتَين someregex وmessage، وضبط قيمة للسمة someField.

• ما بيانات الإحصاءات ومراقبة المستخدم الحقيقي التي يجب أن تراقبها لتحديد طرق تحسين النماذج؟

من المفترض أن تظهر الآن طريقة الدفع الكاملة على النحو التالي:

• تجربة النموذج على أجهزة مختلفة. ما هي الأجهزة والمتصفحات التي تستهدفها؟ كيف يمكن تحسين النموذج؟

تحقيق المزيد من الإنجازات

ننصحك بمراعاة ميزات النموذج الأساسية التالية التي لم يتم تناولها في هذا الدرس التطبيقي حول الترميز:

• رابط إلى بنود الخدمة ومستندات سياسة الخصوصية: وضِّح للمستخدمين كيفية حماية بياناتهم.

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

• "الإحصاءات" و"المراقبة الفعلية للمستخدم": يمكنك إتاحة اختبار أداء تصميم النموذج وسهولة استخدامه ومراقبته للمستخدمين.