Developer Portal

Build, test, and deploy
with our flexible API

Everything you need to integrate ePay - all in one place. Use our API, plugins, and guides to set up payments in your solution - no matter the platform.

Integrations

Get started quickly with one of our plug-and-play integrations - built for popular ecommerce platforms.

API

Our well-documented REST API gives you full control and flexibility - build exactly what you need.

ePay.js

Our JavaScript SDK makes it easy to integrate ePay directly into your frontend. Simple setup and clear documentation.

main.js

epay

.setSessionId("<SESSION_ID>")

.setSessionKey("<SESSION_KEY>")

.setCallbacks({...})

.init();

JavaScriptUTF-8

Ln 5, Col 8Spaces: 2

Native SDK

Payments inside your app

Build a checkout for Android and iOS with Kotlin and Swift. Add card fields to your own layout and let ePay’s Native SDK handle card collection and the payment flow.

Explore Native SDK

Get started quickly and easily
integrating your payment solution

At ePay, we build products we would love to integrate ourselves.

We're developers, and we know what it takes: Clear documentation, flexible tools, and a platform that fits your needs - whether you're working on a single webshop or managing multiple clients.

Getting started with integration

We’ve made it easy to integrate ePay - no matter which solution you choose. Our documentation guides you step-by-step:

Checkout - integrate our payment window. Go to guide
Blocks - embed payment methods directly on your website. Go to guide
Verify - handle age verification when selling alcohol & tobacco. Go to guide
Link - send payment links directly to the customer. Go to guide
Subscription – set up recurring payments. Read the guide

More guides and resources

Learn our core concepts. See more here
Update payment method for subscriptions. Go to guide
Find test cards for different scenarios. See test cards

One profile, multiple accounts

When you create a profile, you can add multiple accounts. Perfect if you're handling multiple webshops or solutions.

Create your ePay profile using your GitHub or Google account. It's quick and easy - no need to remember another login.

Test as long as you want

Our test environment works exactly like the real one, so you can build and test confidently until you're ready to go live. Completely free, no obligations.

Working with multiple clients?

If you're an agency, developer, or consultant with multiple clients, become an ePay partner. Get attractive commission and tools to work more efficiently.

See how easy it is to integrate

script.js

// -------------------------------
// 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 production

headers.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);
}

// -------------------------------
// 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) => {
    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);
  });