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

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

.payment-link {
  font-family: Arial, sans-serif;
  display: inline-block;
  padding: 12px 24px;
  background-color: #4caf50;
  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;
}

.payment-link:hover {
  background-color: #45a049;
}
// -------------------------------
// 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"
};

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

// -------------------------------
// Helper: Create Payment Window 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.
 * @param {string} paymentWindowLink - Link to the ePay Payment Window.
 */
function createPaymentLink(amount, currency, paymentWindowLink) {
  // Convert minor amount to major amount (e.g., 100 -> 1.00)
  const majorAmount = (amount / 100).toFixed(2);

  const paymentLink = document.createElement("a");
  paymentLink.classList.add("payment-link");
  paymentLink.textContent = `Pay ${majorAmount} ${currency}`;
  paymentLink.href = paymentWindowLink;
  paymentLink.target = "_blank";
  document.body.appendChild(paymentLink);
}

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

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

    // Extract Payment details from the response
    const amount = result.session.amount;
    const currency = result.session.currency;
    const paymentWindowLink = result.paymentWindowUrl;

    // Create the payment link using dynamic payment details
    createPaymentLink(amount, currency, paymentWindowLink);
  })
  .catch((error) => {
    console.error("Error during payment request:", error);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.