| <!DOCTYPE html> | 
| <html xmlns:th="http://www.thymeleaf.org"> | 
| <head> | 
|     <meta charset="UTF-8"> | 
|     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 
|     <title>Payment Success</title> | 
|     <style> | 
|         body { | 
|             font-family: Arial, sans-serif; | 
|             background-color: #f4f4f9; | 
|             color: #333; | 
|             display: flex; | 
|             justify-content: center; | 
|             align-items: center; | 
|             height: 100vh; | 
|             margin: 0; | 
|         } | 
|         .container { | 
|             background-color: #fff; | 
|             padding: 20px; | 
|             border-radius: 8px; | 
|             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | 
|             text-align: center; | 
|         } | 
|         h1 { | 
|             color: #4CAF50; | 
|         } | 
|         p { | 
|             margin: 10px 0; | 
|         } | 
|         .button { | 
|             display: inline-block; | 
|             padding: 10px 20px; | 
|             margin-top: 20px; | 
|             background-color: #4CAF50; | 
|             color: white; | 
|             text-decoration: none; | 
|             border-radius: 5px; | 
|             transition: background-color 0.3s; | 
|         } | 
|         .button:hover { | 
|             background-color: #45a049; | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
| <div class="container"> | 
|     <h1>Payment Successful</h1> | 
|     <p>Order ID: <span th:text="${orderId}"></span></p> | 
|     <p>Transaction ID: <span th:text="${tranId}"></span></p> | 
|     <p>Amount: <span th:text="${amount}"></span> <span th:text="${currency}"></span></p> | 
|     <p>Payment Date: <span th:text="${payDate}"></span></p> | 
|     <a href="/" class="button">Return to Home</a> | 
| </div> | 
| </body> | 
| </html> |