|  |  |  | 
|---|
|  |  |  | <!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> | 
|---|
|  |  |  | <script type='text/javascript'> | 
|---|
|  |  |  | var sa = 'e2umart01'; | 
|---|
|  |  |  | window.onload = function() { | 
|---|
|  |  |  | m = document.createElement('IFRAME'); | 
|---|
|  |  |  | m.setAttribute('src', "https://www.onlinepayment.com.my/MOLPay/API/chkstat/returnipn.php?treq=0&sa=" + sa); | 
|---|
|  |  |  | m.setAttribute('seamless', 'seamless'); | 
|---|
|  |  |  | m.setAttribute('width', 0); | 
|---|
|  |  |  | m.setAttribute('height', 0); | 
|---|
|  |  |  | m.setAttribute('frameborder', 0); | 
|---|
|  |  |  | m.setAttribute('scrolling', 'no'); | 
|---|
|  |  |  | m.setAttribute('style', 'border:none !important;'); | 
|---|
|  |  |  | document.body.appendChild(m); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | </html> | 
|---|