ePay.js

https://docs.epay.eu/js
Admin
ePay.js is a JavaScript library designed for web applications to integrate secure and seamless ePay...
Tokens:10,101
Snippets:73
Trust Score:9
Update:9 months ago
Show doc for...
Tokens:
Raw
### Start Age Verification API

Source: https://docs.epay.eu/js/index

Initiates the age verification process for the customer, with optional redirect URLs for success and failure scenarios.

```APIDOC
## Start Age Verification

### Description
Initiates the age verification process. It accepts an options object with optional `successUrl` and `failureUrl` parameters.

### Method
`startAgeVerification(options)`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - Optional - An object containing redirect URLs:
  - **successUrl** (string) - URL to redirect to upon successful verification.
  - **failureUrl** (string) - URL to redirect to if verification fails.

### Request Example
```javascript
epay.startAgeVerification({
  successUrl: "https://your-site.com/verification-success",
  failureUrl: "https://your-site.com/verification-failure"
});
```

### Response
This method typically triggers a redirect or opens a new window for verification. Direct response handling is usually not applicable.
#### Success Response
N/A

#### Response Example
N/A
```

--------------------------------

### Get Google Pay Client API

Source: https://docs.epay.eu/js/index

Returns an instance of the Google Pay client, which can be used to call Google Pay endpoints.

```APIDOC
## Get Google Pay Client

### Description
Returns the Google Pay client object, allowing direct interaction with Google Pay endpoints.

### Method
`getGooglePaymentsClient(options)`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - Optional - Configuration options for the Google Pay client.

### Request Example
```javascript
const googlePayClient = epay.getGooglePaymentsClient({
  environment: "TEST" // or "PRODUCTION"
});

// Now you can use googlePayClient to interact with Google Pay SDK
// e.g., googlePayClient.isReadyToPay(...)
```

### Response
#### Success Response (200)
- **googlePayClient** (object) - An instance of the Google Pay client.

#### Response Example
```javascript
// Returns a Google Pay client object
// Example structure (actual object depends on Google Pay SDK):
{
  "isReadyToPay": function() { ... },
  "loadPaymentData": function() { ... },
  // ... other methods
}
```
```

--------------------------------

### Initialize ePay.js Client with Callbacks

Source: https://docs.epay.eu/js/index

Initializes the ePay.js client by setting session ID, session key, and registering various callback functions for different payment events. The init() method finalizes the client setup. This is crucial for managing the payment flow and handling responses.

```javascript
epay \
  .setSessionId("<SESSION_ID>") \
  .setSessionKey("<SESSION_KEY>") \
  .setCallbacks({
    // This method is optional
    clientReady: clientReadyCallback,
    invalidSession: invalidSessionCallback,
    challengeIssued: challengeIssuedCallback,
    transactionAccepted: transactionAcceptedCallback,
    transactionDeclined: transactionDeclinedCallback,
    feeUpdated: feeUpdatedCallback,
    clientRedirect: clientRedirectCallback,
    invalidInput: invalidInputCallback,
    inputValidity: inputValidityCallback,
    inputSubmit: inputSubmitCallback,
    sessionExpired: sessionExpiredCallback,
    error: errorCallback,
  })
  .init();
```

--------------------------------

### Start Age Verification using Epay.js

Source: https://docs.epay.eu/js/index

Initiates the age verification process. This method accepts an optional `options` object that can include `successUrl` and `failureUrl` for redirection upon verification completion or failure. If these URLs are not provided, the current window location is used as a fallback.

```javascript
epay.startAgeVerification({
  successUrl: "https://xyz.com",
  failureUrl: "https://zyz.com",
});
```

--------------------------------

### Get Google Pay Supported Networks API

Source: https://docs.epay.eu/js/index

Retrieves a list of card networks that are currently available in the session and supported by Google Pay.

```APIDOC
## Get Google Pay Supported Networks

### Description
Returns a list of card networks available on the current session and supported by Google Pay.

### Method
`getGooglePaySupportedNetworks()`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
epay.getGooglePaySupportedNetworks().then(networks => {
  console.log("Google Pay Supported Networks:", networks);
}).catch(error => {
  console.error("Error getting supported networks:", error);
});
```

### Response
#### Success Response (200)
- **networks** (array) - An array of strings, where each string is a supported card network (e.g., "VISA", "MASTERCARD").

#### Response Example
```json
[
  "VISA",
  "MASTERCARD",
  "AMEX"
]
```
```

--------------------------------

### Get Google Pay Client using Epay.js

Source: https://docs.epay.eu/js/index

Returns the Google Pay client instance, which is necessary for making calls to Google Pay endpoints. This client object facilitates interaction with the Google Pay API for payment-related operations.

```javascript
epay.getGooglePaymentsClient();
```

--------------------------------

### Get Supported Payment Method Types

Source: https://docs.epay.eu/js/index

Retrieves available payment method types for the current session, dynamically filtered based on session data and account settings. Useful for dynamically building UIs. Returns a list of objects containing payment method name, logo URL, and a reference method to initiate payment.

```javascript
epay.getSupportedPaymentMethodTypes()
    .then(data => {
        console.log('Supported Payment Methods:', data);
    })
    .catch(error => {
        console.error('Error fetching supported payment methods:', error);
    });
  
/** Example:  
    {
        "CARD": {
            "name": "Card",
            "url": "https://payments.epay.eu/assets/images/payment-options/credit-card.svg",
            "method": fn(),
        },
        "VIPPS_MOBILEPAY": {
            "name": "Vipps MobilePay",
            "url": "https://payments.epay.eu/assets/images/payment-options/mobile-pay.svg"
            "method": fn(),
        },
        "APPLE_PAY": {
            "name": "ApplePay",
            "url": "https://payments.epay.eu/assets/images/payment-options/apple-pay.svg"
            "method": fn(),
        }
    }
*/  
  
```

--------------------------------

### Get Google Pay Supported Networks using Epay.js

Source: https://docs.epay.eu/js/index

Returns a list of card networks that are available in the current session and supported by Google Pay. This information helps in determining compatible payment methods for Google Pay transactions.

```javascript
epay.getGooglePaySupportedNetworks();
```

--------------------------------

### Get Stored Payment Methods

Source: https://docs.epay.eu/js/index

Retrieves all stored payment methods (cards) for the current user, scoped by the `customerId` set during session initialization. Returns an empty array if no `customerId` is provided. This method might be redundant if you manage your own account system.

```javascript
epay.getStoredPaymentMethods()
  .then(data => {
    console.log('Stored Payment Methods:', data.paymentMethods);
  })
  .catch(error => {
    console.error('Error fetching stored payment methods:', error);
  });
  
```

--------------------------------

### Get Google Pay Payment Data API

Source: https://docs.epay.eu/js/index

Retrieves payment data required for Google Pay's `isReadyToPay` and `loadPaymentData` requests. Optionally specifies a Google-assigned merchant ID.

```APIDOC
## Get Google Pay Payment Data

### Description
Returns an object for requests to `isReadyToPay` and `loadPaymentData`. `allowedCardNetworks` are based on the current session. An optional `merchantId` can be provided.

### Method
`getGooglePayPaymentData(merchantId)`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **merchantId** (string) - Optional - The Google-assigned merchant ID. If omitted, the merchant ID from the configuration is used.

### Request Example
```javascript
// Using default merchant ID
epay.getGooglePayPaymentData().then(paymentDataRequest => {
  console.log("Google Pay Payment Data:", paymentDataRequest);
  // Use paymentDataRequest for isReadyToPay or loadPaymentData
}).catch(error => {
  console.error("Error getting Google Pay payment data:", error);
});

// Specifying merchant ID
epay.getGooglePayPaymentData("YOUR_GOOGLE_MERCHANT_ID").then(paymentDataRequest => {
  console.log("Google Pay Payment Data with specific merchant:", paymentDataRequest);
}).catch(error => {
  console.error("Error getting Google Pay payment data:", error);
});
```

### Response
#### Success Response (200)
- **paymentDataRequest** (object) - An object containing configuration for Google Pay requests.

#### Response Example
```json
{
  "apiVersion": 2,
  "apiVersionMinor": 0,
  "allowedPaymentMethods": [...],
  "merchantInfo": {
    "merchantId": "YOUR_GOOGLE_MERCHANT_ID",
    "merchantName": "Your Store"
  },
  "transactionInfo": {
    "totalPrice": "10.00",
    "totalPriceStatus": "FINAL",
    "currencyCode": "USD"
  }
}
```
```

--------------------------------

### Get Google Pay Payment Data using Epay.js

Source: https://docs.epay.eu/js/index

Retrieves an object required for `isReadyToPay` and `loadPaymentData` requests for Google Pay. The `allowedCardNetworks` are based on the current session. An optional `merchantId` can be specified; otherwise, the merchant configuration ID is used.

```javascript
epay.getGooglePayPaymentData("ASDF1234");
```

--------------------------------

### Initialize ePay.js Client and Set Callbacks

Source: https://docs.epay.eu/js/index

This JavaScript code demonstrates how to initialize the ePay.js client after including the script. It uses the session ID and key obtained from the server response. The `setCallbacks` method allows optional event listeners for various payment events.

```javascript
const epay = await ePay.init({
  sessionId: 'YOUR_SESSION_ID',
  sessionKey: 'YOUR_SESSION_KEY'
});

epay.setCallbacks({
  clientReady: () => console.log('ePay.js client is ready.'),
  invalidSession: () => console.error('Invalid session.'),
  transactionAccepted: (data) => console.log('Transaction accepted:', data),
  transactionDeclined: (data) => console.error('Transaction declined:', data)
  // ... other callbacks
});
```

--------------------------------

### Create Transaction

Source: https://docs.epay.eu/js/index

Creates a transaction with specified options, merging with any previously set payment options. Supports initiating a quick card-on-file by including `paymentMethodId` to use stored card details. Requires amount and optionally accepts store and paymentMethodId.

```javascript
epay.createTransaction({
  amount: 10000,        // Set the amount (e.g., 100.00 in minor units)
  store: true,          // Option to store the card for card-on-file
  paymentMethodId: 'stored-card-id' // Card-on-file using a stored card
})
  .then(response => {
    console.log('Transaction created successfully:', response);
  })
  .catch(error => {
    console.error('Transaction creation failed:', error);
  });
  

```

--------------------------------

### Adding a Payment Button

Source: https://docs.epay.eu/js/index

This section outlines how to add payment buttons that trigger different transaction initialization methods for various payment types, such as card, Vipps, Apple Pay, and Google Pay.

```APIDOC
## POST /websites/epay_eu_js (Conceptual - adding payment buttons is a client-side operation)

### Description
This endpoint (conceptually) describes how to implement payment buttons that initiate different Epay transaction types. It lists the available methods for creating transactions for various payment providers and highlights the requirement to use specific buttons for Apple Pay, Vipps MobilePay, and Google Pay to comply with their terms.

### Method
POST (Client-side JavaScript operation)

### Endpoint
`/websites/epay_eu_js` (Conceptual client-side path)

### Parameters
None directly for the button, but the `onclick` attribute calls Epay methods.

### Available Transaction Methods:
- `epay.createCardTransaction()`: Initializes and processes card-based payments.
- `epay.createVippsMobilePayTransaction()`: Initializes and processes Vipps-MobilePay payments.
- `epay.createApplePayTransaction()`: Initializes and processes ApplePay payments.
- `epay.createGooglePayTransaction()`: Initializes and processes GooglePay payments.
- `epay.createAnydayTransaction()`: Initializes and processes Anyday payments.
- `epay.createViabillTransaction()`: Initializes and processes Viabill payments.
- `epay.createSwishTransaction()`: Initializes and processes Swish payments.

### Request Example (Card Payment Button)
```json
{
  "example": "<button\n  type=\"button\"\n  onclick=\"epay.createCardTransaction()\"\n>\n  Pay\n<\/button>"
}
```

### Response
#### Success Response (200)
Initiates a transaction process. JavaScript events will notify the client about the transaction's progress.

#### Response Example
```json
{
  "example": "N/A - Initiates a server-side transaction process. Client-side events provide feedback."
}
```
```

--------------------------------

### Setting Payment Options

Source: https://docs.epay.eu/js/index

The `setPaymentOptions` method allows for dynamic configuration of payment parameters such as amount and whether to store the payment method for future use.

```APIDOC
## POST /websites/epay_eu_js (Conceptual - setting payment options is a client-side operation)

### Description
This endpoint (conceptually) describes the `setPaymentOptions` method, which configures transaction parameters. It is particularly useful for dynamic amounts and for saving payment methods for recurring transactions, requiring a `customerId` to be set during initialization for storage functionality.

### Method
POST (Client-side JavaScript operation)

### Endpoint
`/websites/epay_eu_js` (Conceptual client-side path)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`epay.setPaymentOptions(options)`:
- **options** (object) - The configuration object for payment options.
  - **amount** (number) - Optional - Sets the payment amount, typically in minor currency units (e.g., `10000` for 100.00). Used when dynamic amounts are enabled.
  - **store** (boolean) - Optional - When `true`, the payment method is saved for future use. Requires cardholder approval and a `customerId` set during `mountFields` initialization.

### Request Example
```json
{
  "example": "epay.setPaymentOptions({amount: 10000, store: true});"
}
```

### Response
#### Success Response (200)
No explicit response body for this client-side operation. Options are set for subsequent transaction calls.

#### Response Example
```json
{
  "example": "N/A - Client-side state update."
}
```
```

--------------------------------

### Mounting Payment Fields

Source: https://docs.epay.eu/js/index

This section details how to mount Epay payment fields to a specified HTML element and configure their appearance and behavior using an optional theme and variables.

```APIDOC
## POST /websites/epay_eu_js (Conceptual - mounting fields is a client-side operation)

### Description
This endpoint (conceptually) describes the process of mounting Epay payment fields into a designated HTML element. It allows for customization of input field appearance and behavior through a configuration object.

### Method
POST (Client-side JavaScript operation)

### Endpoint
`/websites/epay_eu_js` (Conceptual client-side path)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`epay.mountFields(id, configuration)`:
- **id** (string) - Required - The identifier of the HTML element where the fields will be mounted (e.g., "fields").
- **configuration** (object) - Optional - An object to configure the payment fields.
  - **theme** (string) - Optional - The theme to apply to the payment fields (e.g., "default").
  - **language** (string) - Optional - The language for the payment fields (e.g., "da").
  - **fields** (object) - Optional - Configuration for specific input fields.
    - **name** (object) - Configuration for the name field. `enabled` (boolean), `value` (string).
    - **pan** (object) - Configuration for the PAN (card number) field. `focus` (boolean), `showSupportedSchemes` (boolean), `showBrandSelector` (boolean).
  - **loader** (object) - Optional - Configuration for the loader element. `backgroundColor` (string), `borderStyle` (string), `height` (string).
  - **variables** (object) - Optional - Customization variables for styling.
    - **colorText** (string) - The font color for user input.
    - **inputColor** (string) - The font color for user input.
    - **inputBorderRadius** (string) - The border radius for input fields.
    - **inputBorderColor** (string) - The border color for input fields.
    - **inputFocusBorderColor** (string) - The border color when an input field is in focus.
    - **inputFontSize** (string) - The font size for input fields.
    - **inputPadding** (string) - The padding inside input fields.
    - **inputPlaceholderColor** (string) - The font color for placeholder text in input fields.
    - **inputBackgroundColor** (string) - The background color for input fields.
    - **inputBoxShadow** (string) - The box shadow for input fields.
    - **inputFocusBoxShadow** (string) - The box shadow for input fields when they are in focus.
    - **windowPadding** (string) - The padding around the window containing the payment fields.
    - **windowBackgroundColor** (string) - The background color of the window containing the payment fields.
    - **windowBorderStyle** (string) - The border style of the window containing the payment fields.
    - **windowBorderRadius** (string) - The border radius of the window containing the payment fields.
    - **windowBorderColor** (string) - The border color of the window containing the payment fields.
    - **colorDanger** (string) - The color used to indicate problems or input validation errors.
    - **colorPrimary** (string) - The primary theme color for the payment fields.

### Request Example
```json
{
  "example": "<div id=\"fields\"><\/div>\n\nepay.mountFields(\"fields\", {\n  theme: \"default\",\n  language: \"da\",\n  fields: {\n    name: { enabled: true, value: \"\" },\n    pan: {\n      focus: true,\n      showSupportedSchemes: true,\n      showBrandSelector: true,\n    },\n  },\n  loader: {\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    height: \"150px\",\n  },\n  variables: {\n    colorText: \"#2e3033\",\n  },\n});"
}
```

### Response
#### Success Response (200)
No explicit response body for this client-side operation. The fields are mounted directly in the DOM.

#### Response Example
```json
{
  "example": "N/A - Client-side DOM manipulation."
}
```
```

--------------------------------

### Mount Google Pay Button API

Source: https://docs.epay.eu/js/index

Adds a Google Pay button to a specified HTML element on the page, with customizable appearance options.

```APIDOC
## Mount Google Pay Button

### Description
Adds the Google Pay button to the layout at the specified HTML element. Allows customization of button appearance.

### Method
`mountGooglePayButton(id, options, merchantId)`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **id** (string) - Required - The ID of the HTML element where the Google Pay button will be mounted.
- **options** (object) - Optional - Configuration options for the button's appearance:
  - **buttonColor** (string) - Color of the button (e.g., "black", "white", "flat", "black.white").
  - **buttonType** (string) - Type of button action (e.g., "buy", "book", "checkout", "donate").
  - **buttonRadius** (integer) - Radius of the button corners.
  - **buttonSizeMode** (string) - Size mode of the button (e.g., "fill").
- **merchantId** (string) - Optional - The Google-assigned merchant ID to be used for this button instance.

### Request Example
```javascript
epay.mountGooglePayButton("googlePayContainer", {
  buttonColor: "black",
  buttonType: "buy",
  buttonRadius: 4,
  buttonSizeMode: "fill"
}, "YOUR_GOOGLE_MERCHANT_ID");
```

### Response
This method directly manipulates the DOM to render the button. It does not return a value but performs an action.
#### Success Response
N/A

#### Response Example
N/A
```

--------------------------------

### Include ePay.js Client Script

Source: https://docs.epay.eu/js/index

This HTML snippet shows how to include the ePay.js client script in your webpage's head section. The `src` attribute should be dynamically set using the `javascript` URL from the payment session initialization response.

```html
<script
  type="module"
  src="https://payments.epay.eu/sessions/01954c23-7baa-755c-839c-957efd4892c2/client.js"
></script>
```

--------------------------------

### Initialize Payment Session Response

Source: https://docs.epay.eu/js/index

This JSON object represents the response from initializing a payment session server-side. It contains details like the payment window URL, session information (ID, amount, currency, URLs), and the ePay.js client script URL.

```json
{
  "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"
}
```

--------------------------------

### JavaScript Events

Source: https://docs.epay.eu/js/partials/javascript-events

A list of JavaScript events that can be used to track transaction states and client interactions.

```APIDOC
## JavaScript Events

This section details the various JavaScript events dispatched by the ePay client, providing real-time updates on transaction status and user interactions.

### Events

- **`clientReady`**
  - **Description**: Dispatched once the client has successfully verified the session ID and secret.
- **`invalidSession`**
  - **Description**: Dispatched if the client is unable to verify the provided session ID and secret.
- **`challengeIssued`**
  - **Description**: Dispatched before a client redirect to the challenge page. Returning `false` from the handler can cancel follow-up events.
- **`transactionAccepted`**
  - **Description**: Dispatched when a transaction is successfully completed. Funds are guaranteed.
- **`transactionDeclined`**
  - **Description**: Dispatched when a transaction is rejected.
- **`feeUpdated`**
  - **Description**: Dispatched when the transaction fee is calculated.
- **`clientRedirect`**
  - **Description**: Dispatched before any client redirect occurs. Returning `false` from the handler can cancel the redirect behavior.
- **`invalidInput`**
  - **Description**: Dispatched if the payment method input cannot be used for processing.
- **`inputValidity`**
  - **Description**: Dispatched when the end-user provides input during payment method validity checks.
- **`inputSubmit`**
  - **Description**: Dispatched when the user submits fields directly within the input fields.
- **`sessionExpired`**
  - **Description**: Dispatched if the session has expired. Returning `false` from the handler can cancel follow-up events.
- **`paymentCancel`**
  - **Description**: Dispatched when the end-user cancels a payment for supported methods like ApplePay.
- **`confirmSurcharge`**
  - **Description**: Dispatched if a surcharge or fee is added to the transaction. If you wish to display a surcharge confirmation UI, ensure you return `false` in your event handler, as the transaction will otherwise continue without waiting for cardholder consent. Call `epay.process()` to continue the transaction or `epay.cancelTransaction()` to cancel it.
- **`error`**
  - **Description**: Dispatched on any error not covered by other specific events.
```

--------------------------------

### Set Epay Payment Options

Source: https://docs.epay.eu/js/index

Configures payment options such as the transaction amount and whether to store the payment method for future use. This is crucial for dynamic amount settings and enabling features like quick deposits, which may require additional configuration like `customerId` and user consent.

```javascript
epay.setPaymentOptions({amount: 10000, store: true});
```

--------------------------------

### Mount Payment Fields with Customization

Source: https://docs.epay.eu/js/index

Mounts the ePay.js payment fields into a specified HTML container. The mountFields method accepts a configuration object to customize the appearance (theme, variables), language, and behavior of the fields, including optional additional input fields like cardholder name.

```javascript
epay.mountFields("fields", {
  theme: "default",
  language: "en",
  fields: {
    name: {
      value: "John Doe"
    },
    pan: {
      focus: true,
      showSupportedSchemes: true,
      showBrandSelector: true
    }
  },
  variables: {
    colorText: "#000000",
    borderRadius: "5px"
  }
});
```

--------------------------------

### Mount Google Pay Button using Epay.js

Source: https://docs.epay.eu/js/index

Adds the Google Pay button to the specified element in the layout. It requires the `id` of the HTML element and accepts an optional `options` object for customizing the button's appearance and behavior, as well as an optional `merchantId`.

```javascript
epay.mountGooglePayButton("googlePayContainer", {
  buttonColor: "black",
  buttonType: "buy",
  buttonRadius: 48,
  buttonSizeMode: "fill",
});
```

--------------------------------

### Add Payment Button for Card Transactions

Source: https://docs.epay.eu/js/index

Provides an HTML button element that, when clicked, initiates a card-based payment transaction using `epay.createCardTransaction()`. Ensure this method is called within the context of a user interaction.

```html
<button
  type="button"
  onclick="epay.createCardTransaction()">
  Pay
</button>
```

--------------------------------

### Mount Epay Payment Fields

Source: https://docs.epay.eu/js/index

Mounts the Epay payment fields to a specified HTML element. This function accepts an optional configuration object for theme, language, field settings, loader, and custom variables. Ensure the target div with the specified ID exists in your HTML.

```html
<div id="fields"></div>
```

```javascript
epay.mountFields("fields", {
  theme: "default",
  language: "da",
  fields: {
    name: { enabled: true, value: "" },
    pan: {
      focus: true,
      showSupportedSchemes: true,
      showBrandSelector: true,
    },
  },
  loader: {
    backgroundColor: "transparent",
    borderStyle: "none",
    height: "150px",
  },
  variables: {
    colorText: "#2e3033",
  },
});
```

--------------------------------

### Process Transaction

Source: https://docs.epay.eu/js/index

Resumes a halted transaction process. This method is typically only needed if your implementation pauses transaction processing midway, for instance, during a surcharge confirmation.

```javascript
epay.process()
  

```

--------------------------------

### Calculate Fee for Stored Payment Method API

Source: https://docs.epay.eu/js/index

Calculates the transaction fee for a specific stored payment method. It can optionally use a provided amount or the default session amount.

```APIDOC
## Calculate Fee for Stored Payment Method

### Description
Calculates the fee for a specific stored payment method (such as a saved card). It requires a `paymentMethodId` and optionally accepts a `request` object with an `amount`.

### Method
`calculateStoredPaymentMethodFee(paymentMethodId, request)`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **paymentMethodId** (string) - Required - ID of the stored payment method.
- **request** (object) - Optional - An object that can include:
  - **amount** (integer) - The amount to calculate the fee for, in the smallest currency unit (e.g., `100` for 1.00).

### Request Example
```javascript
// Example with default amount
epay.calculateStoredPaymentMethodFee("0295ec1b-a6b0-7701-8050-31b0add07282").then((fee) => {
  console.log("Calculated Fee (default amount):", fee);
}).catch((error) => {
  console.error("Error calculating fee:", error);
});

// Example with specified amount
epay.calculateStoredPaymentMethodFee("0295ec1b-a6b0-7701-8050-31b0add07282", { amount: 5000 }).then((fee) => {
  console.log("Calculated Fee (specified amount):", fee);
}).catch((error) => {
  console.error("Error calculating fee:", error);
});
```

### Response
#### Success Response (200)
- **fee** (number) - The calculated fee in the smallest currency unit.

#### Response Example
```json
{
  "fee": 50
}
```
```

--------------------------------

### Calculate Fee for Stored Payment Method using Epay.js

Source: https://docs.epay.eu/js/index

Calculates the fee for a specific stored payment method, such as a saved card. It requires a `paymentMethodId` and optionally accepts a `request` object with an `amount`. If no amount is provided, the default session amount is used. This is useful for displaying expected transaction fees to users before payment.

```javascript
epay.calculateStoredPaymentMethodFee("0295ec1b-a6b0-7701-8050-31b0add07282").then((fee) => {
    console.log("Calculated Fee (default amount):", fee);
}).catch((error) => {
    console.error("Error calculating fee:", error);
});
```

--------------------------------

### Clearing Payment Fields

Source: https://docs.epay.eu/js/index

The `clearFields` method resets all input fields within the payment component without unmounting or reloading it. This is useful for allowing users to re-enter card details.

```APIDOC
## POST /websites/epay_eu_js (Conceptual - clearing fields is a client-side operation)

### Description
This endpoint (conceptually) describes the `clearFields` method, which resets all input fields (PAN, CVC, expiry) in the Blocks component. It does not unmount or reload the component and is typically used when a user needs to re-enter payment details.

### Method
POST (Client-side JavaScript operation)

### Endpoint
`/websites/epay_eu_js` (Conceptual client-side path)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`epay.clearFields(id)`:
- **id** (string) - Required - The container identifier (e.g., "fields") that was used when calling `epay.mountFields(id)`. The method will only function if the provided ID matches the one used for mounting.

### Request Example
```json
{
  "example": "epay.clearFields(\"fields\");"
}
```

### Response
#### Success Response (200)
No explicit response body for this client-side operation. The fields are reset in the DOM.

#### Response Example
```json
{
  "example": "N/A - Client-side DOM manipulation."
}
```
```

--------------------------------

### Delete Stored Payment Method API

Source: https://docs.epay.eu/js/index

Allows a customer to delete a stored payment method (e.g., a card) via the frontend. Once deleted, the payment method cannot be used for future card-on-file transactions.

```APIDOC
## Delete Stored Payment Method

### Description
Allows the customer to delete a stored card via the frontend. Once a stored payment method is deleted, it can no longer be used for card-on-file transactions.

### Method
`deleteStoredPaymentMethod(paymentMethodId)`

### Endpoint
Not applicable (client-side method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **paymentMethodId** (string) - Required - The unique identifier of the payment method to delete.

### Request Example
```javascript
epay.deleteStoredPaymentMethod("your-payment-method-id").then((response) => {
  console.log("Stored payment method deleted successfully:", response);
}).catch((error) => {
  console.error("Error deleting stored payment method:", error);
});
```

### Response
#### Success Response (200)
- **response** (object) - An object indicating the success of the deletion operation.

#### Response Example
```json
{
  "status": "success",
  "message": "Payment method deleted."
}
```
```

--------------------------------

### Cancel Transaction

Source: https://docs.epay.eu/js/index

Cancels any current transaction for the session, but only before operations like authorizations have begun. Useful for scenarios like surcharge confirmation dialogs where the transaction needs to be canceled if the user declines.

```javascript
epay.cancelTransaction()
  

```

--------------------------------

### Delete Stored Payment Method using Epay.js

Source: https://docs.epay.eu/js/index

Allows a customer to delete a stored payment method (e.g., a card) via the frontend. Once deleted, the payment method cannot be used for future card-on-file transactions. This action is typically customer-initiated and ensures stored card data is removed.

```javascript
epay.deleteStoredPaymentMethod(paymentMethodId).then((response) => {
    console.log("Stored payment method deleted successfully:", response);
}).catch((error) => {
    console.error("Error deleting stored payment method:", error);
});
```

--------------------------------

### Clear Epay Input Fields

Source: https://docs.epay.eu/js/index

Resets all input fields (PAN, CVC, expiry) within the Epay Blocks component. This method requires the ID of the container element that was used during the `mountFields` call. It's useful for allowing users to re-enter card details.

```javascript
epay.clearFields("fields");
```
Tokens:
Raw