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 hình thức thanh toán an toàn, dễ truy cập và dễ sử dụng.

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

Sử dụng các phần tử được xây dựng cho công việc:

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

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

  • 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 là được gói trong phần tử <section> và mỗi phần tử có một nhãn. Nút 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ể 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 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 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 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 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 loại thiết bị bằng cách điều chỉnh khoảng đệm, lề và cỡ 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! Sau đây là những điều chính bạn cần lưu ý là về việc thay đổi 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 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 đã được 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 có thể tự thực hiện trên một đường kẻ và dữ liệu đầu vào có thể có chiều rộng tối đa. 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 trong lớp học lập trình sau.)

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 phương tiện là được dùng để ghi đè giá trị mặc định cho những khung nhìn có chiều rộng tối thiểu là 400px, sau đó ghi đè một lần nữa cho khung nhìn có chiều rộng tối thiểu 500px. Cách này sẽ phù hợp với điện thoại, thiết bị di động nhỏ hơn trên màn hình lớn và trên máy tính.

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

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 vào, đồng thời cấp quyền truy cập vào các công cụ bảo mật tích hợp sẵn thanh toán và xác thực.

Thêm 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 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 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ư phương thức bên dưới.

Hai ảnh chụp màn hình về một biểu mẫu thanh toán trong Chrome trên điện thoại Android. Một thẻ cho thấy bộ chọn thẻ thanh toán tích hợp sẵn trên trình duyệt; phần còn lại cho thấy các giá trị tự động điền của 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 phương thức thanh toán và nhập mã bảo mật, trình duyệt sẽ tự động điền biểu mẫu bằng cách sử dụ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ẽ nhận thấy rằng mình nhận được bàn phím số ngay khi bạn nhấn vào Trường Số thẻ. Đó là vì bạn đã dùng inputmode="numeric". Đối với các trường dạng số, dễ dàng nhập số hơn và không thể nhập các ký tự không phải là số, đồng thời nhắc người dùng nhớ loại dữ liệu họ nhập vào.

Điều cực kỳ quan trọng là 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. Bây giờ việc các trang web bỏ lỡ giá trị autocomplete cho ngày hết hạn thẻ và các thông tin mới. Nếu một giá trị autofill không chính xác hoặc bị thiếu, người dùng sẽ cần truy xuất giá trị 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 lượt 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 bản ghi chi tiết thẻ thanh toán trên điện thoại của họ hoặc máy tính có mức độ an toàn cao.

Hãy thử gửi biểu mẫu thanh toán với trường trống. Trình duyệt nhắc hoàn tất việc thiếu . Giờ thì hãy thêm một chữ cái vào giá trị trong trường Card number (Số thẻ) rồi thử gửi biểu mẫu. Chiến lược phát hành đĩa đơn 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 tương tự cũng áp dụng cho maxlength và các thuộc tính khác các giới hạn xác thực Không cần 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ị của autocomplete rồi điền vào biểu mẫu thanh toán. Bạn gặp khó khăn gì gặp phải không?
  • Thử dùng biểu mẫu thanh toán trên các cửa hàng trực tuyến. Xem xét những gì hoạt động tốt và những gì không đúng. Có bất kỳ vấn đề thường gặp hoặc các phương pháp hay nhất nào mà bạn nên làm theo?

Bước 4: Vô hiệu hoá nút thanh toán sau khi 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 nhiều lần vào nút, ngay cả khi chúng hoạt động tốt. Đ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 của máy chủ.

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

Mã của bạn sẽ trông như thế nào tại thời điểm này, có thêm một số chú thích 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 thông tin tuỳ chỉnh xác thực, truy cập giao diện người dùng trình duyệt tích hợp sẵn để đặt tiêu điểm và hiển thị lời nhắc. Huỷ nhận xét về mã và hãy dùng thử. Bạn cần đặt các giá trị thích hợp cho someregex và message và đặt giá trị cho someField.

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

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

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 nhưng không có 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ư: trình bày rõ cho người dùng cách bạn bảo vệ dữ liệu của mình.

  • 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ỉ 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.

  • Analytics và hoạt động giám sát người dùng thực: giúp kiểm tra và giám sát hiệu suất và khả năng hữu dụng của kiểu thiết kế biểu mẫu đối với người dùng thực.