Payment System Demo - SePay QR Code Integration

📊 Flow Diagram

Client Request

→

Create Order

→

QR Code

→

Transfer

→

SePay Webhook

→

Match Order

→

Client Webhook

🔌 Admin WebSocket — log giao dịch (realtime)

Xem payload chuyển khoản từ server để đối chiếu bill (mã trong content, số tiền, mã tham chiếu).

Chưa kết nối

Hướng dẫn nhanh

Namespace Socket.IO: /admin-notifications (cùng origin với trang này).
Sự kiện: webhook_notification — mỗi lần có giao dịch vào sau khi worker gửi Telegram admin thành công.
Payload gồm: content, transferAmount, referenceCode, webhookEventId, … (khớp đơn qua nội dung CK + số tiền).
Nếu không thấy log: kiểm tra worker + Redis + cấu hình Telegram; demo này chỉ hiển thị khi server đã bắn event.

Log (newest at bottom):

(Chưa có sự kiện — bấm "Kết nối WebSocket")

1

Tạo Payment Order

Product Code *

Customer Code (optional)

Amount (VNĐ) *

Client Webhook URL (optional)

📤 Dữ liệu webhook sẽ gửi đến client:

{
  "paymentCode": "PAYX20260127X001",
  "status": "paid",
  "amount": 10000,
  "paidAt": "2026-01-27T11:54:03.000Z",
  "productCode": "SK001",
  "customerCode": "CUST001"
}

💡 Hệ thống sẽ gửi POST request đến URL này khi thanh toán thành công

2

Quét QR Code để thanh toán

Hoặc mở link:

Click để mở QR Code

3

Trạng thái thanh toán

Đang kiểm tra...

📋 Logic và dữ liệu API trả về:

pending - Đang chờ thanh toán

{
  "paymentCode": "PAYX20260127X001",
  "status": "pending",
  "amount": 10000,
  "qrUrl": "https://qr.sepay.vn/img?...",
  "paidAt": null
}

paid - Đã thanh toán thành công

{
  "paymentCode": "PAYX20260127X001",
  "status": "paid",
  "amount": 10000,
  "qrUrl": "https://qr.sepay.vn/img?...",
  "paidAt": "2026-01-27T11:54:03.000Z"
}

✅ Khi status = paid, hệ thống sẽ tự động gọi client webhook

expired - Đã hết hạn (sau 30 phút)

{
  "paymentCode": "PAYX20260127X001",
  "status": "expired",
  "amount": 10000,
  "qrUrl": "https://qr.sepay.vn/img?...",
  "paidAt": null
}

cancelled - Đã hủy

{
  "paymentCode": "PAYX20260127X001",
  "status": "cancelled",
  "amount": 10000,
  "qrUrl": "https://qr.sepay.vn/img?...",
  "paidAt": null
}

API Endpoint: GET /payments/:paymentCode

💡 Hệ thống tự động poll mỗi 3 giây. Dừng khi status = paid hoặc expired.

4

Webhook Flow

1

SePay Webhook Received

Webhook từ SePay đã được nhận và lưu vào database

2

Payment Order Matched

Payment order đã được match qua content và amount

3

Client Webhook Called

Webhook của client đã được gọi với payment notification

💻 Code Examples

cURL - Create Payment Order

curl -X POST http://localhost:2000/payments \
  -H "Content-Type: application/json" \
  -d '{
    "productCode": "SK001",
    "customerCode": "CUST001",
    "amount": 10000,
    "clientWebhookUrl": "https://your-webhook-url.com/payment"
  }'

JavaScript - Create Payment Order

const response = await fetch('http://localhost:2000/payments', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    productCode: 'SK001',
    customerCode: 'CUST001',
    amount: 10000,
    clientWebhookUrl: 'https://your-webhook-url.com/payment'
  })
});
const order = await response.json();
console.log('Payment Code:', order.paymentCode);
console.log('QR URL:', order.qrUrl);

JavaScript - Check Payment Status

const response = await fetch('http://localhost:2000/payments/PAY-20260127-001');
const status = await response.json();
console.log('Status:', status.status);
console.log('Paid At:', status.paidAt);

Python - Create Payment Order

import requests

response = requests.post('http://localhost:2000/payments', json={
    'productCode': 'SK001',
    'customerCode': 'CUST001',
    'amount': 10000,
    'clientWebhookUrl': 'https://your-webhook-url.com/payment'
})
order = response.json()
print('Payment Code:', order['paymentCode'])
print('QR URL:', order['qrUrl'])