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

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

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

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

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