<!DOCTYPE html>
<html lang="km">
<head>
    <title>Merchant Checkout Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://checkout.khqr.dev/static/js/checkout.min.js"></script>
</head>
<body style="background-color: #0b2447; color: white; padding: 40px; text-align: center;">

    <button onclick="KHQR.pay('c4ca4238a0b923820dcc509a6f75849b')" style="padding: 15px 30px; background: #2563eb; color: white; border: none; border-radius: 10px; font-weight: bold; cursor: pointer;">
        🛒 Pay with KHQR
    </button>

    <script>
        // ១. ពេលអតិថិជនបង់ប្រាក់ជោគជ័យ (Success Event)
        window.addEventListener('bakongPaymentSuccess', function(e) {
            console.log("Client detected payment success:", e.detail);
            // បិទ Popup បន្ទាប់ពីបង្ហាញដំណឹងជោគជ័យ
            if (window.KHQR) window.KHQR.close();
        });

        // ២. ពេលអតិថិជនចុចបិទ ឬ Cancel
        window.addEventListener('bakongPaymentCancel', function(e) {
            console.log("Customer closed checkout without paying");
        });

        // ៣. ពេលអស់សុពលភាព ១០ នាទី (Expired Event)
        window.addEventListener('bakongPaymentExpired', function(e) {
            console.log("Payment session expired after 10 minutes");
        });
    </script
</body
</html}