171 lines
6.2 KiB
Plaintext
171 lines
6.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title><%= title %></title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/css/receipt.css">
|
|
</head>
|
|
<body>
|
|
<!-- Accepted Receipt -->
|
|
<div id="acceptedReceipt" class="receipt" style="border-top: 5px solid <%= appColor %>;">
|
|
<div class="header">
|
|
<!-- <img class="datex-pay-logo" src="/images/dynamic/<%= appLogo %>.png" alt="" srcset=""> -->
|
|
<img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
|
|
<p><%= t.receiptNumber %> 2949</p>
|
|
<!-- <p>https://www.mulberrypos.com</p> -->
|
|
<!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="receipt-details">
|
|
<div class="receipt-row">
|
|
<span class="label"><%= t.paymentType %></span>
|
|
<span><%= paymentMethod %></span>
|
|
</div>
|
|
<div class="receipt-row">
|
|
<span class="label"><%= t.testPayment %></span>
|
|
<span><%= amount %> <%= currencyS %></span>
|
|
</div>
|
|
<!-- <div class="receipt-row">
|
|
<span class="label"><%= t.paymentAddress %></span>
|
|
<span style="width: 135px;"><%= t.paymentAddressExample %></span>
|
|
</div> -->
|
|
<div class="receipt-row">
|
|
<span class="label"><%= t.issueDate %></span>
|
|
<span><%= timestamp %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="receipt-details">
|
|
<div style="font-size: large;" class="receipt-row">
|
|
<span class="label"><%= t.total %></span>
|
|
<span><%= amount %> <%= currencyS %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="footer">
|
|
<p><%= t.thankYou %></p>
|
|
<p><%= t.transactionId %> <%= transactionId %></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rejected Receipt -->
|
|
<div id="rejectedReceipt" class="receipt" style="border-top: 5px solid <%= appColor %>;">
|
|
<div class="header">
|
|
<img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
|
|
<p><%= t.receiptNumber %> 2949</p>
|
|
<!-- <p>https://www.mulberrypos.com</p> -->
|
|
<!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="receipt-details">
|
|
<div class="receipt-row">
|
|
<span class="label"><%= t.status %></span>
|
|
<span style="color: red;"><%= t.receiptRejected %></span>
|
|
</div>
|
|
<div class="receipt-row">
|
|
<span class="label"><%= t.paymentDate %></span>
|
|
<span><%= timestamp %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="footer">
|
|
<p><%= t.transactionId %> <%= transactionId %></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons Section -->
|
|
<div id="buttons" class="buttons-section" style="border-top: 5px solid <%= appColor %>;">
|
|
<div class="header">
|
|
<img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
|
|
<p><%= t.receiptNumber %> 2949</p>
|
|
<!-- <p>https://www.mulberrypos.com</p> -->
|
|
<!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="receipt-details">
|
|
<div style="font-size: large;" class="receipt-row">
|
|
<span class="label"><%= t.amountToPay %></span>
|
|
<span><%= amount %> <%= currencyS %></span>
|
|
</div>
|
|
|
|
<div class="receipt-row">
|
|
<span class="label"><%= t.paymentDate %></span>
|
|
<span><%= timestamp %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="buttons">
|
|
<button id="cancelButton"><%= t.cancel %></button>
|
|
<button id="payButton"><%= t.pay %></button>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="footer">
|
|
<p><%= t.transactionId %> <%= transactionId %></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Circle -->
|
|
<div id="loading" class="loading"></div>
|
|
|
|
<script>
|
|
const acceptedReceipt = document.getElementById('acceptedReceipt');
|
|
const rejectedReceipt = document.getElementById('rejectedReceipt');
|
|
const buttons = document.getElementById('buttons');
|
|
const id = '<%= deviceId %>'; // Pass the id from EJS
|
|
console.log(id);
|
|
|
|
console.log("Data in receipt.ejs :");
|
|
|
|
|
|
|
|
document.getElementById('payButton').addEventListener('click', async () => {
|
|
const response = await fetch(`/pay-command?id=${id}`, { method: 'POST' });
|
|
const result = await response.json();
|
|
loading.style.display = 'block';
|
|
|
|
// Simulate payment process for 1 second
|
|
setTimeout(() => {
|
|
// Hide loading circle
|
|
loading.style.display = 'none';
|
|
|
|
// Show accepted receipt and hide rejected receipt
|
|
acceptedReceipt.style.display = 'block';
|
|
rejectedReceipt.style.display = 'none';
|
|
buttons.style.display = 'none';
|
|
}, 1000);
|
|
});
|
|
|
|
document.getElementById('cancelButton').addEventListener('click', async () => {
|
|
const response = await fetch(`/cancel-command?id=${id}`, { method: 'POST' });
|
|
const result = await response.json();
|
|
|
|
setTimeout(() => {
|
|
// Hide loading circle
|
|
loading.style.display = 'none';
|
|
|
|
// Show rejected receipt and hide accepted receipt
|
|
rejectedReceipt.style.display = 'block';
|
|
acceptedReceipt.style.display = 'none';
|
|
buttons.style.display = 'none';
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |