تُعدّ نماذج الدفع الجزء الأكثر أهمية في عملية الدفع. يُعدّ التصميم السيئ لنموذج الدفع سببًا شائعًا لتراجع المتسوّقين عن إتمام عملية الشراء.
أنشئ نموذجًا يسهّل على المستخدمين قدر الإمكان إدخال تفاصيل الدفع على أجهزة الكمبيوتر والأجهزة الجوّالة. تأكَّد من أنّ النموذج يستفيد إلى أقصى حد من ميزات المتصفّح المضمّنة للملء التلقائي والتحقّق من الصحة وقيود إدخال البيانات.
كيفية الإعداد
في ما يلي أهم الإرشادات لإنشاء نماذج دفع ناجحة.
استخدام ترميز HTML صالح ومفيد
استفِد إلى أقصى حد من العناصر والسمات المصمّمة لإنشاء النماذج:
<form>و<input>و<label>و<button>typeوautocompleteوinputmode
تتيح هذه العناصر وظائف المتصفّح المضمّنة، وتحسّن أدوات تسهيل الاستخدام، وتضيف معنى إلى الترميز.
استخدِم العنصر <label> لتصنيف حقول النماذج لإدخال البيانات
لتصنيف <input> أو <select> أو <textarea>، استخدِم <label>. يمكنك ربط تصنيف بإدخال من خلال منح سمة for للتصنيف القيمة نفسها لسمة id للإدخال.
الاستفادة إلى أقصى حد من سمات HTML
سهِّل على المستخدمين إدخال البيانات باستخدام سمة عنصر <input> المناسبة <type> لتوفير لوحة المفاتيح المناسبة على الأجهزة الجوّالة وتفعيل عملية التحقّق الأساسية المضمّنة في المتصفّح.
يجب دائمًا استخدام type="email" لعناوين البريد الإلكتروني وtype="tel" لأرقام الهواتف.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
يجب أن يتضمّن كل عنصر <input> و<select> و<textarea> سمة autocomplete مناسبة لتحسين تسهيل الاستخدام ومساعدة المستخدمين في تجنُّب إعادة إدخال البيانات.
اجعل الأزرار مفيدة
استخدِم <button> للأزرار. يمكنك أيضًا استخدام <input type="submit">، ولكن لا تستخدِم div أو أي عنصر عشوائي آخر يعمل كزر. توفر عناصر الأزرار سلوكًا يسهل الوصول إليه، ووظيفة إرسال نموذج مدمجة، ويمكن تصميمها بسهولة.
امنح كل زر إرسال نموذج قيمة توضح ما يفعله. لكل خطوة نحو الدفع، استخدِم عبارة وصفية تحث المستخدم على اتخاذ إجراء وتوضّح مستوى التقدم وتجعل الخطوة التالية واضحة. على سبيل المثال، يمكنك تسمية زر الإرسال في نموذج عنوان التسليم الانتقال إلى الدفع بدلاً من متابعة أو حفظ.
استخدام حقل واحد لإدخال الاسم كلما أمكن ذلك
اسمح للمستخدمين بإدخال أسمائهم باستخدام إدخال واحد، ما لم يكن لديك سبب وجيه لتخزين الأسماء الأولى أو أسماء العائلة أو الألقاب أو أجزاء الأسماء الأخرى بشكل منفصل. يؤدي استخدام حقل واحد لإدخال الاسم إلى جعل النماذج أقل تعقيدًا، ويتيح استخدام ميزة "القص واللصق"، ويجعل ميزة "الملء التلقائي" أبسط.
السماح بالأسماء الدولية لإجراء عملية التحقّق، تجنَّب استخدام التعبيرات العادية التي تتطابق مع الأحرف اللاتينية فقط. يستبعد خيار "الأحرف اللاتينية فقط" المستخدمين الذين تتضمّن أسماؤهم أو عناوينهم أحرفًا غير لاتينية. بدلاً من ذلك، اسمح بمطابقة أحرف Unicode، وتأكَّد من أنّ الواجهة الخلفية تتيح استخدام Unicode بشكل آمن كإدخال وإخراج. تتوافق المتصفّحات الحديثة مع ترميز Unicode في التعبيرات العادية.
السماح بمجموعة متنوعة من تنسيقات العناوين
عند إضافة حقول نموذج لعنوان في نموذج دفع، يجب الانتباه إلى تنوّع تنسيقات العناوين، حتى داخل بلد واحد. لا تضع افتراضات حول العناوين "العادية".
إذا كان ذلك ممكنًا ضمن متطلبات البيانات، ننصحك باستخدام عنصر <textarea> واحد للعنوان. هذا هو الخيار الأكثر مرونة لمجموعة متنوعة من تنسيقات العناوين المحلية والدولية.
استخدام ميزة "الإكمال التلقائي" لعنوان إرسال الفواتير
يتم ضبط عنوان إرسال الفواتير تلقائيًا ليكون مطابقًا لعنوان التسليم. قلِّل الفوضى المرئية من خلال توفير رابط لتعديل عنوان إرسال الفواتير (أو استخدِم عناصر الملخّص والتفاصيل) بدلاً من عرض عنوان إرسال الفواتير في نموذج.
استخدِم قيم الإكمال التلقائي المناسبة لعنوان إرسال الفواتير، تمامًا كما تفعل مع عنوان الشحن، لكي لا يضطر المستخدم إلى إدخال البيانات أكثر من مرة. أضِف كلمة بادئة إلى سمات الإكمال التلقائي إذا كانت لديك قيم مختلفة للإدخالات التي تحمل الاسم نفسه في أقسام مختلفة. على سبيل المثال:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
عرض مستوى تقدّم عملية الدفع
في كل خطوة من خطوات الدفع، استخدِم عناوين صفحات وقيم أزرار وصفية توضّح ما يجب فعله الآن، وما هي خطوة الدفع التالية.
استخدِم السمة enterkeyhint في حقول الإدخال في النماذج لضبط تصنيف مفتاح Enter في لوحة المفاتيح على الأجهزة الجوّالة. على سبيل المثال، يمكنك استخدام enterkeyhint="previous" وenterkeyhint="next" ضمن نموذج متعدّد الصفحات، وenterkeyhint="done" للإدخال النهائي في النموذج، وenterkeyhint="search" لإدخال البحث.
مساعدة المستخدمين في تجنُّب إعادة إدخال بيانات الدفع
تأكَّد من إضافة قيم autocomplete المناسبة في نماذج بطاقات الدفع. بدون ميزة "الإكمال التلقائي"، قد يحتفظ المستخدمون بسجلّ مادي لتفاصيل بطاقة الدفع أو يخزّنونها بشكل غير آمن.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
عرض تلميحات التنسيق فوق حقل الإدخال
إذا كان الحقل يتطلّب تنسيقًا معيّنًا (مثل تاريخ انتهاء صلاحية MM/YY)، ضَع التلميح في عنصر مرئي أعلى حقل الإدخال واربطهما باستخدام aria-describedby، كما هو موضّح في مثال cc-exp أعلاه. يتم إخفاء التلميحات التي تظهر أسفل حقل الإدخال بسهولة بواسطة لوحة المفاتيح على الأجهزة الجوّالة أو من خلال نافذة الملء التلقائي المنبثقة في اللحظة التي يحتاج فيها المستخدم إليها.
لا تعتمِد على السمة placeholder كتلميح التنسيق الوحيد، ولا تستخدِمها أبدًا بدلاً من <label>: يتم إخفاء النص المؤقت بمجرد أن يبدأ المستخدم في الكتابة، لذلك لا يمكن التحقق منه أثناء التعديل. يمكن استخدام العنصر النائب كإشارة إضافية إلى جانب التصنيف والتلميح الثابت.
عدم إخفاء رمز الأمان
استخدِم type="text" مع inputmode="numeric" لرمز أمان البطاقة، وليس type="password". لا يمكن للمستخدمين التحقّق من رمز مقنّع مكوّن من ثلاثة أو أربعة أرقام بحثًا عن أخطاء إملائية، لذلك لا يتم اكتشاف الرقم الذي تمت كتابته بشكل خاطئ إلا بعد رفض الدفع، ويضيف القناع حماية قليلة لأنّ الرمز مطبوع على البطاقة التي يحملها المستخدم.
استخدام حقل إدخال واحد لبطاقة الدفع وأرقام الهواتف
بالنسبة إلى بطاقات الدفع وأرقام الهواتف، استخدِم حقل إدخال واحدًا: لا تقسّم الرقم إلى أجزاء. يسهّل ذلك على المستخدمين إدخال البيانات، ويبسّط عملية التحقّق من صحتها، ويتيح للمتصفّحات استخدام ميزة الملء التلقائي. ننصحك باتّباع الخطوات نفسها مع البيانات الرقمية الأخرى، مثل أرقام التعريف الشخصية ورموز المصارف.
التحقّق بعناية
يجب التحقّق من صحة إدخال البيانات في الوقت الفعلي وقبل إرسال النموذج. تتمثل إحدى طرق إجراء ذلك في إضافة سمة نمط إلى حقل إدخال بطاقة الدفع. إذا حاول المستخدم إرسال نموذج الدفع بقيمة غير صالحة، سيعرض المتصفّح رسالة تحذير ويركّز على حقل الإدخال.
ومع ذلك، يجب أن يكون التعبير العادي للنمط مرنًا بما يكفي للتعامل مع نطاق أطوال أرقام بطاقات الدفع: من 14 رقمًا (أو ربما أقل) إلى 20 (أو أكثر). تتألف رموز أمان البطاقات (المعروفة أيضًا باسم CSC أو CVC أو CVV أو أسماء أخرى) من 3 أو 4 أرقام.
اسمح للمستخدمين بتضمين مسافات عند إدخال رقم بطاقة دفع جديدة، لأنّ هذه هي طريقة عرض الأرقام على البطاقات المطبوعة. هذا الإجراء أفضل للمستخدم (لن تضطر إلى إخباره بأنّه "ارتكب خطأً")، ومن غير المرجّح أن يقاطع مسار الإحالة الناجحة، ومن السهل إزالة المسافات في الأرقام قبل المعالجة.
مساعدة المستخدمين في تجنُّب تفويت حقول البيانات عن طريق الخطأ
أضِف السمة required إلى الحقول الإلزامية. تطلب المتصفحات الحديثة تلقائيًا التركيز على البيانات المفقودة وتعيينها.
استراتيجيات احتياطية
الملء التلقائي هو تحسين تدريجي. في المتصفّحات التي لا تتيح ميزة "الملء التلقائي"، سيحتاج المستخدمون ببساطة إلى إدخال تفاصيل الدفع يدويًا. ستظل قيود HTML الدلالية (مثل type وinputmode وpattern وrequired) تعمل بشكل مناسب للتحقّق من صحة إدخال المستخدم وتوفير لوحات المفاتيح الافتراضية الصحيحة.