Trang này được dịch bởi Cloud Translation API.

Lớp học lập trình về các phương pháp hay nhất về hình thức thanh toán

Sam Dutton

Lớp học lập trình này sẽ hướng dẫn bạn cách tạo một biểu mẫu thanh toán an toàn, dễ tiếp cận và dễ sử dụng.

Bước 1: Sử dụng HTML như dự định

Sử dụng các phần tử được tạo cho công việc:

<form>
<section>
<label>
<input>, <select>, <textarea>
<button>

Như bạn thấy, các phần tử này kích hoạt chức năng tích hợp của trình duyệt, cải thiện khả năng tiếp cận và thêm ý nghĩa cho mã đánh dấu của bạn.

Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.

Xem HTML cho biểu mẫu của bạn trong 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>

Có các phần tử <input> cho số thẻ, tên trên thẻ, ngày hết hạn và mã bảo mật. Tất cả các phần tử này đều được bao bọc trong các phần tử <section> và mỗi phần tử đều có một nhãn. Nút Complete Payment (Hoàn tất thanh toán) là một HTML <button>. Trong phần sau của lớp học lập trình này, bạn sẽ tìm hiểu về các tính năng của trình duyệt mà bạn có thể dùng bằng cách sử dụng các phần tử này.

Lưu ý: Các phần tử <input> không có thẻ đóng. Đó là vì các phần tử void (trống): không chứa nội dung nào. Bạn không bắt buộc phải đặt ký tự "/" ở cuối phần tử trống: <input> hoặc <input /> đều được.

Nhấp vào Xem ứng dụng để xem trước phương thức thanh toán của bạn.

Biểu mẫu có hoạt động đủ tốt không?
Bạn có muốn thay đổi điều gì để giúp sản phẩm hoạt động hiệu quả hơn không?
Còn trên thiết bị di động thì sao?

Nhấp vào Xem nguồn để quay lại mã nguồn của bạn.

Bước 2: Thiết kế cho thiết bị di động và máy tính

HTML bạn đã thêm là hợp lệ, nhưng kiểu trình duyệt mặc định khiến biểu mẫu này khó sử dụng, đặc biệt là trên thiết bị di động. Trông cũng chẳng đẹp lắm.

Bạn cần đảm bảo biểu mẫu hoạt động tốt trên nhiều thiết bị bằng cách điều chỉnh khoảng đệm, lề và kích thước phông chữ.

Sao chép tất cả CSS bên dưới rồi dán vào tệp css/main.css của riêng bạn.

Vậy là đã có quá nhiều CSS rồi! Những điều chính bạn cần lưu ý là những thay đổi về kích thước:

padding và margin được thêm vào dữ liệu đầu vào.
font-size và các giá trị khác là khác nhau tuỳ theo kích thước khung nhìn.

Khi bạn đã sẵn sàng, hãy nhấp vào Xem ứng dụng để xem biểu mẫu đã được tạo kiểu. Bạn cũng sẽ nhận thấy đường viền đã được điều chỉnh và display: block; được dùng cho các nhãn, vì vậy, các nhãn này tự tách ra trên một dòng và nội dung đầu vào có thể có chiều rộng đầy đủ. Các phương pháp hay nhất về biểu mẫu đăng nhập giải thích chi tiết hơn về lợi ích của phương pháp này.

Bộ chọn :invalid dùng để cho biết trường hợp dữ liệu đầu vào có giá trị không hợp lệ. (Bạn sẽ sử dụng phương thức này ở các phần sau trong lớp học lập trình này.)

CSS ưu tiên thiết bị di động:

CSS mặc định dành cho khung nhìn rộng dưới 400px.
Truy vấn phương tiện được dùng để ghi đè giá trị mặc định cho khung nhìn rộng ít nhất 400px, rồi ghi đè lại cho các khung nhìn rộng ít nhất 500px. Định dạng này sẽ phù hợp với điện thoại nhỏ hơn, thiết bị di động có màn hình lớn hơn và trên máy tính để bàn.

Bất cứ khi nào bạn xây dựng cho web, bạn cần kiểm tra trên các thiết bị và kích thước khung nhìn khác nhau. Điều này đặc biệt đúng với biểu mẫu, vì chỉ một trục trặc nhỏ cũng có thể khiến biểu mẫu không sử dụng được. Bạn phải luôn điều chỉnh điểm ngắt CSS để đảm bảo các điểm ngắt đó hoạt động tốt với nội dung và thiết bị mục tiêu của bạn.

Toàn bộ biểu mẫu có hiển thị không?
Thông tin đầu vào cho biểu mẫu có đủ lớn không?
Tất cả văn bản có đọc được không?
Bạn có nhận thấy sự khác biệt nào giữa việc sử dụng thiết bị di động thực và xem biểu mẫu ở Chế độ thiết bị trong Công cụ của Chrome cho nhà phát triển không?
Bạn có cần điều chỉnh các điểm ngắt không?

Có một số cách để kiểm tra biểu mẫu trên nhiều thiết bị:

Sử dụng Chế độ thiết bị công cụ của Chrome cho nhà phát triển để mô phỏng thiết bị di động.
Gửi URL từ máy tính sang điện thoại của bạn.
Hãy sử dụng một dịch vụ như BrowserStack để kiểm thử trên nhiều thiết bị và trình duyệt.

Bước 3: Thêm các thuộc tính để giúp người dùng nhập dữ liệu

Cho phép trình duyệt lưu trữ và tự động điền các giá trị nhập, cũng như cung cấp quyền truy cập vào các tính năng thanh toán và xác thực tích hợp sẵn một cách an toàn.

Thêm các thuộc tính vào biểu mẫu trong tệp index.html để có dạng như sau:

<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>

Xem lại ứng dụng của bạn, sau đó nhấn hoặc nhấp vào trường Số thẻ. Tuỳ thuộc vào thiết bị và nền tảng, bạn có thể thấy một trình chọn hiển thị các phương thức thanh toán được lưu trữ cho trình duyệt, như ví dụ dưới đây.

Hai ảnh chụp màn hình về biểu mẫu thanh toán trong Chrome trên điện thoại Android. Một cho thấy bộ chọn thẻ thanh toán tích hợp trong trình duyệt; một cho thấy các giá trị tự động điền trong phần giữ chỗ. — Trình chọn thanh toán và tự động điền tích hợp sẵn trong trình duyệt.

Sau khi bạn chọn một phương thức thanh toán và nhập mã bảo mật, trình duyệt sẽ tự động điền vào biểu mẫu bằng cách sử dụng các giá trị autocomplete của thẻ thanh toán bạn đã thêm vào biểu mẫu:

cc-number
cc-name
cc-exp
cc-csc

Nhiều trình duyệt cũng kiểm tra và xác nhận tính hợp lệ của số thẻ tín dụng và mã bảo mật.

Trên thiết bị di động, bạn cũng sẽ nhận thấy rằng mình sẽ có bàn phím số ngay khi nhấn vào trường Số thẻ. Đó là vì bạn đã sử dụng inputmode="numeric". Đối với các trường số, điều này giúp bạn dễ nhập số và không thể nhập các ký tự không phải số, đồng thời nhắc người dùng nhớ loại dữ liệu mà họ đang nhập.

Điều cực kỳ quan trọng là phải thêm chính xác tất cả các giá trị autocomplete hiện có vào các phương thức thanh toán. Thông thường, các trang web sẽ bỏ lỡ giá trị autocomplete cho ngày hết hạn của thẻ và các trường khác. Nếu một giá trị autofill duy nhất bị sai hoặc bị thiếu, người dùng sẽ phải truy xuất thẻ thực tế của họ để nhập dữ liệu thẻ theo cách thủ công và bạn có thể mất ưu đãi giảm giá. Nếu tính năng tự động điền trên biểu mẫu thanh toán không hoạt động đúng cách, thì người dùng cũng có thể quyết định lưu lại thông tin thẻ thanh toán trên điện thoại hoặc máy tính. Đây là cách thức có tính bảo mật cao.

Hãy thử gửi biểu mẫu thanh toán có trường trống. Trình duyệt sẽ nhắc hoàn tất dữ liệu còn thiếu. Bây giờ, hãy thêm một chữ cái vào giá trị trong trường Số thẻ rồi thử gửi biểu mẫu. Trình duyệt cảnh báo rằng giá trị đó không hợp lệ. Điều này xảy ra vì bạn đã sử dụng thuộc tính pattern để chỉ định các giá trị hợp lệ cho một trường. Tương tự đối với maxlength và các quy tắc ràng buộc xác thực khác, bạn không cần phải có JavaScript.

Bây giờ, biểu mẫu thanh toán của bạn sẽ có dạng như sau:

Hãy thử xoá các giá trị autocomplete rồi điền vào biểu mẫu thanh toán. Bạn gặp phải khó khăn gì?
Dùng thử biểu mẫu thanh toán trên các cửa hàng trực tuyến. Cân nhắc xem điều gì hoạt động tốt và điều gì chưa tốt. Có vấn đề phổ biến hoặc phương pháp hay nhất nào mà bạn nên áp dụng không?

Bước 4: Vô hiệu hoá nút thanh toán sau khi bạn gửi biểu mẫu

Bạn nên cân nhắc vô hiệu hoá nút gửi sau khi người dùng đã nhấn hoặc nhấp vào nút đó, đặc biệt là khi người dùng đang thanh toán. Nhiều người dùng nhấn hoặc nhấp vào các nút nhiều lần, ngay cả khi các nút đó không hoạt động. Điều đó có thể gây ra sự cố với quá trình xử lý thanh toán và thêm vào tải máy chủ.

Thêm JavaScript sau vào tệp js/main.js của bạn:

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);
  }
}

Hãy thử gửi biểu mẫu thanh toán rồi xem kết quả.

Chú ý: Một số trang web sẽ tắt nút gửi biểu mẫu cho đến khi người dùng hoàn thành chính xác tất cả các trường trong biểu mẫu. Bạn không nên làm như vậy vì người dùng có thể vô tình bỏ qua một giá trị bắt buộc hoặc sử dụng một giá trị không hợp lệ, sau đó hãy nhấn hoặc nhấp vào nút gửi bị vô hiệu hoá và cho rằng trang web của bạn đã bị hỏng! Ngay cả khi bạn đánh dấu các giá trị biểu mẫu là không hợp lệ hoặc bị thiếu, người dùng vẫn có thể không thấy cảnh báo (đặc biệt là đối với các biểu mẫu dài hơn và trên thiết bị di động). Tốt hơn là bạn nên xác thực cùng dòng trong khi người dùng đang nhập dữ liệu – và khi họ cố gắng gửi biểu mẫu.

Tại thời điểm này, mã của bạn sẽ trông như sau, cùng với việc bổ sung một số nhận xét và hàm validate():

Bạn sẽ nhận thấy rằng JavaScript bao gồm mã có nhận xét để xác thực dữ liệu. Mã này sử dụng Constraint Validation API (API Xác thực quy tắc ràng buộc) (được hỗ trợ rộng rãi) để thêm tính năng xác thực tuỳ chỉnh, truy cập vào giao diện người dùng của trình duyệt tích hợp sẵn để đặt tiêu điểm và hiển thị lời nhắc. Hủy nhận xét về mã và dùng thử. Bạn cần đặt các giá trị thích hợp cho someregex và message, đồng thời đặt giá trị cho someField.
Bạn sẽ theo dõi dữ liệu Giám sát người dùng thực và số liệu phân tích nào để xác định cách cải thiện biểu mẫu của bạn?

Bây giờ, biểu mẫu thanh toán hoàn chỉnh của bạn sẽ có dạng như sau:

Thử biểu mẫu của bạn trên các thiết bị khác. Bạn đang nhắm mục tiêu đến những thiết bị và trình duyệt nào? Chúng tôi có thể cải thiện biểu mẫu này như thế nào?

Tìm hiểu thêm

Hãy cân nhắc các tính năng biểu mẫu quan trọng sau đây (chưa được đề cập trong lớp học lập trình này):

Liên kết đến các tài liệu về Điều khoản dịch vụ và chính sách quyền riêng tư của bạn: trình bày rõ cho người dùng cách bạn bảo vệ dữ liệu của họ.
Phong cách và thương hiệu: đảm bảo những yếu tố này phù hợp với phần còn lại của trang web. Khi nhập tên, địa chỉ và thanh toán, người dùng cần cảm thấy thoải mái và tin tưởng rằng họ vẫn đang ở đúng nơi.
Giám sát người dùng thực và phân tích: cho phép kiểm tra và giám sát hiệu suất và khả năng hữu dụng của thiết kế biểu mẫu đối với người dùng thực.