Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Form Thanh Toán Snippet Trong Thiết Kế Web

Form Thanh Toán Snippet Trong Thiết Kế Web


Ngày 22 Tháng 4 Năm 2020

Form Thanh Toán Là Gì?

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế form thanh toán(checkout ) bằng cách kết hợp HTML, CSS, Javascript và Bootstrap nhé.

Form thanh toán là một phần quan trọng không thể thiếu trong các cửa hàng kinh doanh online ngày nay. Vì đây là bước cuối cùng mà khách hàng trả tiền để mua sản phẩm của bạn. Do đó trong xây dựng form thanh toán chúng ta cần chú ý vào các phần như cung cấp thông tin chi tiết, hình ảnh, giá cả, chi phí vận chuyển sản phẩm mà khách hàng đã lựa chọn. Vì mình chỉ tập trung vào thiết kế nhưng bạn khi làm phần thanh toán cũng nên chú ý một số tính năng là phải sao để người dùng dễ dàng cập nhật số lượng, thay đổi màu sắc hay xóa sản phẩm. Việc này giúp người dùng giảm được các điều hướng không cần thiết cũng như không rời khỏi trang mà bạn muốn khách hàng ở lại nhất. Thông thường khi thiết kế phần này ta sẽ cần quan tâm đến một số yếu tố sau đây:

  • Ảnh sản phẩm.
  • Tên và giá sản phẩm
  • Khả năng loại bỏ sản phẩm, thay đổi chi tiết kích thước sản phẩm mà người dùng đã chọn.
  • Hiển thị tổng giá sản phẩm và chi phí vận chuyển.
  • Có thể kiểm tra ngày giao hàng dự kiến

Để hiểu rõ hơn bạn xem ví dụ về form thanh toán ở dưới đây nhé:

Ví dụ về Checkout(Form thanh toán)

Khi chúng ta tạo form thanh toán nên giảm thiểu các ô nhập thông tin bằng tay vì sẽ dễ khiến khách hàng cảm giác khó chịu mà rời bỏ trang của bạn. Do đó bạn nên tự động lọc hay điền thông tin cho khách hàng như tìm khu vực của người dùng tự động, giả sử nếu khách hàng chọn TP Hồ Chí Minh thì nó chỉ nên hiển thị các quận huyện ở trong khu vực đó giúp tiết kiệm thời gian người dùng cũng như hạn chế lỗi sai cú pháp trong form. Đối với các phần bắt buộc bạn nên hiển thị dấu hoa thị(*). Đôi khi khách hàng nhập chưa đúng thì bạn nên sử dụng thông báo lỗi và làm nổi bật nó bằng cách viền đỏ xung quanh ô nhập, biểu tượng icon văn bản in đậm ở trong những ô thông tin đó.

Ví dụ về nhập lỗi Checkout(Form thanh toán)

Đối với những khách hàng nhập thẻ thanh toán thì bạn cần phải thiết kế giao diện thân thiện với mobile và nên sử dụng thẻ minh họa để người dùng có cái nhìn trực quan và dễ hiểu hơn với chức năng của từng ô thông tin trong form. Và nếu có thể bạn nên chia form thanh toán thành nhiều phần nhỏ hơn để người dùng không cảm giác mệt mỏi khi nhìn thấy những thông tin cần phải nhập ví dụ như chọn phương thức ship -> chọn phương thức thanh toán -> đặt hàng. Nếu có thể bạn có thể thêm các phần mô tả thông tin ở bên dưới các ô nhập để khách hàng có thể hiểu rõ hơn.

Ví dụ về nhập lỗi Checkout(Form thanh toán)

Sau khi hiểu sơ lược về thông báo thì sau đây mình sẽ giới thiệu một số form thanh toán giúp bạn có sự lựa chọn tốt nhất để phù hợp với mục đích cũng như thiết kế, bố cục trang web của bạn.

Những Form Checkout Đẹp Trong Bootstrap

Credit Card Checkout:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 1

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen #codevember Credit Card Checkout by Momcilo Popov (@Momciloo) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card Checkout.

Bootstrap Checkout Example:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 2

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Bootstrap Checkout Example by Deque Systems (@dequesystems) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Bootstrap Checkout Example.

Credit Card Checkout 2:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 3

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Daily UI #002 Credit Card Checkout by Tobias (@Tbgse) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card Checkout 2.

Credit Card Checkout 3:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 4

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen DailyUI #002 - Credit Card Checkout by Maycon Luiz (@mycnlz) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card Checkout 3.

Credit Card Checkout 4:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 5

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen #DailyUI 002 - Credit Card Checkout by Nuno Martins (@NunoMartins21) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card Checkout 4.

Credit Card Checkout 5:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 6

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Daily UI #002 - Credit Card Checkout by Immanuel Pandiangan (@nuel) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng LESS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : LESS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card Checkout 5.

Gucci Backpack Checkout:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 7

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen #002 Daily UI - Gucci Backpack Checkout by Eric Figueroa (@EricGFig) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Gucci Backpack Checkout.

Watch Checkout:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 8

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Daily UI #002 Credit Card Checkout by Daniela Andersson Waara (@enwaara) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Watch Checkout.

Responsive Shopping Cart:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 9

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Responsive Shopping Cart by Justin Klemm (@justinklemm) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Responsive Shopping Cart.

Checkout Many Step:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 10

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Daily UI #007 | Settings by Julie Park (@juliepark) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Checkout Many Step.

Credit Card UI/UX:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 11

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Credit Card UI/UX | html + css by Islam (@isslam) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card UI/UX.

Form Checkout Many Step:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 12

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Form Design by Patrick (@Twiveyp) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Form Checkout Many Step.

Credit Card Payment Form:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 13

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Credit Card Payment Form.

Checkout Page Re-Created:

Xây Dựng form thanh toán bằng HTML, CSS, JS Phần 14

Đây là đoạn code và khi hiển thị trên web của component form thanh toán này nhé:

See the Pen Checkout Page Re-Created by Shagufta Mubasher (@thecoderlady) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Checkout Page Re-Created.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc chọn thiết kế form thanh toán cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!