Biểu mẫu thanh toán thường là bước cuối cùng trước khi hoàn tất một giao dịch mua. Để tối đa hoá lượt chuyển đổi, hãy đảm bảo rằng hình thức thanh toán của bạn thân thiện với người dùng và an toàn.
Đảm bảo người dùng biết cần điền thông tin nào
Hãy giữ cho biểu mẫu thanh toán của bạn càng đơn giản càng tốt, chỉ hiển thị các trường bắt buộc.
Cho biết số tiền thanh toán. Nút Submit (Gửi) là lựa chọn lý tưởng dành cho trường hợp này.
<button>Pay $300.00</button>
Sử dụng từ ngữ tự giải thích cho các phần tử <label> của bạn.
Ví dụ: sử dụng 'Mã bảo mật',
thay vì viết tắt như "CVV" mà chỉ một số thương hiệu sử dụng.
Giúp người dùng nhập thông tin thanh toán
Để tối đa hoá lượt chuyển đổi, hãy đảm bảo người dùng có thể điền thông tin vào biểu mẫu thanh toán của bạn càng nhanh càng tốt.
Sử dụng inputmode="numeric" cho trường số thẻ và mã bảo mật
để hiển thị bàn phím ảo được tối ưu hoá để nhập số.
Thêm giá trị autocomplete thích hợp cho các lựa chọn kiểm soát biểu mẫu thanh toán để đảm bảo trình duyệt cung cấp tính năng tự động điền.
Sử dụng autocomplete="cc-name" cho tên,
autocomplete="cc-number" cho số thẻ và autocomplete="cc-exp" cho ngày hết hạn.
Đảm bảo người dùng nhập dữ liệu theo đúng định dạng
Sử dụng thuộc tính required cho mỗi <input> để đảm bảo người dùng điền vào biểu mẫu hoàn chỉnh.
Mã bảo mật của thẻ thanh toán có thể có 3 hoặc 4 chữ số.
Hãy dùng minlength="3" và maxlength="4" để chỉ cho phép 3 và 4 chữ số.
Đảm bảo người dùng chỉ nhập số cho số thẻ và mã bảo mật.
Sử dụng pattern="[0-9 ]+" để cho phép người dùng bao gồm dấu cách khi nhập số thẻ,
vì đây là cách các con số được hiển thị trên thẻ vật lý.