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 Phối 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 phần tử <section> và mỗi phần tử 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ì để giúp công cụ này hoạt động tốt 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. Trô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.

Khá nhiều CSS! 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 đường viền đã được điều chỉnh và display: block; được dùng cho các nhãn để chúng tự di chuyển một dòng, và giá trị nhập 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 sẽ 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 khi nào một giá trị đầu vào có giá trị không hợp lệ. (Bạn sẽ sử dụng tính năng 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 khung nhìn nhỏ hơn 400px chiều rộng.
  • 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 đó lại ghi đè 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 hơ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 với các biểu mẫu, vì một lỗi nhỏ có thể khiến chúng không sử dụng được nữa. Bạn phải luôn điều chỉnh các điểm ngắt CSS để đảm bảo chúng 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 đều đọ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 đ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ị:

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ư bộ chọn bên dưới.

Hai ảnh chụp màn hình của một biểu mẫu thanh toán trong Chrome trên điện thoại Android. Một biểu tượng cho thấy bộ chọn thẻ thanh toán tích hợp sẵn trên trình duyệt; ảnh còn lại 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ính năng 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á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 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ố, 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 không chính xác 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ể bị 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 rồi đ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 đề về việc 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ây giờ, biểu mẫu thanh toán hoàn chỉnh của bạn sẽ có dạng như sau:

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 các tài liệu về Điều khoản dịch vụ và chính sách quyền riêng tư: giúp người dùng hiểu rõ cách bạn bảo vệ dữ liệu của họ.

  • Phong cách và thương hiệu: hãy đả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.

  • Analytics và Giám sát người dùng thực: cho phép kiểm thử và theo dõi 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.