Quy trình tích hợp

Cập nhật lần cuối: 27/05/2022

Lưu ý

Đơn vị kinh doanh cần đảm bảo đã cung cấp thông tin cấu hình tại trang quản lý ứng dụng Mini App

1. Tạo yêu cầu thanh toán

Để bắt đầu một quá trình thanh toán, chúng ta cần khởi tạo một đơn hàng.

Sau khi khởi tạo thành công, hệ thống sẽ tự động mở webview và điều hướng người dùng sang trang thanh toán. Bước tiếp theo chúng ta chỉ cần xử lý thông tin sau khi thanh toán hoàn tất.

Chi tiết: tham khảo API: createOrder

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

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.

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

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

3. Nhận thông tin callback từ hệ thống thanh toán

Nếu trừ tiền user thành công, ZMP Payment Server callback cho Merchant Server theo CallbackURL . Merchant dùng PrivateKey để xác thực data do ZMP Payment Server POST qua.

CallbackURL và PrivateKey đã cấu hình trong cài đặt chung ở phần thông tin tích hợp.

Chi tiết: tham khảo API callback

1. Tạo yêu cầu thanh toán​

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

3. Nhận thông tin callback từ hệ thống thanh toán​