Bước 2 - Kích hoạt giao dịch thanh toán

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

Ở bước này, chúng ta sẽ hiển thị hộp thoại "Xác nhận thanh toán" bên dưới:

Kích hoạt thanh toán

Bước này khá đơn giản, bạn chỉ cần gọi API createOrder của Checkout SDK. Tuy nhiên, API này yêu cầu một tham số bắt buộc và đặc biệt quan trọng, cần được tạo ở backend, gọi là MAC, chứa thông tin xác thực. Cách viết hàm tạo MAC khá đơn giản.

Backend

src/backend.ts
+ import { createHmac } from "crypto";

  express()
+   .post("/mac", async (req, res) => {
+     const { amount, desc, item, extradata, method } = req.body;
+     const params = { amount, desc, item, extradata, method };
+     const dataMac = Object.keys(params)
+       .sort()
+       .map(
+         (key) =>
+           `${key}=${
+             typeof params[key] === "object"
+               ? JSON.stringify(params[key])
+               : params[key]
+           }`
+       )
+       .join("&");
+     const mac = createHmac("sha256", process.env.CHECKOUT_SDK_PRIVATE_KEY!)
+       .update(dataMac)
+       .digest("hex");
+     res.json({ mac });
+   })
    .listen(port, () => {
      console.log(`Server running at http://localhost:${port}`);
    });

Frontend

Ở Mini App, gọi đến backend để tạo MAC như cách ta tạo đơn hàng ở Bước 1:

src/hooks.ts
+     // Chuẩn bị params để tạo MAC
+     const amount = totalAmount;
+     const desc = `Thanh toán cho đơn hàng #${myOrderId}`;
+     const item = cart.map<{ id: number; amount: number }>((cartItem) => ({
+       id: cartItem.product.id,
+       amount: cartItem.product.price * cartItem.quantity,
+     }));
+     const extradata = JSON.stringify({
+       myOrderId, // truyền theo định danh của đơn hàng đã được tạo ở phía hệ thống của bạn
+     });
+     const method = JSON.stringify({
+       id: "ZALOPAY_SANDBOX", // Phương thức thanh toán
+       isCustom: false, // false: Phương thức thanh toán của Platform, true: Phương thức thanh toán riêng của đối tác
+     });
+
+     // Gọi đến backend để tạo `MAC`
+     const payload = { amount, desc, item, extradata, method };
+     const { mac } = await requestWithPost<typeof payload, { mac: string }>(
+       "/mac",
+       payload
+     );

Sau khi đã có MAC, gọi API createOrder của Checkout SDK để kích hoạt giao dịch thanh toán:

src/hooks.ts
+     // 2. Kích hoạt giao dịch thanh toán
+     const { orderId: checkoutSdkOrderId } = await createOrder({
+       desc,
+       item,
+       amount: totalAmount,
+       extradata,
+       method,
+       mac,
+     });

      setCart([]);

Kết thúc bước này, bạn sẽ nhận được checkoutSdkOrderId (định danh của giao dịch thanh toán được tạo bởi Checkout SDK).

Backend​

Frontend​