Biểu mẫu thanh toán thường là bước cuối cùng trước khi hoàn tất giao dịch mua hàng. Để tối đa hoá lượt chuyển đổi, hãy đảm bảo phương thức thanh toán của bạn thân thiện với người dùng và bảo mật.
Đảm bảo người dùng biết nội dung cần điền
Giữ biểu mẫu thanh toá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 để làm việc đó.
<button>Pay $300.00</button>
Hãy sử dụng từ ngữ dễ hiểu cho các phần tử <label> của bạn.
Ví dụ: sử dụng "Mã bảo mật", thay vì từ 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 nhanh nhất có thể.
Sử dụng inputmode="numeric" cho các trường số thẻ và mã bảo mật để hiện bàn phím ảo được tối ưu hoá để nhập số.
Thêm các giá trị autocomplete thích hợp cho các chế độ 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 thẻ thanh toán có thể có 3 hoặc 4 chữ số.
Hãy sử 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ố thẻ và mã bảo mật.
Sử dụng pattern="[0-9 ]+" để cho phép người dùng thêm dấu cách khi nhập số thẻ, vì đây là cách hiển thị số trên thẻ thực.