Bước 3 - Nhận kết quả trên Mini App

Cập nhật lần cuối: 24/4/2025

Khi người dùng hoàn thành quá trình thanh toán, Checkout SDK sẽ điều hướng người dùng về lại Mini App.

Tại Mini App, đối tác cần xây dựng cơ chế để lắng nghe sự kiện PaymentDone từ Checkout SDK.

Sau đó kiểm tra kết quả thanh toán bằng checkTransaction để điều hướng người dùng cho các trường hợp cụ thể như sau:

• 1 - Thanh toán thành công
• 0 - Giao dịch đang được thực hiện hoặc chờ xử lý
• -1 - Thanh toán thất bại
• -2 - Người dùng không chọn phương thức thanh toán và thoát Checkout SDK

import { useEffect, useCallback } from "react";
import { events, EventName, CheckoutSDK, TransactionResult } from "zmp-sdk/apis";
import { useSnackbar, useNavigate } from "zmp-ui";
import yourService from '../service'

export function CheckoutPage() {
  const { openSnackbar } = useSnackbar();
  const navigate = useNavigate();

  function handleClickCheckout() {
    // Tạo đơn hàng trên hệ thống của bạn
    const order = await yourService.initOrder()
    // Khởi tạo đơn hàng & mở trang thanh toán với Checkout SDK
    await CheckoutSDK.createOrder(order)
  }

  const handlePaymentDone = useCallback((data) => {
    try {
      // Sử dụng data trả về từ sự kiện PaymentDone để kiểm tra kết quả thanh toán
      const result = await CheckoutSDK.checkTransaction({ data })
      switch (result.resultCode) {
        case 1:
          // Giao dịch thành công
          navigate("/result?status=success")
          break;
        case 0:
          // Giao dịch đang chờ xử lý
          navigate("/result?status=pending")
          break;
        case -1:
          // Giao dịch không thành công
          navigate("/result?status=fail")
          break;
        case -2:
          // Người dùng không chọn phương thức thanh toán và thoát Checkout SDK
          openSnackbar({
            type: "info",
            text: "Vui lòng chọn phương thức thanh toán",
          });
          break;
        default:
          openSnackbar({
            type: "error",
            text: result.msg || "Đã xảy ra lỗi, vui lòng thử lại sau",
          });
          // Giao dịch không hợp lệ, kiểm tra `result.err` & `result.msg` để biết thêm thông tin
          console.error(result.msg);
          break;
        }
      } catch (error) {
        openSnackbar({
          type: "error",
          text: "Đã xảy ra lỗi, vui lòng thử lại sau",
        });
      }
  }, [openSnackbar, navigate]);

  useEffect(() => {
    events.on(EventName.PaymentDone, handlePaymentDone);
    return () => {
      events.off(EventName.PaymentDone, handlePaymentDone);
    };
  }, [handlePaymentDone]);

  return (
    <div>
      <Button onClick={handleClickCheckout}>Thanh toán</Button>
    </div>
  );
}

Tiếp theo

Bước này chỉ giúp bạn điều hướng và hiển thị kết quả cho người dùng ở trên giao diện Mini App.

Để hoàn tất quy trình thanh toán và đảm bảo thông tin được cập nhật chính xác, bạn cần Xử lý kết quả thanh toán ở phía Server.

Checkout SDK sẽ gửi dữ liệu kết quả thông qua Webhook đến Callback URL mà bạn đã cấu hình trước đó.

---

Dành cho ZMP SDK phiên bản dưới 2.45.0

Đối với các phiên bản ZMP SDK dưới 2.45.0, hoặc khi không lắng nghe sự kiện PaymentDone, bạn cần xử lý riêng biệt cho từng phương thức thanh toán như sau.

Đối với các phương thức ZaloPay, Momo, VNPay, Payme, COD

Đối với phương thức chuyển khoản ngân hàng

Đối với phương thức thanh toán riêng