غالبًا ما تكون طريقة الدفع هي الخطوة الأخيرة قبل إكمال عملية الشراء. لزيادة الإحالات الناجحة إلى أقصى حد، تأكَّد من أنّ نموذج الدفع سهل الاستخدام وآمن.
التأكد من أن المستخدمين يعرفون ما يجب ملؤه
اجعل طريقة الدفع بسيطة قدر الإمكان، يعرض الحقول المطلوبة فقط.
حدِّد مبلغ الدفعة. يُعدّ الزر إرسال مثاليًا لذلك.
<button>Pay $300.00</button>
استخدِم صياغة ذاتية الشرح لعناصر <label>.
على سبيل المثال، يمكنك استخدام "رمز الأمان"
بدلاً من اختصار مثل "CVV" لا تستخدمها سوى بعض العلامات التجارية.
مساعدة المستخدمين على إدخال تفاصيل الدفع
لتحقيق الحد الأقصى من الإحالات الناجحة، تأكَّد من أنّه بإمكان المستخدمين ملء نموذج الدفع في أسرع وقت ممكن.
استخدام inputmode="numeric" في حقلَي رقم البطاقة ورمز الأمان
لعرض لوحة مفاتيح محسَّنة على الشاشة لإدخال الأرقام.
أضِف قيم autocomplete المناسبة لعناصر التحكّم في نموذج الدفع لضمان توفّر ميزة الملء التلقائي في المتصفّحات.
استخدِم autocomplete="cc-name" للاسم،
autocomplete="cc-number" لرقم البطاقة وautocomplete="cc-exp" لتاريخ انتهاء الصلاحية.
التأكّد من إدخال المستخدمين للبيانات بالتنسيق الصحيح
استخدِم سمة required لكل <input> لضمان ملء المستخدمين للنموذج بالكامل.
يمكن أن تتألف رموز أمان بطاقات الدفع من ثلاثة أو أربعة أرقام.
استخدِم minlength="3" وmaxlength="4" للسماح بثلاثة أرقام وأربعة أرقام فقط.
تأكَّد من أنّ المستخدمين لا يدخلون إلا أرقام البطاقة ورمز الأمان.
يمكنك استخدام pattern="[0-9 ]+" للسماح للمستخدمين بتضمين مسافات عند إدخال رقم البطاقة.
حيث هذه هي الطريقة التي يتم بها عرض الأرقام على البطاقات المادية.