Accept a payment
To begin accepting payments, start by selecting the product that best fits your needs:
-
Hosted Fields: Ideal for embedding a payment form directly into your existing design, this solution gives you full control over the user experience. Note that it requires some coding and ongoing maintenance.
-
Payment Window: A simpler alternative that’s easier to implement. The Payment Window automatically receives updates and new payment methods, eliminating the need for manual maintenance.
If you prefer a no-code solution, we recommend using one of our existing plugins for a quick and hassle-free start.
Quick guide: Integrate the product of your choice
- Integrate the Payment window
- Integrate Hosted Fields
💡 This is a quick guide to help you get started with the Payment Window. For a more detailed guide, refer to the Payment Window documentation.
1Get your API key
Before you begin, obtain your API key from the ePay backoffice. Navigate to: Indstillinger -> Udvikler and locate the section API nøgler.
API keys differ depending on whether you are in test or live mode. Make sure to use the correct key for your environment.
2Find your Point of Sale ID
Next, find your Point of Sale ID in the ePay backoffice under Betaling -> Salgssteder. This ID is required to initialize a payment session.
3Initialize a Payment Session
Now it's time to initialize a Payment Session. Initializing a payment session is done by making a server-side HTTP request to the ePay Payments API. Always use server-side requests, this ensures your API key remains secure.
Details about the endpoint: Initialize Payment Session
Example request
Below is an example of how to initialize a payment session using Node.js:
const axios = require("axios");
let data = JSON.stringify({
pointOfSaleId: "[YOUR POINT OF SALE ID]",
amount: 100,
currency: "DKK",
});
let config = {
method: "post",
maxBodyLength: Infinity,
url: "https://payments.epay.eu/public/api/v1/cit",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: "Bearer [YOUR_API_KEY]",
},
data: data,
};
axios
.request(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});
pointOfSaleId
, amount
, and currency
are required fields. The amount
field is in the minor units (e.g., 100 for 1 DKK).
In the ePay backoffice in the advanced Point of Sale settings you can set the default for many of the session initialization parameters, allowing you to change your setup from the interface without updating your code.
Properties must be defined in either the point of sale settings or the API request. The API request takes precedence and overwrites any point of sale settings if present.
These fields are: scaMode
, timeout
, instantCapture
, processor
, maxAttempts
, notificationUrl
, successUrl
, failureUrl
Example response
This will provide a response similar to the following:
{
"paymentWindowUrl": "https://payments.epay.eu/payment-window?sessionId=01954c23-7baa-755c-839c-957efd4892c2&sessionKey=c1690a71-154c-4ab6-b789-ec21c9a224fb",
"session": {
"id": "01954c23-7baa-755c-839c-957efd4892c2",
"pointOfSaleId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
"timeout": 20,
"instantCapture": "OFF",
"reference": "my-reference-1",
"amount": 100,
"currency": "DKK",
"textOnStatement": null,
"state": "PENDING",
"dynamicAmount": false,
"createdAt": "2025-02-28T10:39:08.713109269Z",
"expiresAt": "2025-02-28T10:59:08.713109269Z",
"notificationUrl": "https://my-notification-url.com",
"successUrl": "https://my-success-url.com",
"failureUrl": "https://my-failure-url.com",
"preAuthUrl": null,
"retryUrl": null,
"attributes": null,
"scaMode": "NORMAL",
"reportFailure": false,
"exemptions": [],
"subscriptionId": null,
"maxAttempts": 5,
"attempts": 0
},
"key": "c1690a71-154c-4ab6-b789-ec21c9a224fb",
"javascript": "https://payments.epay.eu/sessions/01954c23-7baa-755c-839c-957efd4892c2/client.js"
}
4Redirect the customer
Redirect the customer to the paymentWindowUrl
in a full-screen view.
Once redirected, the customer will complete their payment within the Payment Window, and ePay will handle the entire process.
For a more detailed guide, refer to the Hosted Fields documentation.
1Get your API key
Before you begin, obtain your API key from the ePay backoffice. Navigate to: Indstillinger -> Udvikler and locate the section API nøgler.
API keys differ depending on whether you are in test or live mode. Make sure to use the correct key for your environment.
2Find your Point of Sale ID
Next, find your Point of Sale ID in the ePay backoffice under Betaling -> Salgssteder. This ID is required to initialize a payment session.
3Initialize a Payment Session
Now it's time to initialize a Payment Session. Initializing a payment session is done by making a server-side HTTP request to the ePay Payments API. Always use server-side requests, this ensures your API key remains secure.
Details about the endpoint: Initialize Payment Session
Example request
Below is an example of how to initialize a payment session using Node.js:
const axios = require("axios");
let data = JSON.stringify({
pointOfSaleId: "[YOUR POINT OF SALE ID]",
amount: 100,
currency: "DKK",
});
let config = {
method: "post",
maxBodyLength: Infinity,
url: "https://payments.epay.eu/public/api/v1/cit",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: "Bearer [YOUR_API_KEY]",
},
data: data,
};
axios
.request(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});
pointOfSaleId
, amount
, and currency
are required fields. The amount
field is in the minor units (e.g., 100 for 1 DKK).
In the ePay backoffice in the advanced Point of Sale settings you can set the default for many of the session initialization parameters, allowing you to change your setup from the interface without updating your code.
Properties must be defined in either the point of sale settings or the API request. The API request takes precedence and overwrites any point of sale settings if present.
These fields are: scaMode
, timeout
, instantCapture
, processor
, maxAttempts
, notificationUrl
, successUrl
, failureUrl
Example response
This will provide a response similar to the following:
{
"paymentWindowUrl": "https://payments.epay.eu/payment-window?sessionId=01954c23-7baa-755c-839c-957efd4892c2&sessionKey=c1690a71-154c-4ab6-b789-ec21c9a224fb",
"session": {
"id": "01954c23-7baa-755c-839c-957efd4892c2",
"pointOfSaleId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
"timeout": 20,
"instantCapture": "OFF",
"reference": "my-reference-1",
"amount": 100,
"currency": "DKK",
"textOnStatement": null,
"state": "PENDING",
"dynamicAmount": false,
"createdAt": "2025-02-28T10:39:08.713109269Z",
"expiresAt": "2025-02-28T10:59:08.713109269Z",
"notificationUrl": "https://my-notification-url.com",
"successUrl": "https://my-success-url.com",
"failureUrl": "https://my-failure-url.com",
"preAuthUrl": null,
"retryUrl": null,
"attributes": null,
"scaMode": "NORMAL",
"reportFailure": false,
"exemptions": [],
"subscriptionId": null,
"maxAttempts": 5,
"attempts": 0
},
"key": "c1690a71-154c-4ab6-b789-ec21c9a224fb",
"javascript": "https://payments.epay.eu/sessions/01954c23-7baa-755c-839c-957efd4892c2/client.js"
}
5Include JavaScript
When the payment session is initialized on the server-side the Epay javascript must be
included on the client side. The JavaScript client source can be found in the javascript
field of the start session response.
This can be done by adding the following line of code inside the <head></head>
tag of the website displaying the hosted fields.
<script
type="module"
src="https://payments.epay.eu/sessions/0192473a-e382-79a9-bfc2-65da88fe812f/client.js"
></script>
6Add hosted fields
<div id="fields"></div>
Initialize the hosted fields
<script>
epay
.setSessionId("<SESSION_ID>")
.setSessionKey("<SESSION_KEY>")
.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", {
theme: "default",
language: "da", // Optional parameter ["da", "en", "sv", "no"]
variables: {
colorText: "#2e3033",
},
});
</script>
7Add a payment button
Finally, a payment button must be added. This button must call the appropriate payment method initialization method:
Method | Description |
---|---|
epay.createCardTransaction() | Initializes and begins processing of a card (hosted-fields) based payment. |
epay.createVippsMobilePayTransaction() | Initializes and begins processing of a Vipps-MobilePay based payment. |
epay.createApplePayTransaction() | Initializes and begins processing of a ApplePay based payment. |
<button
type="button"
onclick="epay.createCardTransaction()"
>
PAY
</button>