בדרך כלל, טופס התשלום הוא השלב האחרון לפני השלמת הרכישה. כדי לקבל מקסימום המרות, חשוב שאמצעי התשלום יהיה ידידותי למשתמש ומאובטח.
חשוב לוודא שהמשתמשים ידעו מה צריך למלא
הקפידו שטופס התשלום יהיה פשוט ככל האפשר, ויוצגו בו רק שדות חובה.
מציינים את הסכום לתשלום. לשם כך, הלחצן שליחה הוא אידיאלי.
<button>Pay $300.00</button>
כדאי להשתמש בניסוחים מובנים מאליהם לרכיבי <label>.
לדוגמה, כדאי לכתוב Security code (קוד אבטחה), ולא בראשי תיבות כמו CVV, שרק מותגים מסוימים משתמשים בהם.
איך לעזור למשתמשים להזין את פרטי התשלום שלהם
כדי להשיג מקסימום המרות, צריך לוודא שהמשתמשים יכולים למלא את טופס התשלום במהירות האפשרית.
בעזרת inputmode="numeric" בשדות של מספר הכרטיס וקוד האבטחה,
אפשר להציג מקלדת במסך שעברה אופטימיזציה להזנת מספרים.
כדי להבטיח שהדפדפנים יציעו מילוי אוטומטי, צריך להוסיף ערכים מתאימים של autocomplete לאמצעי הבקרה של אמצעי התשלום.
לשם כך יש להשתמש ב-autocomplete="cc-name" כדי לציין את השם,
autocomplete="cc-number" לציון מספר הכרטיס וב-autocomplete="cc-exp" לציון תאריך התפוגה.
מוודאים שהמשתמשים מזינים את הנתונים בפורמט הנכון
צריך להשתמש במאפיין required בכל <input> כדי להבטיח שהמשתמשים ימלאו את הטופס במלואו.
קודי האבטחה של כרטיסי התשלום יכולים להכיל שלוש או ארבע ספרות.
צריך להשתמש ב-minlength="3" וב-maxlength="4" כדי לאפשר 3-4 ספרות בלבד.
צריך לוודא שהמשתמשים מזינים מספרים רק של מספר הכרטיס וקוד האבטחה.
באמצעות pattern="[0-9 ]+" המשתמשים יכולים לכלול רווחים כשהם מזינים מספר כרטיס, כי כך המספרים מוצגים בכרטיסים הפיזיים.