[Article] Tini Checkout flows

1. Giới thiệu

Tini Checkout flows được tạo ra để quy chuẩn hóa trải nghiệm thanh toán trên các Tini app của bên thứ ba lẫn của Tiki. Có 3 thể loại ứng dụng mà Tini Checkout flows có thể được áp dụng:

  1. Các ứng dụng liên quan đến các sản phẩm kỹ thuật số (mua vé máy bay, đặt phòng khách sạn, mua ebook, v…v…).
  2. Các ứng dụng liên quan các sản phẩm vật lý (mua sách, mua quần áo, thương mại điện tử, v…v…).
  3. Các ứng dụng liên quan đến các ngành F&B (Food & Beverage)

Dựa vào 3 loại ứng dụng chính trên, chúng tôi cung cấp 2 loại flow thanh toán:

  • Flow thanh toán dùng giỏ hàng: Add-to-cart checkout (ATC checkout)
  • Flow thanh toán nhanh, không qua giỏ hàng: Quick checkout
ATC checkout Quick checkout
Trang Giỏ Hàng (Cart) Có trang Giỏ Hàng bao gồm khả năng quản lý số lượng sản phẩm Không có trang Giỏ Hàng
Trang Thanh Toán (Checkout) Xem thông tin tổng hợp của đơn hàng và không quản lý sản phẩm được (vì khả năng quản lý giỏ hàng đã có ở trang Giỏ Hàng) Xem thông tin tổng hợp đơn hàng và có khả năng quản lý giỏ hàng (giới hạn)
Loại ứng dụng Ngoài việc thuận tiện thanh toán, ứng dụng cung cấp khả năng cho người dùng có thể lưu lại sản phẩm để mua sau Ứng dụng khuyến khích người dùng mua và thanh toán ngay một cách nhanh chóng

1.1 Đối tượng sử dụng

Các ứng dụng sử dụng giải pháp Tini App.

1.2 Lí do sử dụng

Để đồng bộ hóa trải nghiệm thanh toán cho các ứng dụng dùng giải pháp Tini App.



2. ATC checkout

2.1 Giới thiệu

ATC checkout được sử dụng cho những ứng dụng ecommerce mà người dùng có nhu cầu:

  • Quản lý sản phẩm, vd như quản lý về số lượng, ghi chú hay các thuộc tính khác của sản phẩm trước khi thanh toán.
  • Lưu lại những sản phẩm trong giỏ hàng để mua sau.

ATC checkout gồm có 2 trang chính:

  • Trang Giỏ hàng (Cart)
  • Trang Xác nhận đơn hàng (Checkout)

2.2 Flow tổng quan


2.3 Trang Giỏ hàng (Cart)

Section Sample
Cart summary

Section này giúp người dùng:
  • Biết được những sản phẩm trongn Cart.
  • Có khả năng chọn tất cả hay một vài những sản phẩm để thanh toán.
  • Thay đổi số lượng và thuộc tính của sản phẩm.
  • Xóa sản phẩm.



Sold-out summary

  • Liệt kê những sản phẩm đã hết hàng.
    • Partial sold-out: là những sản phẩm mà thuộc đang chọn đã hết nhưng những thuộc tính khác vẫn còn, ví dụ như người dùng chọn đôi giày màu đen đã hết hàng nhưng những thuộc tính màu khác thì vẫn còn. Người dùng có thể chọn các thuộc tính khác.
    • Whole sold-out: Sản phẩm đã hết hàng hoàn toàn.
  • Không có khả năng chọn sản phẩm để thanh toán.



Sticky footer

  • Coupon application: Cho phép người dùng nhập mã khuyến mãi
  • .
  • CTA & total amount: Bao gồm tổng số tiền và nút Call to action.



Các flow phụ

Bấm Mua hàng khi chưa select sản phẩm

Dùng toast bar để người dùng chú ý.

Khi sản phẩm lưu trong Giỏ hàng trước đó hết hàng

Thay đổi thuộc tính sản phẩm

Xóa sản phẩm

Tiến hành mua hàng khi Giỏ hàng trống


2.4 Trang Xác nhận đơn hàng (Checkout)

Section Sample
Shipping details: Cho phép người dùng chọn hoặc thay đổi địa chỉ giao hàng.

Bao gồm 2 trạng thái
  • Has data: Địa chỉ giao hàng sử dụng lần gần nhất. Có thể thay đổi địa chỉ
  • Empty: Chưa mua hàng bao giờ, có button để chọn địa chỉ giao hàng.



Order summary: Cho phép người dùng xem lại những sản phẩm đã chọn để thanh toán từ Cart




Shipping method: Cho phép người dùng chọn phương thức giao hàng. Hiện tại chỉ có 1 phương thức được support là TikiFAST

Section này là tùy chọn, không bắt buộc.



Payment method: Cho phép người dùng chọn phương thức thanh toán.

Bao gồm 2 trạng thái
  • Has data: phương thức thanh toán sử dụng lần gần nhất. Có thể thay đổi.
  • Empty: Chưa mua hàng bao giờ, có button để chọn phương thức thanh toán.



Note: Cho phép người dùng ghi chú.

Section này là tùy chọn, không bắt buộc..



Price breakdown: Cho phép người dùng xem lại chi tiết giá.


Sticky footer

  • Coupon application: Cho phép người dùng nhập mã khuyến mãi.
  • Terms & conditions: Yêu cầu người dùng đọc và đồng ý với các điều kiện & điều khoản.
  • CTA & total amount: Bao gồm tổng số tiền và nút Call to action.



Các flow phụ

Chọn địa chỉ giao hàng

Đồng ý điều khoản & Điều kiện

Chọn phương thức thanh toán

:warning: Chú ý

Khi chọn phương thức thanh toán thì trang listing phương thức thanh toán là trang của Tiki, bạn không có quyền thay đổi



3. Quick checkout

3.1 Giới thiệu

Quick checkout được sử dụng cho những ứng dụng ecommerce mà người dùng có thể thực hiện mua sắm nhanh mà không cần quản lý sản phẩm qua giỏ hàng, hoặc những sản phẩm kỹ thuật số như vé máy bay, đặt phòng khách sạn v…v…

Quick checkout chỉ có 1 trang chính:

  • Trang xác nhận đơn hàng.

3.2 Flow tổng quan



3.3 Trang xác nhận đơn hàng (Checkout)

Section Sample
Shipping details:
  • Shipping from: nơi hàng được gửi đi, thông tin này ko bắt buộc.
  • Shipping to: Nơi nhận hàng, cho phép người dùng chọn hoặc thay đổi địa chỉ giao hàng.
    Bao gồm 2 trạng thái
    • Has data: Địa chỉ giao hàng sử dụng lần gần nhất. Có thể thay đổi địa chỉ
    • Empty: Chưa mua hàng bao giờ, có button để chọn địa chỉ giao hàng.
Section này không xuất hiện ở những ứng dụng ecommerce có sản phẩm kỹ thuật số (digital)



Order summary: Cho phép người dùng xem lại những sản phẩm đã chọn để thanh toán từ Cart

Đối với các sản phẩm kỹ thuật số (digital) thì không có listing các sản phẩm ra mà tùy thuộc vào loại sản phẩm sẽ có Order summary khác nhau, ví dụ vé xe sẽ khác thông tin phòng đã được đặt, cho nên chúng tôi cung cấp section trống để bạn thay Order summary của bạn vào.



Shipping method: Cho phép người dùng chọn phương thức giao hàng. Hiện tại chỉ có 1 phương thức được support là TikiFAST

Section này là tùy chọn, không bắt buộc.



Payment method: Cho phép người dùng chọn phương thức thanh toán.

Bao gồm 2 trạng thái
  • Has data: phương thức thanh toán sử dụng lần gần nhất. Có thể thay đổi.
  • Empty: Chưa mua hàng bao giờ, có button để chọn phương thức thanh toán.



Note: Cho phép người dùng ghi chú.

Section này là tùy chọn, không bắt buộc..



Price breakdown: Cho phép người dùng xem lại chi tiết giá.


Sticky footer

  • Coupon application: Cho phép người dùng nhập mã khuyến mãi.
  • Terms & conditions: Yêu cầu người dùng đọc và đồng ý với các điều kiện & điều khoản.
  • CTA & total amount: Bao gồm tổng số tiền và nút Call to action.



Các flow phụ

Các trường hợp thể hiện của Order summary

Xóa sản phẩm

Thay đổi thuộc tính sản phẩm

Chọn địa chỉ giao hàng

Đồng ý điều khoản và điều kiện

Chọn phương thức thanh toán

:warning: Chú ý

Khi chọn phương thức thanh toán thì trang listing phương thức thanh toán là trang của Tiki, bạn không có quyền thay đổi



4. Một số flow khác

4.1 Thay đổi thuộc tính sản phẩm

4.2 Áp dụng mã giảm giá

Áp dụng mã giảm giá đã lưu

Nhập mã giảm giá vào input


Thông tin liên quan

Design library

Standard flows

  • Tini Checkout flows: Figma

Template

10 Likes

Good articles!
Thanks for your sharing.

1 Like