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

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

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

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

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

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

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

الخطوة 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>

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

لقطةَا شاشة لنموذج دفع في 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.
ما هي بيانات الإحصاءات ومراقبة المستخدِمين الفعليين التي ستراقبها لتحديد طرق تحسين النماذج؟

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

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

التقدم إلى أبعد من ذلك

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

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