<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cashfree Checkout Integration</title>
    <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
  </head>
  <body>
    <div class="row">
      <button id="renderBtn" style="display: none">Pay with Cashfree</button>
      <input
        type="hidden"
        id="session_id"
        name="session_id"
        value="<%= paymentSessionId %>"
      />
      <h1 align="center">Loading.....</h1>
    </div>
    <script src="<%- baseUrl %>/js/jquery.min.js"></script>
    <script>
      const cashfree = Cashfree({
        mode: `<%= CASHFREE_ENV %>`,
      });
      document.getElementById("renderBtn").addEventListener("click", () => {
        let session_id = $("#session_id").val();
        let checkoutOptions = {
          paymentSessionId: session_id,
          redirectTarget: "_self",
        };
        cashfree.checkout(checkoutOptions);
      });
      document.getElementById("renderBtn").click();
    </script>
  </body>
</html>
