Tapaya
Chấp nhận thanh toán tại cửa hàngHướng dẫn tích hợpKhuyến nghị UI/UX

Khuyến nghị UI/UX

Các phương pháp hay nhất khi tích hợp Tapaya Accept SDK vào ứng dụng của bạn để mang lại trải nghiệm người dùng liền mạch và đáng tin cậy.

Tích hợp một giải pháp thanh toán không chỉ là chuyện triển khai kỹ thuật; đó còn là việc tạo ra một trải nghiệm người dùng mang lại cảm giác an toàn, chuyên nghiệp và dễ sử dụng. Dưới đây là các khuyến nghị khi thiết kế luồng ứng dụng của bạn xoay quanh Tapaya Accept SDK.

Kích hoạt thanh toán

Lời kêu gọi hành động (CTA) rõ ràng

Đảm bảo nút bắt đầu thanh toán nổi bật và có nhãn rõ ràng.

  • Nên: “Thanh toán 12,50 €”, “Thanh toán bằng thẻ”, “Tiến hành thanh toán”
  • Không nên: “Gửi”, “Tiếp”, “OK”

Phản hồi khi tương tác

Khi người dùng chạm vào nút thanh toán, hãy hiển thị phản hồi trực quan ngay lập tức (ví dụ biểu tượng đang tải hoặc trạng thái vô hiệu hóa) để tránh bấm hai lần trong lúc SDK đang khởi tạo.

Trong khi giao dịch

Tapaya Accept SDK xử lý các phần nhạy cảm của giao dịch (đọc thẻ, nhập PIN) bằng lớp giao diện phủ riêng. Tuy nhiên, ứng dụng của bạn chịu trách nhiệm về ngữ cảnh trước và sau giao dịch.

Không che màn hình

SDK cần toàn bộ màn hình để đảm bảo an toàn và ngăn chặn các cuộc tấn công bằng lớp phủ. Đừng cố vẽ cửa sổ nổi hoặc bong bóng chat đè lên giao diện thanh toán, vì điều này có thể kích hoạt các cơ chế bảo mật khiến giao dịch bị hủy.

Hướng dẫn vị trí NFC

Việc đọc thẻ không tiếp xúc dựa vào ăng-ten NFC của thiết bị, có vị trí khác nhau tùy theo mẫu thiết bị.

  • Khuyến nghị: Nếu có thể, hãy hiển thị một hoạt ảnh ngắn hoặc gợi ý trong ứng dụng của bạn trước khi gọi SDK, cho người dùng thấy chip NFC nằm ở đâu trên thiết bị cụ thể của họ (thường ở mặt lưng, phía trên hoặc chính giữa).

Xử lý kết quả

Trạng thái thành công

  • Xác nhận trực quan: Hiển thị màn hình “Thành công” rõ ràng với dấu tích màu xanh lá hoặc yếu tố tích cực tương tự.
  • Biên lai: Cung cấp ngay tùy chọn gửi biên lai điện tử (Email/SMS) hoặc in biên lai nếu có kết nối máy in.

Trạng thái thất bại

  • Thông báo lỗi rõ ràng: Nếu giao dịch thất bại, hãy chuyển các mã lỗi kỹ thuật thành ngôn ngữ dễ hiểu với người dùng.
    • Kỹ thuật: DECLINED_INSUFFICIENT_FUNDS
    • Hiển thị cho người dùng: “Giao dịch bị từ chối. Vui lòng kiểm tra số dư hoặc thử một thẻ khác.”
  • Tùy chọn thử lại: Cung cấp nút “Thử lại” nổi bật để merchant có thể nhanh chóng bắt đầu lại quy trình mà không cần nhập lại số tiền.

Ứng dụng Tapaya Terminal

Ứng dụng Tapaya Terminal cho phép merchant tự nhận thanh toán bằng thẻ. Bên tích hợp có thể tùy chỉnh trải nghiệm của merchant trong ứng dụng Tapaya Terminal; hãy liên hệ developers@tapaya.com để bắt đầu.

Tùy chỉnh UI

Bạn có thể thay đổi UI của ứng dụng Tapaya Terminal trong Tapaya Platform tại Settings > Application > App Theme, hoặc bằng lập trình qua Platform API. Màu sắc và tài nguyên thương hiệu (logo, wordmark) được áp dụng nhất quán trên toàn bộ ứng dụng Tapaya Terminal.

Khả năng tiếp cận

  • Âm thanh: SDK phát tín hiệu âm thanh khi đọc thẻ và khi có lỗi. Đảm bảo ứng dụng của bạn không tắt tiếng hệ thống hoặc can thiệp vào audio focus trong khi thanh toán.
  • Phản hồi xúc giác: SDK dùng rung để xác nhận đã đọc thẻ. Điều này rất quan trọng cho khả năng tiếp cận và cho phản hồi chung trong môi trường ồn ào.
Trang này còn thiếu điều gì?Đề xuất tính năng. Chúng tôi sẽ đính kèm trang này để đội ngũ nắm được bối cảnh.