Nhận dữ liệu kết quả thanh toán và hiển thị cho người dùng với các phương thức khác

Cập nhật lần cuối: 11/01/2024

1. Khi hoàn tất quá trình thanh toán

Khi thanh toán hoàn tất, hệ thống sẽ chuyển về lại Redirect URL với path đã cấu hình trong mỗi phương thức thanh toán ở phần thông tin tích hợp.

Với những phiên bản Zalo đã hỗ trợ event OpenApp

• IOS: 22.02.01
• Android: 22.03.02

Lắng nghe sự kiện OpenApp và kiểm tra kết quả từ hệ thống thanh toán để xử lý.

import { events, EventName } from "zmp-sdk/apis"; // Require: zmp-sdk >= 2.25.3
import { Payment } from "zmp-sdk/apis";

events.on(EventName.OpenApp, (data) => {
  const params = data?.path;

  // kiểm tra path trả về từ giao dịch thanh toán
  // RedirectPath: đã cung cấp tại trang tích hợp thanh toán

  if (params.includes(RedirectPath)) {
    // gọi api checkTransaction để lấy thông tin giao dịch
    Payment.checkTransaction({
      data: params,
      success: (rs) => {
        // Kết quả giao dịch khi gọi api thành công
        const { orderId, resultCode, msg, transTime, createdAt } = rs;
      },
      fail: (err) => {
        // Kết quả giao dịch khi gọi api thất bại
        console.log(err);
      }
    });
  }
});

Với những phiên bản Zalo chưa hỗ trợ event OpenApp

• IOS: Các phiên bản thấp hơn 22.02.01
• Android: Các phiên bản thấp hơn 22.03.02

Sau khi thanh toán, hệ thống điều hướng người dùng tới redirect path đã khai báo và reload App. Tại trang xử lý thanh toán, sử dụng api checkTransaction như trên để lấy kết quả giao dịch.

import { Payment } from "zmp-sdk/apis";
useEffect(() => {
  // gọi api checkTransaction để lấy thông tin giao dịch
  Payment.checkTransaction({
    success: (rs) => {
      // Kết quả giao dịch khi gọi api thành công
      const { id, resultCode, msg, transTime, createdAt } = rs;
    },
    fail: (err) => {
      // Kết quả giao dịch khi gọi api thất bại
      console.log(err);
    }
  });
}, []);

Chi tiết: tham khảo API checkTransaction

mẹo

Để nhận dữ liệu trả về với toàn bộ phiên bản Zalo, cần phải xây dựng cả 2 phương án xử lý dữ liệu trên

2. Khi chưa hoàn tất quá trình thanh toán, người dùng đóng trang thanh toán

Event PaymentClose

Sau khi đã chuyển qua trang thanh toán của đối tác thanh toán (như ZaloPay, Momo, VNPay,...), trong trường hợp người dùng không hoàn tất quá trình thanh toán và đóng trang thanh toán, Mini App sẽ gửi sự kiện PaymentClose về cho ứng dụng của bạn để xử lý.

import { events, EventName } from "zmp-sdk/apis"; // Require: zmp-sdk >= 2.36.0
import { Payment } from "zmp-sdk/apis";

events.on(EventName.PaymentClose, (data) => {
  const resultCode = data?.resultCode;

  // kiểm tra resultCode trả về từ sự kiện PaymentClose
  // 0: Đang xử lý
  // 1: Thành công
  // -1: Thất bại

  //Nếu trạng thái đang thực hiện, gọi API CheckTransaction.
  if (resultCode === 0) {
    // gọi api checkTransaction để lấy thông tin giao dịch
    Payment.checkTransaction({
      data: { zmpOrderId: data?.zmpOrderId },
      success: (rs) => {
        // Kết quả giao dịch khi gọi api thành công
        const { orderId, resultCode, msg, transTime, createdAt } = rs;
      },
      fail: (err) => {
        // Kết quả giao dịch khi gọi api thất bại
        console.log(err);
      }
    });
  } else {
    // Xử lý kết quả thanh toán thành công hoặc thất bại
    const { orderId, resultCode, msg, transTime, createdAt } = data;
  }
});