"dependencies": {
    "zmp-sdk": "^2.39.1",
}

import { Payment } from "zmp-sdk";

async function createOrder() {
    const cart = {
        items: [
            {
                product: { id: 1, name: "Xa phong", price: 10000},
                quantity: 2,
            }
        ],
        receiverName: "HuyLV"
        address: "toa nha FPT, so 10 Pham Van Bach",
        finalPrice: 20000,
    }
    const order = await createOrderOnYourServer(cart);

    // build data để tạo order trên CheckoutSDK
    const item = cart.items.map((item) => ({
      id: String(item.product.id),
      amount: item.quantity * item.product.price,
    }));
    const paymentMethod = {
      id: "COD_SANDBOX",
      isCustom: false,
    };
    const extraData = {
      storeName: "Kho tổng",
      storeId: "1",
      orderId: order.id, // id mà chúng ta đã tạo ở server của mình
      notes: "",
    };
    const orderData: any = {
      desc: `Thanh toan ${cart.finalPrice}`,
      item,
      amount: body.finalPrice,
      extradata: JSON.stringify(extraData),
      method: JSON.stringify(paymentMethod),
    };
    // ở bước này cần tạo 1 chuỗi mac từ orderData để đảm bảo tính toàn vẹn của dữ liệu
    // để tạo được mac, chúng ta cần API ở bước 2
    const mac = await createMac(orderData);
    orderData.mac = mac;
    return new Promise((resolve, reject) => {
        Payment.createOrder({
            ...orderData,
            success: resolve,
            fail: reject,
        });
    });
}

const CryptoJS = require('crypto-js');

createMac: async (body) => {
    try {
      const dataMac = Object.keys(body)
        .sort()
        .map(
          (key) =>
            `${key}=${
              typeof body[key] === 'object'
                ? JSON.stringify(body[key])
                : body[key]
            }`
        )
        .join('&');
      // biến môi trường ZALO_CHECKOUT_SECRET_KEY lấy ở bước 3
      const mac = CryptoJS.HmacSHA256(
        dataMac,
        process.env.ZALO_CHECKOUT_SECRET_KEY
      ).toString();
      return mac;
    } catch (e) {
      console.log(e);
    }
  }

OK, deploy 2 API này lên test server nhé.

> Server của bạn cần whitelist cho danh sách địa chỉ IP của CheckoutSDK Server:
> 118.102.2.29
> 49.213.78.2

# 3. Cài đặt trên trang quản lý mini app
- Truy cập trang quản lý mini app: 
https://mini.zalo.me/developers -> Chọn ZaloApp -> chọn mini app -> ở menu bên trái chọn CheckoutSDK -> cấu hình chung
- Chỉnh `AppStatus` thành `ACTIVE`, sử dụng `Private Key` cho biến môi trường `ZALO_CHECKOUT_SECRET_KEY`
- Thêm phương thức thanh toán mới, chọn `Thanh toán khi nhận hàng - Sandbox`
 - Notify Url: điền API ở bước 2.2

 - Redirect path: đường dẫn mà mini app sẽ redirect đến khi thanh toán xong
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sblsv4hczgnjz6vwre2d.png)

# 4. Thêm màn hình kết quả thanh toán
Sau thanh toán xong thì chắc chắn là phải mở ra màn kết quả thanh toán rồi. Ở đây sẽ xảy ra 2 trường hợp phụ thuộc vào phiên bản Zalo mà user sử dụng.

1. Với phiên bản Zalo đã hỗ trợ event open app, bạn cần lắng nghe sự kiện OpenApp và kiểm tra kết quả từ hệ thống thanh toán để xử lý.
> iOS: từ 22.02.01
> Android: từ 22.03.02

2. Với những phiên bản Zalo chưa hỗ trợ event OpenApp, sau khi thanh toán, hệ thống sẽ điều hướng người dùng tới redirect path đã cấu hình trên web.

Để lắng nghe sự kiện open app, bạn cần khai báo hook `useHandlePayment` và gọi nó khi khởi tạo app.

Do thanh toán COD thì kết quả luôn là thành công rồi nên màn kết quả thanh toán cũng đơn giản thôi:

OK, everything well done, hãy build lên **máy thật** và chạy thử thôi nào. Phần thanh toán này chỉ có thể test trên máy thật thôi nhé.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koibniji4o3buqhvsp4x.png)

# 5. Go live
Chú ý: lên môi trường production cần phải tạo thêm phương thức thanh toán `Thanh toán khi nhận hàng` (ko Sandbox).

Like ủng hộ mình để mình làm tiếp bài hướng dẫn tích hợp VNPAY nha :D

Nếu có bất kỳ thắc mắc nào, có thể comment bên dưới hoặc contact mình qua [đây](https://www.facebook.com/huylv.177), mình sẽ support bạn trong khả năng của mình ;)