فرم‌های پرداخت مهم‌ترین بخش فرایند تسویه‌حساب هستند. طراحی ضعیف فرم پرداخت یکی از دلایل رایج رها کردن سبد خرید است.
فرمی ایجاد کنید که وارد کردن جزئیات پرداخت را در رایانه و تلفن همراه برای کاربران تا حد امکان آسان کند. مطمئن شوید فرم از ویژگی‌های داخلی مرورگر برای تکمیل خودکار، اعتبارسنجی، و محدودیت‌های ورود داده نهایت استفاده را می‌کند.
نحوه پیاده‌سازی
مهم‌ترین دستورالعمل‌ها برای ساختن فرم‌های پرداخت موفق در زیر به‌طور خلاصه بیان شده است.
استفاده از HTML معتبر و معنادار
از عناصر و مشخصه‌هایی که برای ایجاد فرم‌ها ساخته شده‌اند نهایت استفاده را ببرید:
-
<form>،<input>،<label>، و<button> -
type،autocomplete، وinputmode
این ویژگی‌ها عملکرد داخلی مرورگر را فعال می‌کنند، دسترس‌پذیری را بهبود می‌بخشند، و به نشانه‌گذاری معنی می‌دهند.
از عنصر <label> برای برچسب‌گذاری فیلدهای فرم برای ورود داده استفاده کنید
برای برچسب‌گذاری <input>، <select>، یا <textarea>، از <label> استفاده کنید. با دادن مقدار یکسان به مشخصه for برچسب و مشخصه id ورودی، برچسب را با ورودی مرتبط کنید.
بیشترین بهره را از مشخصه‌های HTML ببرید
بااستفاده از ویژگی عنصر <input> <type> مناسب برای ارائه صفحه‌کلید مناسب در تلفن همراه و فعال کردن اعتبارسنجی داخلی پایه توسط مرورگر، وارد کردن داده‌ها را برای کاربران آسان کنید.
همیشه از type="email" برای نشانی‌های ایمیل و از type="tel" برای شماره تلفن‌ها استفاده کنید.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
هر عنصر <input>، <select>، و <textarea> باید مشخصه autocomplete مناسبی داشته باشد تا دسترس‌پذیری بهبود یابد و به کاربران کمک شود از وارد کردن مجدد داده‌ها اجتناب کنند.
دکمه‌ها را مفید کنید
از <button> برای دکمه‌ها استفاده کنید. همچنین می‌توانید از <input type="submit"> استفاده کنید، اما از div یا عنصر تصادفی دیگری که به‌عنوان دکمه عمل می‌کند استفاده نکنید. عناصر دکمه رفتار دسترس‌پذیر، عملکرد ارسال فرم داخلی، و امکان سبک‌دهی آسان را فراهم می‌کنند.
به هر دکمه ارسال فرم مقداری بدهید که نشان دهد چه کاری انجام می‌دهد. برای هر مرحله از تسویه‌حساب، از یک دعوت به اقدام توصیفی استفاده کنید که پیشرفت را نشان دهد و مرحله بعدی را واضح کند. برای مثال، دکمه ارسال را در فرم نشانی تحویل کالا به‌جای ادامه یا ذخیره، ادامه به پرداخت برچسب‌گذاری کنید.
درصورت امکان، از یک ورودی نام استفاده کنید
به کاربران اجازه دهید نامشان را بااستفاده از یک ورودی وارد کنند، مگراینکه دلیل خوبی برای ذخیره جداگانه نام، نام خانوادگی، عناوین افتخاری، یا سایر بخش‌های نام داشته باشید. استفاده از یک ورودی نام باعث می‌شود فرم‌ها پیچیدگی کمتری داشته باشند، امکان برش و جای‌گذاری را فراهم می‌کند، و تکمیل خودکار را ساده‌تر می‌کند.
نام‌های بین‌المللی مجاز است. برای اعتبارسنجی، از عبارت‌های باقاعده‌ای که فقط با نویسه‌های لاتین مطابقت دارند استفاده نکنید. «فقط لاتین» کاربرانی را که نام یا نشانی آن‌ها حاوی نویسه‌هایی است که در الفبای لاتین نیستند مستثنی می‌کند. به‌جای آن، مطابقت حرف یونیکد را مجاز کنید—و مطمئن شوید که پسای شما از یونیکد به‌صورت ایمن هم به‌عنوان ورودی و هم به‌عنوان خروجی پشتیبانی می‌کند. مرورگرهای نو از یونیکد در عبارت‌های باقاعده به‌خوبی پشتیبانی می‌کنند.
قالب‌های نشانی مختلف را بپذیرید
هنگام افزودن فیلدهای فرم برای نشانی در فرم پرداخت، به تنوع قالب‌های نشانی، حتی در یک کشور، توجه داشته باشید. درباره نشانی‌های «معمولی» پیش‌فرض نداشته باشید.
اگر در الزامات داده‌هایتان امکان‌پذیر است، از یک عنصر <textarea> برای نشانی استفاده کنید. این گزینه انعطاف‌پذیرترین گزینه برای انواع قالب‌های نشانی محلی و بین‌المللی است.
استفاده از تکمیل خودکار برای نشانی صورت‌حساب
به‌طور پیش‌فرض، نشانی صورت‌حساب را همان نشانی تحویل کالا تنظیم کنید. با ارائه پیوندی برای ویرایش نشانی صورت‌حساب (یا استفاده از عناصر خلاصه و جزئیات) به‌جای نمایش نشانی صورت‌حساب در فرم، به‌هم‌ریختگی بصری را کاهش دهید.
از مقادیر تکمیل خودکار مناسب برای نشانی صورت‌حساب استفاده کنید، درست همان‌طور که برای نشانی ارسال کالا انجام می‌دهید، تا کاربر مجبور نباشد داده‌ها را بیش‌از یک بار وارد کند. اگر برای ورودی‌های دارای نام یکسان در بخش‌های مختلف مقادیر متفاوتی دارید، کلمه پیشوندی به مشخصه‌های تکمیل خودکار اضافه کنید. برای مثال:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
نمایش پیشرفت تسویه‌حساب
برای هر مرحله از پرداخت، از عنوان‌های صفحه و مقادیر توصیفی دکمه استفاده کنید تا مشخص شود اکنون چه کاری باید انجام شود و مرحله بعدی تسویه‌حساب چیست.
از مشخصه enterkeyhint در ورودی‌های فرم برای تنظیم برچسب کلید Enter صفحه‌کلید تلفن همراه استفاده کنید. برای مثال، از enterkeyhint="previous" و enterkeyhint="next" در فرم چندصفحه‌ای، از enterkeyhint="done" برای ورودی نهایی در فرم، و از enterkeyhint="search" برای ورودی جستجو استفاده کنید.
کمک به کاربران برای اجتناب از وارد کردن مجدد داده‌های پرداخت
حتماً مقادیر autocomplete مناسب را در فرم‌های کارت پرداخت اضافه کنید. بدون تکمیل خودکار، ممکن است کاربران جزئیات کارت پرداخت را به‌صورت فیزیکی ثبت کنند یا آن‌ها را به‌صورت ناامن ذخیره کنند.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
نمایش راهنمایی‌های قالب در بالای ورودی
وقتی فیلدی قالب الزامی دارد (برای مثال تاریخ انقضای MM/YY)، راهنمایی را در عنصر نمایانی بالای ورودی قرار دهید و این دو را با aria-describedby پیوند دهید، مانند مثال cc-exp در بالا. نکته‌هایی که زیر ورودی قرار می‌گیرند، به‌راحتی توسط صفحه‌کلید تلفن همراه یا پنجره پاپ‌اور تکمیل خودکار در لحظه‌ای که کاربر به آن‌ها نیاز دارد پنهان می‌شوند.
به مشخصه placeholder به‌عنوان تنها راهنمای قالب تکیه نکنید و هرگز از آن به‌جای <label> استفاده نکنید: نوشتار جای‌بان به‌محض اینکه کاربر شروع به تایپ کردن می‌کند پنهان می‌شود، بنابراین نمی‌توان آن را درحین ویرایش بررسی کرد. جای‌بان به‌عنوان نشانه اضافی درکنار برچسب و راهنمای ثابت مناسب است.
کد امنیتی را نپوشانید
برای کد امنیتی کارت، از type="text" با inputmode="numeric" استفاده کنید، نه type="password". کاربران نمی‌توانند کد سه یا چهار رقمی پنهان‌شده را ازنظر غلط املایی بررسی کنند، بنابراین رقم اشتباه تایپ‌شده تا زمانی که پرداخت رد نشود شناسایی نمی‌شود، و پنهان کردن محافظت چندانی اضافه نمی‌کند زیرا کد روی کارتی که کاربر در دست دارد چاپ شده است.
استفاده از یک ورودی برای کارت پرداخت و شماره تلفن
برای شماره تلفن و کارت پرداخت، از یک ورودی استفاده کنید: شماره را به چند بخش تقسیم نکنید. این کار وارد کردن داده‌ها را برای کاربران آسان‌تر می‌کند، اعتبارسنجی را ساده‌تر می‌کند، و به مرورگرها امکان می‌دهد تکمیل خودکار را انجام دهند. همین کار را برای دیگر داده‌های عددی مثل پین و کد بانک نیز انجام دهید.
بادقت اعتبارسنجی کنید
باید ورودی داده را هم به‌صورت هم‌زمان و هم قبل‌از ارسال فرم اعتبارسنجی کنید. یکی از راه‌های انجام این کار، افزودن مشخصه الگو به ورودی کارت پرداخت است. اگر کاربر سعی کند فرم پرداخت را با مقدار نامعتبر ارسال کند، مرورگر پیام هشداری نمایش می‌دهد و روی ورودی تمرکز می‌کند.
بااین‌حال، عبارت باقاعده الگوی شما باید به‌اندازه کافی انعطاف‌پذیر باشد تا بتواند طیف طول شماره کارت پرداخت را مدیریت کند: از ۱۴ رقم (یا احتمالاً کمتر) تا ۲۰ رقم (یا بیشتر). کد امنیتی کارت (که با نام‌های CSC، CVC، CVV، یا نام‌های دیگر نیز شناخته می‌شود) از ۳ یا ۴ رقم تشکیل شده است.
به کاربران اجازه دهید هنگام وارد کردن شماره کارت پرداخت جدید از فاصله استفاده کنند، زیرا شماره‌ها روی کارت‌های فیزیکی به این صورت نمایش داده می‌شوند. این روش برای کاربر خوشایندتر است (لازم نیست به او بگویید «اشتباهی انجام داده است»)، احتمال کمتری دارد که جریان تبدیل را قطع کند، و برداشتن فاصله‌ها در اعداد قبل‌از پردازش ساده است.
کمک به کاربران برای جلوگیری از جا انداختن تصادفی فیلدهای داده
مشخصه required را به فیلدهای الزامی اضافه کنید. مرورگرهای جدید به‌طور خودکار برای داده‌های مفقودشده پیام‌واره نشان می‌دهند و تمرکز را روی آن‌ها قرار می‌دهند.
راهبردهای جایگزین
تکمیل خودکار یک ارتقای پیش‌رو است. در مرورگرهایی که از تکمیل خودکار پشتیبانی نمی‌کنند، کاربران باید جزئیات پرداختشان را به‌صورت دستی وارد کنند. محدودیت‌های HTML معنایی (مانند type، inputmode، pattern، و required) همچنان به‌درستی عمل خواهند کرد تا ورودی کاربر را اعتبارسنجی کنند و صفحه‌کلیدهای مجازی صحیح را ارائه دهند.