דף זה תורגם על ידי Cloud Translation API.

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> אין תגים סוגרים. הסיבה לכך היא שהם רכיבים ריקים (ריקים): אין בהם תוכן בפני עצמם. הסימן '/' בסוף רכיב ריק הוא אופציונלי: <input> או <input /> תקינים.

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

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

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

שלב 2: עיצוב לנייד ולמחשב

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

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

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

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

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

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

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

שירות ה-CSS מתמקד בניידים:

ברירת המחדל של שירות ה-CSS מיועדת לאזורי תצוגה שרוחבם קטן מ-400px.
שאילתות מדיה הן משמשת לשינוי ברירת המחדל לאזורי תצוגה ברוחב של 400px לפחות, ואז שוב עבור אזורי תצוגה ברוחב של 500px לפחות. זה אמור לפעול היטב בטלפונים קטנים יותר, ובמכשירים ניידים במסכים גדולים יותר, ובמחשבים.

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

האם אפשר לראות את כל הטופס?
האם הקלט בטופס גדול מספיק?
האם כל הטקסט קריא?
האם הבחנת בהבדלים בין שימוש במכשיר נייד אמיתי לבין צפייה בטופס להפעיל את מצב המכשיר בכלי הפיתוח ל-Chrome?
האם היה צורך להתאים את נקודות העצירה (breakpoint)?

יש כמה דרכים לבדוק את הטופס במכשירים שונים:

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

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

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

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

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

חשוב מאוד להוסיף בצורה נכונה את כל הערכים הזמינים של 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.
אילו נתונים של analytics ונתונים של Real User Monitoring האם היית רוצה לבצע מעקב כדי לזהות דרכים לשיפור הטפסים?

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

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

המשך

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

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