Hướng dẫn tích hợp Cổng thanh toán VNPay, MoMo, ZaloPay vào Website Next.js

Đối với các website bán hàng và web app dịch vụ, tự động hóa khâu thanh toán là yếu tố quyết định giúp tối ưu tỷ lệ chốt đơn và giảm công sức đối soát thủ công. Các cổng thanh toán phổ biến nhất tại Việt Nam hiện nay là VNPay, Ví MoMo, ZaloPay và chuyển khoản tự động VietQR. Bài viết này hướng dẫn tích hợp cổng thanh toán vào website Next.js / React.

1. Tổng quan luồng hoạt động của Cổng thanh toán (Payment Gateway Flow)

Quy trình thanh toán chuẩn trên website diễn ra qua 4 bước:

1. Khách hàng bấm Mua hàng (Checkout): Frontend gửi thông tin đơn hàng (Mã đơn, Số tiền, Mô tả) tới Route API backend Next.js.
2. Khởi tạo thanh toán (Create Payment URL): Server sử dụng Secret Key để tạo chuỗi mã hóa HMAC SHA512 và sinh ra Payment URL của VNPay/MoMo.
3. Khách quét mã QR / Thanh toán: Khách được chuyển sang ứng dụng Ngân hàng / Ví điện tử để xác nhận chuyển tiền.
4. Xử lý callback kết quả (IPN - Instant Payment Notification): Cổng thanh toán gọi về Server API (URL Webhook/IPN) để xác nhận giao dịch thành công và tự động gạch nợ đơn hàng.

2. 3 Bước tích hợp VNPay / MoMo vào Next.js (App Router)

Bước 1: Đăng ký tài khoản Merchant & Lấy API Key

Đăng nhập trang quản trị VNPay Sandbox (hoặc MoMo Developer Portal) để lấy các thông tin kết nối:

• vnp_TmnCode (Mã Website).
• vnp_HashSecret (Chuỗi mật khẩu mã hóa dữ liệu).
• vnp_Url (URL cổng thanh toán).

Bước 2: Tạo API Route sinh URL thanh toán (Server-side)

Tạo file API trong Next.js tại src/app/api/payment/create/route.ts. Sử dụng thư viện mã hóa crypto để tạo chữ ký bảo mật vnp_SecureHash truyền sang VNPay.

Bước 3: Xử lý Webhook IPN cập nhật đơn hàng thành công

Tạo Route API xử lý Webhook tại src/app/api/payment/vnpay-ipn/route.ts. Kiểm tra lại checksum của VNPay gửi về, nếu hợp lệ thì cập nhật trạng thái đơn hàng thành PAID (Đã thanh toán) trong CSDL và gửi email xác nhận cho khách.

3. Giải pháp Thanh toán VietQR Miễn phí 100% không tốn phí giao dịch

Nếu doanh nghiệp của bạn nhỏ và không muốn chịu phí gạch nợ 1-2% của các cổng thanh toán, giải pháp tối ưu nhất là **Tạo mã VietQR động tự động**. Hệ thống sẽ tự động tạo mã QR VietQR chứa đúng số tiền và nội dung chuyển khoản độc nhất cho từng đơn hàng (VD: UWMEE1024), giúp việc đối soát qua ứng dụng ngân hàng chính xác 100%.

Kết luận

Uwmee Software nhận thiết kế website bán hàng Next.js tích hợp sẵn trọn gói cổng thanh toán VNPay, MoMo, ZaloPay & VietQR tự động. Code tay 100%, bảo mật tuyệt đối, bàn giao mã nguồn trọn đời. Xem thêm bài viết 10 mẫu nút Call To Action tăng tỷ lệ chuyển đổi và cách tiết kiệm chi phí duy trì web app.