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 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 đúng cách

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 sẽ thấy, 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 vào mã đánh dấu.

• Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.

Hãy 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ả đều được gói 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 <button> HTML. 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ể truy cập bằng cách sử dụng các phần tử này.

Nhấp vào Xem ứng dụng để xem trước biểu mẫu thanh toán.

• Biểu mẫu có hoạt động đủ tốt không?
• Bạn có muốn thay đổi điều gì để ứng dụng 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 View Source (Xem mã nguồn) để quay lại mã nguồ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 khó sử dụng, đặc biệt là trên thiết bị di động. Cũng không được đẹ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.

Đó là một lượng CSS rất lớn! Những điều chính cần lưu ý là những thay đổi về kích thước:

• Thêm padding và margin vào dữ liệu đầu vào.
• font-size và các giá trị khác sẽ 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 đã tạo kiểu. Bạn cũng sẽ nhận thấy rằng các đường viền đã được điều chỉnh và display: block; được dùng cho nhãn để các nhãn này tự nằm trên một dòng và dữ liệu đầu vào có thể có chiều rộng đầy đủ. Bài viết 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 được dùng để cho biết thời điểm dữ liệu đầu vào có giá trị không hợp lệ. (Bạn sẽ sử dụng lớp này sau trong lớp học lập trình.)

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

• CSS mặc định dành cho các khung nhìn có chiều rộng dưới 400px.
• Truy vấn nội dung nghe nhìn được dùng để ghi đè chế độ mặc định cho các khung nhìn có chiều rộng ít nhất là 400px, sau đó ghi đè lại cho các khung nhìn có chiều rộng ít nhất là 500px. Cách này sẽ hoạt động tốt trên điện thoại nhỏ, thiết bị di động có màn hình lớn và trên máy tính.

Bất cứ khi nào tạo ứng dụng cho web, bạn đều cần kiểm thử trên nhiều thiết bị và kích thước khung nhìn. Điều này đặc biệt đúng đối với các biểu mẫu, vì một lỗi nhỏ có thể khiến người dùng không sử dụng được biểu mẫu. Bạn phải luôn điều chỉnh điểm ngắt CSS để đảm bảo các điểm ngắt này 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?
• Các mục nhập 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 Chrome DevTools không?
• Bạn có cần điều chỉnh điểm ngắt không?

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

• Sử dụng Chế độ thiết bị trong 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 đến điện thoại.
• 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 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ị đầu vào, đồng thời 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 bảo mật.

Thêm các thuộc tính vào biểu mẫu trong tệp index.html để biểu mẫu 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, rồi 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 bộ 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ụ bên dưới.

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ác giá trị autocomplete của thẻ thanh toán mà 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ẽ thấy bàn phím số xuất hiện 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ố, tính năng này giúp người dùng nhập số dễ dàng hơn 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 họ đang nhập.

Điều cực kỳ quan trọng là bạn phải thêm chính xác tất cả các giá trị autocomplete hiện có vào biểu mẫu thanh toán. Thông thường, các trang web sẽ bỏ qua 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 bị sai hoặc bị thiếu, người dùng sẽ cần 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 một giao dịch bán hàng. 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, người dùng cũng có thể quyết định lưu giữ thông tin thẻ thanh toán trên điện thoại hoặc máy tính của họ. Đây là một cách rất không an toàn.

Thử gửi biểu mẫu thanh toán có một trường trống. Trình duyệt sẽ nhắc bạn 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. Điều này cũng áp dụng cho maxlength và các quy tắc ràng buộc xác thực khác. Không yêu cầu 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 và điền vào biểu mẫu thanh toán. Bạn gặp phải khó khăn gì?
• Thử dùng biểu mẫu thanh toán trên cửa hàng trực tuyến. Cân nhắc những điểm hiệu quả và những điểm chưa hiệu quả. Bạn có nên làm theo các phương pháp hay nhất hoặc giải quyết các vấn đề thường gặp nào không?

Bước 4: Tắt nút thanh toán sau khi gửi biểu mẫu

Bạn nên cân nhắc việc tắt 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 liên tục vào các nút, ngay cả khi các nút đó đang hoạt động tốt. Điều đó có thể gây ra vấn đề trong quá trình xử lý thanh toán và làm tăng tải máy chủ.

Thêm JavaScript sau vào tệp js/main.js:

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 và xem điều gì sẽ xảy ra.

Dưới đây là mã của bạn tại thời điểm này, với một số nhận xét và hàm validate():

• Bạn sẽ thấy JavaScript bao gồm mã được chú thích để 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 trình duyệt tích hợp để đặt tiêu điểm và hiển thị lời nhắc. Bỏ ghi chú mã và thử mã. Bạn cần đặt giá trị thích hợp cho someregex và message, đồng thời đặt giá trị cho someField.

• Bạn sẽ theo dõi số liệu phân tích và dữ liệu của tính năng Theo dõi người dùng thực nào để xác định cách cải thiện biểu mẫu?

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ử nghiệm biểu mẫu trên nhiều thiết bị. Bạn đang nhắm đến những thiết bị và trình duyệt nào? Làm cách nào để cải thiện biểu mẫu này?

Vươn xa hơn

Hãy xem xét các tính năng quan trọng sau đây của biểu mẫu không được đề cập trong lớp học lập trình này:

• Đường liên kết đến tài liệu về Điều khoản dịch vụ và chính sách quyền riêng tư: cho người dùng biết rõ 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 và địa chỉ cũng như 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.

• Phân tích và giám sát người dùng thực: cho phép kiểm thử và giám sát hiệu suất cũng như khả năng hữu dụng của thiết kế biểu mẫu cho người dùng thực.