<!– Form HTML để bỏ vào Page WordPress (sử dụng shortcode hoặc trực tiếp vào trang) –>

<form id=”sepay-ebook-form” class=”sepay-form”>

<div class=”form-group”>

<label for=”customer_name”>Tên của bạn:</label>

<input type=”text” id=”customer_name” name=”customer_name” required>

</div>

<div class=”form-group”>

<label for=”customer_email”>Email của bạn:</label>

<input type=”email” id=”customer_email” name=”customer_email” required>

</div>

<button type=”submit” id=”submit-btn” class=”btn btn-primary”><i class=”fas fa-shopping-cart”></i> Mua Ebook</button>

</form>

<!– Phần hiển thị QR (ẩn ban đầu) –>

<div id=”qr-section” class=”hidden”>

<h3>Quét mã QR để thanh toán</h3>

<img id=”qr-code” src=”” alt=”QR Code Thanh Toán” class=”mx-auto”>

<p>Mã giao dịch: <span id=”transaction-id”></span></p>

<p>Vui lòng quét mã QR bằng ứng dụng ngân hàng để thanh toán. Hệ thống sẽ tự động xác nhận sau khi thanh toán thành công.</p>

</div>

<!– Phần thành công (ẩn ban đầu) –>

<div id=”success-section” class=”hidden”>

<h3>Thanh toán thành công!</h3>

<p>Cảm ơn bạn đã mua Ebook. Link tải sẽ được gửi qua email.</p>

</div>

<style>

.sepay-form { max-width: 400px; margin: 0 auto; padding: 20px; }

.form-group { margin-bottom: 15px; }

.form-group label { display: block; margin-bottom: 5px; }

.form-group input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

.btn-primary { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }

.btn-primary:disabled { background-color: #6c757d; cursor: not-allowed; }

.hidden { display: none; }

#qr-code { max-width: 200px; margin: 10px auto; display: block; }

</style>