Print Credit Purchase - Copy this React, Tailwind Component to your project

Góc phải trên hiển thị số trang hiện có với một thanh trạng thái. Chức năng "Mua trang in": Giao diện chia làm hai phần: Chọn số trang: Người dùng nhập số lượng trang muốn mua thêm. Đơn giá cố định là 500đ/trang. Nút Thanh toán. Phương thức thanh toán: Chỉ xuất hiện khi chọn "Thanh toán". Hiển thị tài khoản thanh toán qua BKPay với danh sách tài khoản thả xuống. Thông tin giao dịch: Số trang mua thêm. Đơn giá. Tổng tiền. Nút Thanh toán và Hủy. Phần chân trang: Hiển thị thông tin bản quyền và các liên kết mạng xã hội (Facebook, GitHub). API ảo cho trang 1. Endpoint: Lấy thông tin tài khoản thanh toán http Sao chép mã GET /api/accounts Response: json Sao chép mã { "accounts": [ { "id": "1", "bank": "OCB", "account_number": "1234567790", "balance": 2000000 }, { "id": "2", "bank": "Vietcombank", "account_number": "9876543210", "balance": 500000 } ] } 2. Endpoint: Tính tổng số tiền http Sao chép mã POST /api/calculate total Request: json Sao chép mã { "pages": 10, "price_per_page": 500 } Response: json Sao chép mã { "total": 5000 } 3. Endpoint: Xác nhận thanh toán http Sao chép mã POST /api/checkout Request: json Sao chép mã { "account_id": "1", "pages": 10, "total": 5000 } Response: Thanh toán thành công: json Sao chép mã { "success": true, "message": "Thanh toán thành công!", "remaining_balance": 1995000 } Thanh toán thất bại (số dư không đủ): json Sao chép mã { "success": false, "message": "Số dư không đủ để thực hiện giao dịch." }