With Blocks

// -------------------------------// Hosted Fields Callback Functions// -------------------------------function clientReadyCallback(event) {  console.log("Hosted fields client is ready:", event);}function invalidSessionCallback(event) {  console.error("Invalid session detected:", event);  displayError("Invalid session detected", event);}function challengeIssuedCallback(event) {  console.log("A challenge has been issued:", event);}function transactionAcceptedCallback(event) {  onTransactionComplete(true);}function transactionDeclinedCallback(event) {  onTransactionComplete(false);}function clientRedirectCallback(event) {  return false; // Skipping redirects in the demo preview}function invalidInputCallback(event) {  console.error("Invalid input encountered:", event);  displayError("Invalid input encountered", event);}function inputValidityCallback(event) {  console.log("Input validity changed:", event);}function inputSubmitCallback(event) {  console.log("Input submitted:", event);}function sessionExpiredCallback(event) {  console.error("Session has expired:", event);  displayError("Session has expired", event);}function errorCallback(event) {  console.error("An error occurred in hosted fields:", event);  displayError("An error occurred in hosted fields", event);}// -------------------------------// Helper: Create UI Containers// -------------------------------function createUi() {  const fields = document.createElement("div");  fields.id = "fields";  const errorBlock = document.createElement("div");  errorBlock.id = "error-block";  document.body.appendChild(fields);  document.body.appendChild(errorBlock);  return { fields, errorBlock };}// -------------------------------// Helper: Display Errors// -------------------------------/** * Appends a formatted error message to the error block. * * @param {string} description - A human-readable error description. * @param {object} event - The event object containing error details. */function displayError(description, event) {  const errorBlock = document.getElementById("error-block");  errorBlock.style.display = "block";  let title = "";  if (event && event.type) {    title += event.type;  }  if (event && event.errorCode) {    title += title ? " - " + event.errorCode : event.errorCode;  }  if (!title) {    title = "Error";  }  if (event && event.event) {    title += ` (Event: ${event.event})`;  } else {    title += " (Event: N/A)";  }  const errorItem = document.createElement("div");  errorItem.classList.add("error-item");  const titleEl = document.createElement("div");  titleEl.classList.add("error-title");  titleEl.textContent = title;  const descriptionEl = document.createElement("div");  descriptionEl.classList.add("error-description");  descriptionEl.textContent =    description ||    (event && event.message ? event.message : "No further details provided.");  errorItem.appendChild(titleEl);  errorItem.appendChild(descriptionEl);  errorBlock.appendChild(errorItem);}// -------------------------------// Payment Request Setup// -------------------------------const headers = new Headers();const demoApiKey = "test_93dc98ae-ff87-4671-a821-cda33fdfc26e"; // Demo API key: NEVER use this client-side in productionheaders.append("Content-Type", "application/json");headers.append("Accept", "application/json");headers.append("Authorization", `Bearer ${demoApiKey}`);const paymentData = {  pointOfSaleId: "0195a362-5bf4-7bb9-a419-2367fda11e6f",  amount: 100, // minor amount  currency: "DKK",  scaMode: "SKIP",};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);}// -------------------------------// Helper: Create Payment Button// -------------------------------/** * Creates and appends a payment button to the DOM. * The button text is set dynamically using the converted amount (major) and currency. * * @param {number} amount - The payment amount (in minor units). * @param {string} currency - The currency code. */function createPaymentButton(amount, currency) {  const majorAmount = (amount / 100).toFixed(2);  const button = document.createElement("button");  button.type = "button";  button.id = "payment-button";  button.textContent = `Pay ${majorAmount} ${currency}`;  button.addEventListener("click", () => {    epay.createCardTransaction();  });  const fieldsContainer = document.getElementById("fields");  fieldsContainer.insertAdjacentElement("afterend", button);}// -------------------------------// Helper: Handle Transaction Completed// -------------------------------/** * Function to handle the display after a transaction is completed. * * @param {boolean} success - Indicates whether the transaction was successful. */function onTransactionComplete(success) {  const fieldsContainer = document.getElementById("fields");  const paymentButton = document.getElementById("payment-button");  fieldsContainer.style.display = "none";  paymentButton.style.display = "none";  const messageContainer = document.createElement("div");  messageContainer.id = "transaction-message";  messageContainer.style.marginTop = "20px";  if (success) {    messageContainer.innerHTML = `      <h2>Payment Success</h2>      <p>Your transaction has been completed successfully.</p>    `;  } else {    messageContainer.innerHTML = `      <h2>Payment Failed</h2>      <p>We're sorry, but your transaction could not be completed.</p>    `;  }  if (fieldsContainer && fieldsContainer.parentNode) {    fieldsContainer.parentNode.appendChild(messageContainer);  } else {    document.body.appendChild(messageContainer);  }}// -------------------------------// Payment Request & Hosted Fields Initialization// -------------------------------createUi();fetch("https://payments.epay.eu/public/api/v1/cit", requestOptions)  .then((response) => response.json())  .then((result) => {    console.log("Payment response:", result);    const sessionId = result.session.id;    const sessionKey = result.key;    const amount = result.session.amount;    const currency = result.session.currency;    loadExternalModule(result.javascript, () => {      epay        .setSessionId(sessionId)        .setSessionKey(sessionKey)        .setCallbacks({          clientReady: clientReadyCallback,          invalidSession: invalidSessionCallback,          challengeIssued: challengeIssuedCallback,          transactionAccepted: transactionAcceptedCallback,          transactionDeclined: transactionDeclinedCallback,          clientRedirect: clientRedirectCallback,          invalidInput: invalidInputCallback,          inputValidity: inputValidityCallback,          inputSubmit: inputSubmitCallback,          sessionExpired: sessionExpiredCallback,          error: errorCallback,        })        .init();      epay.mountFields("fields", {        // The configuration object can be added here when needed.      });      createPaymentButton(amount, currency);    });  })  .catch((error) => {    console.error("Error during payment request:", error);    displayError("Error during payment request", error);  });