Biểu mẫu thanh toán là phần quan trọng nhất trong quy trình thanh toán. Thiết kế biểu mẫu thanh toán kém là một nguyên nhân phổ biến khiến người dùng bỏ dở giỏ hàng.
Tạo một biểu mẫu giúp người dùng dễ dàng nhập thông tin thanh toán trên máy tính và thiết bị di động. Đảm bảo biểu mẫu tận dụng tối đa các tính năng tích hợp sẵn của trình duyệt để tự động điền, xác thực và ràng buộc việc nhập dữ liệu.
Cách triển khai
Dưới đây là những nguyên tắc quan trọng nhất để xây dựng biểu mẫu thanh toán thành công.
Sử dụng HTML hợp lệ và có ý nghĩa
Khai thác tối đa các phần tử và thuộc tính được tạo để tạo biểu mẫu:
<form>,<input>,<label>và<button>type,autocompletevàinputmode
Các phần tử này cho phép chức năng tích hợp sẵn của trình duyệt, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa cho mã đánh dấu.
Sử dụng phần tử <label> để gắn nhãn các trường biểu mẫu cho mục nhập dữ liệu
Để gắn nhãn cho <input>, <select> hoặc <textarea>, hãy sử dụng <label>. Liên kết nhãn với dữ liệu đầu vào bằng cách gán cho thuộc tính for của nhãn cùng giá trị với id của dữ liệu đầu vào.
Khai thác tối đa các thuộc tính HTML
Giúp người dùng dễ dàng nhập dữ liệu bằng cách sử dụng thuộc tính <type> của phần tử <input> thích hợp để cung cấp bàn phím phù hợp trên thiết bị di động và bật tính năng xác thực cơ bản tích hợp sẵn của trình duyệt.
Luôn sử dụng type="email" cho địa chỉ email và type="tel" cho số điện thoại.
<!-- 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">
Mỗi phần tử <input>, <select> và <textarea> NÊN có một thuộc tính autocomplete thích hợp để cải thiện khả năng hỗ trợ tiếp cận và giúp người dùng tránh phải nhập lại dữ liệu.
Tạo nút hữu ích
Sử dụng <button> cho các nút. Bạn cũng có thể sử dụng <input type="submit">, nhưng không được sử dụng div hoặc một số phần tử ngẫu nhiên khác làm nút. Các phần tử nút cung cấp hành vi dễ tiếp cận, chức năng gửi biểu mẫu tích hợp sẵn và có thể dễ dàng tạo kiểu.
Đặt cho mỗi nút gửi biểu mẫu một giá trị cho biết chức năng của nút đó. Đối với mỗi bước thanh toán, hãy sử dụng lời kêu gọi hành động mang tính mô tả để cho thấy tiến trình và giúp người dùng dễ dàng nhận ra bước tiếp theo. Ví dụ: gắn nhãn nút gửi trên biểu mẫu địa chỉ giao hàng là Tiến hành thanh toán thay vì Tiếp tục hoặc Lưu.
Sử dụng một trường nhập tên duy nhất nếu có thể
Cho phép người dùng nhập tên của họ bằng một mục nhập duy nhất, trừ phi bạn có lý do chính đáng để lưu trữ riêng tên, họ, danh xưng hoặc các phần tên khác. Việc sử dụng một trường nhập tên duy nhất giúp biểu mẫu bớt phức tạp hơn, cho phép cắt và dán, đồng thời giúp tính năng tự động điền trở nên đơn giản hơn.
Cho phép tên quốc tế. Để xác thực, hãy tránh sử dụng biểu thức chính quy chỉ khớp với các ký tự Latinh. Chỉ dùng chữ cái Latinh: loại trừ những người dùng có tên hoặc địa chỉ chứa các ký tự không thuộc bảng chữ cái Latinh. Thay vào đó, hãy cho phép so khớp chữ cái Unicode và đảm bảo phần phụ trợ của bạn hỗ trợ Unicode một cách an toàn cho cả dữ liệu đầu vào và đầu ra. Unicode trong biểu thức chính quy được các trình duyệt hiện đại hỗ trợ tốt.
Cho phép nhiều định dạng địa chỉ
Khi thêm các trường biểu mẫu cho địa chỉ trong biểu mẫu thanh toán, hãy lưu ý đến nhiều định dạng địa chỉ, ngay cả trong một quốc gia. Đừng đưa ra giả định về địa chỉ "bình thường".
Nếu có thể trong các yêu cầu về dữ liệu, hãy cân nhắc sử dụng một phần tử <textarea> duy nhất cho địa chỉ. Đây là lựa chọn linh hoạt nhất cho nhiều định dạng địa chỉ trong nước và quốc tế.
Sử dụng tính năng tự động hoàn thành cho địa chỉ thanh toán
Theo mặc định, hãy đặt địa chỉ thanh toán giống với địa chỉ giao hàng. Giảm bớt sự lộn xộn về hình ảnh bằng cách cung cấp đường liên kết để chỉnh sửa địa chỉ thanh toán (hoặc sử dụng các phần tử tóm tắt và chi tiết) thay vì hiển thị địa chỉ thanh toán trong biểu mẫu.
Sử dụng các giá trị tự động hoàn thành thích hợp cho địa chỉ thanh toán, giống như bạn làm cho địa chỉ giao hàng, để người dùng không phải nhập dữ liệu nhiều lần. Thêm từ tiền tố vào thuộc tính tự động hoàn thành nếu bạn có các giá trị khác nhau cho dữ liệu đầu vào có cùng tên trong các mục khác nhau. Ví dụ:
<!-- 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" ...>
Hiện tiến trình thanh toán
Đối với mỗi bước thanh toán, hãy sử dụng tiêu đề trang và giá trị nút mô tả để làm rõ những việc cần làm ngay và bước thanh toán tiếp theo.
Sử dụng thuộc tính enterkeyhint trên dữ liệu đầu vào của biểu mẫu để đặt nhãn phím Enter trên bàn phím di động. Ví dụ: sử dụng enterkeyhint="previous" và enterkeyhint="next" trong biểu mẫu nhiều trang, enterkeyhint="done" cho dữ liệu đầu vào cuối cùng trong biểu mẫu và enterkeyhint="search" cho dữ liệu đầu vào tìm kiếm.
Giúp người dùng tránh phải nhập lại dữ liệu thanh toán
Hãy nhớ thêm các giá trị autocomplete thích hợp vào biểu mẫu thẻ thanh toán. Nếu không có tính năng tự động hoàn thành, người dùng có thể lưu giữ thông tin thẻ thanh toán trên giấy tờ hoặc lưu trữ thông tin đó theo cách không an toàn.
<!-- 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>
Hiện gợi ý về định dạng phía trên mục nhập
Nếu một trường có định dạng bắt buộc (ví dụ: ngày hết hạn MM/YY), hãy đặt gợi ý trong một phần tử hiển thị ở trên dữ liệu đầu vào và liên kết cả hai bằng aria-describedby, như trong ví dụ cc-exp ở trên. Gợi ý nằm bên dưới một mục nhập dễ dàng bị ẩn bởi bàn phím di động hoặc cửa sổ bật lên tự động điền vào thời điểm người dùng cần.
Đừng chỉ dựa vào thuộc tính placeholder làm gợi ý duy nhất về định dạng và đừng bao giờ sử dụng thuộc tính này thay cho <label>: văn bản phần giữ chỗ sẽ bị ẩn ngay khi người dùng bắt đầu nhập, vì vậy, bạn không thể kiểm tra văn bản này trong khi chỉnh sửa. Phần giữ chỗ có thể đóng vai trò là một gợi ý bổ sung bên cạnh nhãn và gợi ý cố định.
Không che mã bảo mật
Sử dụng type="text" với inputmode="numeric" cho mã bảo mật thẻ, chứ không phải type="password". Người dùng không thể kiểm tra lỗi chính tả của mã 3 hoặc 4 chữ số bị che, vì vậy, họ sẽ không phát hiện ra chữ số bị nhập sai cho đến khi khoản thanh toán bị từ chối. Ngoài ra, việc che mã cũng không giúp bảo vệ nhiều vì mã được in trên thẻ mà người dùng đang cầm.
Sử dụng một trường nhập duy nhất cho thẻ thanh toán và số điện thoại
Đối với thẻ thanh toán và số điện thoại, hãy sử dụng một mục nhập duy nhất: không chia số thành nhiều phần. Điều này giúp người dùng nhập dữ liệu dễ dàng hơn, đơn giản hoá quy trình xác thực và cho phép trình duyệt tự động điền. Hãy cân nhắc làm tương tự đối với các dữ liệu số khác như mã PIN và mã ngân hàng.
Xác thực cẩn thận
Bạn nên xác thực dữ liệu đầu vào theo thời gian thực và trước khi gửi biểu mẫu. Một cách để làm việc này là thêm thuộc tính mẫu vào dữ liệu đầu vào của thẻ thanh toán. Nếu người dùng cố gắng gửi biểu mẫu thanh toán có giá trị không hợp lệ, trình duyệt sẽ hiển thị thông báo cảnh báo và đặt tiêu điểm vào dữ liệu đầu vào.
Tuy nhiên, biểu thức chính quy của mẫu phải đủ linh hoạt để xử lý phạm vi độ dài số thẻ thanh toán: từ 14 chữ số (hoặc có thể ít hơn) đến 20 (hoặc nhiều hơn). Mã bảo mật thẻ (còn gọi là CSC, CVC, CVV hoặc các tên khác) gồm 3 hoặc 4 chữ số.
Cho phép người dùng thêm dấu cách khi nhập số thẻ thanh toán mới, vì đây là cách số thẻ hiển thị trên thẻ vật lý. Cách này thân thiện hơn với người dùng (bạn sẽ không phải thông báo cho họ biết rằng "họ đã làm sai điều gì đó"), ít có khả năng làm gián đoạn quy trình chuyển đổi và việc xoá dấu cách trong số trước khi xử lý cũng rất đơn giản.
Giúp người dùng tránh vô tình bỏ sót các trường dữ liệu
Thêm thuộc tính required vào các trường bắt buộc. Các trình duyệt hiện đại sẽ tự động nhắc và đặt tiêu điểm cho dữ liệu bị thiếu.
Chiến lược dự phòng
Tính năng tự động điền là một tính năng cải tiến tăng dần. Trong các trình duyệt không hỗ trợ tính năng tự động điền, người dùng chỉ cần nhập thông tin thanh toán theo cách thủ công. Các quy tắc ràng buộc về HTML ngữ nghĩa (chẳng hạn như type, inputmode, pattern và required) vẫn sẽ hoạt động đúng cách để xác thực dữ liệu đầu vào của người dùng và cung cấp bàn phím ảo chính xác.