<button id="payment-button">Pay now (Minimum age 18)</button>

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#payment-button {
  font-family: Arial, sans-serif;
  display: inline-block;
  padding: 12px 24px;
  background-color: #1d4ed8;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
}

#payment-button:hover {
  background-color: #2563eb;
}

// -------------------------------
// Payment Request Setup
// -------------------------------

// Create headers for the payment request
const headers = new Headers();
const demoApiKey = "test_93dc98ae-ff87-4671-a821-cda33fdfc26e"; // Demo API key: NEVER use this client-side in production

headers.append("Content-Type", "application/json");
headers.append("Accept", "application/json");
headers.append("Authorization", `Bearer ${demoApiKey}`);

// Define the payment payload data
const paymentData = {
  pointOfSaleId: "0195a362-5bf4-7bb9-a419-2367fda11e6f",
  amount: 100, // minor amount
  currency: "DKK",
  ageVerification: {
    minimumAge: 18,
    country: "DK"
  }
};

// Setup the fetch options
const requestOptions = {
  method: "POST",
  headers: headers,
  body: JSON.stringify(paymentData),
  redirect: "follow"
};

// -------------------------------
// Helper: Dynamically Load External Module
// -------------------------------

/**
 * Dynamically loads an external script module.
 *
 * @param {string} scriptUrl - The URL of the external module.
 * @param {Function} onLoadCallback - A callback function to run once the module loads.
 */
function loadExternalModule(scriptUrl, onLoadCallback) {
  const scriptEl = document.createElement("script");
  scriptEl.type = "module";
  scriptEl.src = scriptUrl;
  scriptEl.onload = onLoadCallback;
  document.body.appendChild(scriptEl);
  console.log("Dynamically loading external script:", scriptUrl);
}

// -------------------------------
// Payment Request & Hosted Fields Initialization
// -------------------------------

fetch("https://payments.epay.eu/public/api/v1/cit", requestOptions)
  .then((response) => response.json())
  .then((result) => {
    console.log("Payment response:", result);

    // Extract session and payment details from the response
    const sessionId = result.session.id;
    const sessionKey = result.key;
    const paymentWindowLink = result.paymentWindowUrl;

    // Dynamically load the external payment module using the URL from the response
    loadExternalModule(result.javascript, () => {
      // Initialize hosted fields with session data and callbacks
      epay.setSessionId(sessionId).setSessionKey(sessionKey).init();

      const button = document.getElementById("payment-button");
      button.addEventListener("click", () => {
        epay.startAgeVerification({
          successUrl: paymentWindowLink,
          failureUrl: paymentWindowLink
        });
      });
    });
  })
  .catch((error) => {
    console.error("Error during payment request:", error);
  });