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

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

Khi thanh toán thành 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.

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

• IOS: 22.02.01
• Android: chưa hỗ trợ

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";

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 { 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);
      },
    });
  }
});

2. 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: Tất cả các phiên bản

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";
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