تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Sam Dutton

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

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

استخدِم العناصر المصمّمة لهذا الغرض:

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

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

انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.

اطّلِع على ملف 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>. في وقت لاحق من هذا الدرس التطبيقي حول الترميز، ستتعرّف على ميزات المتصفّح التي يمكنك الوصول إليها باستخدام هذه العناصر.

ملاحظة: لا تحتوي عناصر <input> على علامات إغلاق. ويعود السبب في ذلك إلى أنّها عناصر فارغة (فارغة): فهي لا تحتوي على أي محتوى. إنّ استخدام الحرف "/" في نهاية عنصر فارغ هو اختياري: يمكنك استخدام <input> أو <input />.

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

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

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

الخطوة 2: التصميم للأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي

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

عليك التأكّد من أنّ نماذجك تعمل بشكل جيد على مجموعة من الأجهزة من خلال تعديل المسافة البادئة والهوامش وأحجام الخطوط.

انسخ كل ملف CSS أدناه والصقه في ملف css/main.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>

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

لقطةَا شاشة لنموذج دفع في Chrome على هاتف Android يعرض أحدهما أداة اختيار بطاقة الدفع المدمجة في المتصفّح، ويعرض الآخر القيم النائبة التي تم ملؤها تلقائيًا. — أداة اختيار طريقة الدفع والملء التلقائي المضمّنان في المتصفّح

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

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

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

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

من المهم جدًا إضافة جميع قيم 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 Validation API (التي تتوفّر على نطاق واسع) لإضافة ميزة فحص مخصّصة، والوصول إلى واجهة مستخدِم المتصفّح المدمَجة لضبط التركيز وعرض طلبات. أزِل التعليقات من الرمز البرمجي و جرِّبه. عليك ضبط قيم مناسبة لكل من someregex وmessage، وضبط قيمة لسمة someField.
ما هي بيانات الإحصاءات ومراقبة المستخدِمين الفعليين التي ستراقبها لتحديد طرق تحسين النماذج؟

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

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

مزيد من المعلومات

وننصحك بالاطّلاع على الميزات المهمة التالية للنموذج والتي لم يتم تناولها في هذا الدليل التعليمي:

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