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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.