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

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

Sam Dutton

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

שלב 1: שימוש ב-HTML כמתוכנן

משתמשים ברכיבים שמיועדים למשימה:

<form>
<section>
<label>
<input>, <select> <textarea>
<button>

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

לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.

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

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

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

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

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

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

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

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

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

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

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

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

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

קוד ה-CSS הוא לפי שיטת mobile-first:

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

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

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

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

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

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

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

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

המשך

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

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