Bước 5 - Thông báo kết quả giao dịch

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

Bằng cách hiện thông báo thành công, dọn sạch giỏ hàng, và đưa người dùng đến trang lịch sử đơn hàng, chúng ta đã hoàn tất quá trình tích hợp. Template ZaUI Market đã có sẵn các logic này, bạn chỉ cần đặt chúng vào các sự kiện tương ứng:

src/hooks.ts

- import { authorize, createOrder, openChat } from "zmp-sdk";
+ import { authorize, createOrder, openChat, events, EventName, CheckoutSDK } from "zmp-sdk/apis";

+       // 5. Thông báo kết quả giao dịch
+       events.once(EventName.PaymentDone, async (data) => {
+         const result = await CheckoutSDK.checkTransaction({ data });
+         if (result.resultCode >= 0) {
            setCart([]);
            refreshNewOrders();
            navigate("/orders", {
              viewTransition: true,
            });
+         }
+         switch (result.resultCode) {
+           case 1:
              toast.success("Thanh toán thành công. Cảm ơn bạn đã mua hàng!", {
                icon: "🎉",
                duration: 5000,
              });
+             break;
+           case 0:
+             toast("Giao dịch đang xử lý. Cảm ơn bạn đã mua hàng!", {
+               icon: "⏳",
+               duration: 5000,
+             });
+             break;
+           case -1:
+             toast.error("Giao dịch không thành công. Vui lòng thử lại sau.");
+             break;
+           case -2:
+             toast.error("Vui lòng chọn phương thức thanh toán!");
+             break;
+           default:
+             // 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);
+             toast.error(result.msg);
+         }
+       });

Đảm bảo bạn đã thiết lập Redirect path với giá trị /orders ở bước Chuẩn bị tài khoản > Cấu hình phương thức thanh toán.