Codelab שיטות מומלצות לשימוש בטופסי תשלום

Sam Dutton

כדי לבצע את ה-Codelab הזה, פותחים את הגליץ' הזה בכרטיסייה שנייה.

בשיעור הזה תלמדו איך ליצור אמצעי תשלום מאובטח, נגיש וקל לשימוש.

זהירות: המאמר הזה עוסק בשיטות מומלצות לשימוש בטופסי תשלום בממשק המשתמש. הוא לא מסביר איך להטמיע עסקאות באתר. מידע נוסף על הוספת פונקציונליות תשלום לאתר זמין במאמר תשלומים באינטרנט.

שלב 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>, ולכל אחד מהם יש תווית. הלחצן Complete Payment הוא HTML <button>. מאוחר יותר ב-Codelab הזה תלמד על תכונות הדפדפן שאפשר לגשת אליהן באמצעות הרכיבים האלו.

הערה: לרכיבי <input> אין תגים סוגרים. הסיבה לכך היא שהם רכיבים void (ריקים): אין בהם תוכן כשלעצמם. התו "/" בסוף רכיב ריק הוא אופציונלי: מותר להשתמש בתו <input> או <input />.

לוחצים על הצגת האפליקציה כדי לראות תצוגה מקדימה של טופס התשלום.

• האם הטופס פועל כמו שצריך?
• האם יש משהו שהיית רוצה לשנות כדי שהוא יעבוד טוב יותר?
• מה קורה בנייד?

לוחצים על הצגת מקור כדי לחזור לקוד המקור.

שלב 2: עצבו את האתר כך שיתאים לניידים ולמחשבים

ה-HTML שהוספת תקין, אבל סגנון ברירת המחדל של הדפדפן מקשה על השימוש בטופס, במיוחד בניידים. גם זה לא נראה טוב מדי.

חשוב לוודא שהטפסים פועלים היטב במגוון מכשירים על ידי התאמת המרווח הפנימי, השוליים וגודל הגופנים.

מעתיקים את כל ה-CSS שבהמשך ומדביקים אותו בקובץ css/main.css משלכם.

זה הרבה CSS! השינויים העיקריים שצריך לשים לב אליהם הם:

• padding ו-margin מתווספות לערכי הקלט.
• font-size וערכים אחרים שונים עבור גדלים שונים של אזורי תצוגה.

כשהכול מוכן, לוחצים על הצגת האפליקציה כדי לראות את הטופס המעוצב. כמו כן, תוכלו לראות שהגבולות עברו התאמה, ורכיב display: block; משמש לתוויות, כך שהן מופיעות בנפרד בשורה, וקלט יכול להיות ברוחב מלא. בשיטות מומלצות לשימוש בטופסי כניסה מוסבר בפירוט על היתרונות של הגישה הזו.

הבורר :invalid משמש כדי לציין מתי לקלט יש ערך לא חוקי. (תשתמשו בו מאוחר יותר ב-codelab).

שירות ה-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>

מציגים שוב את האפליקציה ומקישים או לוחצים על השדה מספר הכרטיס. בהתאם למכשיר ולפלטפורמה, ייתכן שתראו בורר שמציג את אמצעי התשלום השמורים בדפדפן, כמו זה שבהמשך.

בורר תשלומים ומילוי אוטומטי מובנים בדפדפן.

אחרי שבוחרים אמצעי תשלום ומזינים את קוד האבטחה, הדפדפן ממלא באופן אוטומטי את הטופס באמצעות הערכים של כרטיס התשלום autocomplete שהוספתם לטופס:

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

בנוסף, דפדפנים רבים בודקים ומאשרים את התוקף של מספרי כרטיסי האשראי וקודי האבטחה.

הערה: אל דאגה! יכול להיות שהדפדפן יוכל למלא אוטומטית את הטופס עם נתוני כרטיס תשלום שמורים, אבל אי אפשר לבצע תשלום ושום נתונים לא יועברו ולא יישמרו.

בנייד, תבחינו גם במקלדת נומרית כשתקישו על השדה מספר כרטיס. הסיבה לכך היא שהשתמשת ב-inputmode="numeric". בשדות מספריים קל יותר להזין מספרים ואי אפשר להזין תווים שאינם מספריים, והמשתמשים מעודדים את המשתמשים לזכור את סוג הנתונים שהם מזינים.

חשוב מאוד להוסיף לטופסי התשלום את כל הערכים הזמינים של autocomplete. הרבה אתרים מפספסים את הערך autocomplete בתאריך התפוגה של הכרטיס ובשדות אחרים. אם אחד מהערכים של autofill שגוי או חסר, המשתמשים יצטרכו לאחזר את הכרטיס שלהם בפועל כדי להזין באופן ידני את נתוני הכרטיס, ואתם עלולים להפסיד במכירה. אם המילוי האוטומטי של טופסי התשלום לא פועל כמו שצריך, המשתמשים עשויים גם להחליט לשמור תיעוד של פרטי כרטיס התשלום בטלפון או במחשב שלהם – שיטה מאוד לא מאובטחת.

הערה: מחקרים מראים שמומלץ להשתמש ברכיבים נבחרים נפרדים לחודש ולשנה במקום בקלט יחיד. זה תלוי בך, מה שנראה לך האפשרות הטובה ביותר. כדי לבדוק את זה, אפשר ליצור רמיקס של ה-HTML ולערוך אותו מתוך ההדגמה המלאה של טופס התשלום, שכוללת קוד לשני הסוגים של שדות תאריך התפוגה.

צריך לנסות לשלוח את טופס התשלום עם שדה ריק. הדפדפן מציג בקשה להשלים נתונים חסרים. עכשיו מוסיפים אות לערך בשדה מספר הכרטיס ומנסים לשלוח את הטופס. בדפדפן מופיעה אזהרה שהערך לא חוקי. הסיבה לכך היא שהשתמשתם במאפיין 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.

• אחרי אילו נתונים מ-Analytics ו-Real User Monitoring תעקבו אחרי כדי לזהות דרכים לשיפור הטפסים?

טופס התשלום המלא אמור להיראות כך:

• התנסות בטופס במכשירים שונים. לאילו מכשירים ודפדפנים אתם מטרגטים? איך אפשר לשפר את הטופס?

להגיע רחוק יותר

כדאי לשקול את תכונות הטופס החיוניות הבאות שלא נכללות ב-Codelab הזה:

• קישור למסמכי התנאים וההגבלות ומדיניות הפרטיות: להבהיר למשתמשים איך אתם מגנים על הנתונים שלהם.

• סגנון ומיתוג: ודאו שהם תואמים לשאר האתר. כשמזינים שמות וכתובות ושולחים תשלום, המשתמשים צריכים להרגיש בטוחים ולסמוך שהם עדיין במקום הנכון.

• Analytics ו-Real User Monitoring: מאפשר לבדוק את הביצועים ואת נוחות השימוש של עיצוב הטופס כדי לבדוק משתמשים אמיתיים ולעקוב אחריהם.