Payment window

This article runs through the different options a merchant has to change the payment window through branding and how to setup your own logo in the payment window.

Please note that brandings cost € 3 per branding per month

New Payment Window Design

Quickpay introduces a new modern payment window design.

For far too long the Quickpay standard branding of the payment window has felt outdated and something that belonged to one or two decades ago. Now we can proudly present a new updated design which reflects the modern times and hopefully lives up to the expectations of our merchants.


Opt-in and download

We know that changing the look and feel of your payment window can be considered a huge change and can cause insecurity if the end-customer no longer recognises the payment page as they are used too. Therefore we have made the new payment window design as opt-in. What this means is that the new Branding will be available in your Quickpay Manager, where you select your default branding. Besides the “standard branding” there will now be an additional opportunity called “2025 Standard Branding”. By adding the 2025 version as your standard branding, you can adapt the new design, without any additional fees.

You can also download the new Standard Branding from our GitHub (https://github.com/QuickPay/standard-branding/) which has been updated as well.

EAA

With the new payment window design we have made several usability upgrades which should make the new payment window compliant with the European Accessibility Act which was introduced as of July 1st 2025. This provides end-customers with limited functionalities or other disabilities to be able to complete a transaction with the help of assisted tools and more.

If you are customising the branding of the payment window yourself, we strongly encourage that you make sure that your version is living up to the standards of the European Accessibility Act as well. Quickpay cannot be held liable for the compliance of the payment window in cases where any form for customisation has been made. In these cases it is entirely up to the individual merchant to comply with the regulations.

Read more about the European Accessibility Act here: https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en

Customised branding and functionality

All functionalities regarding to the payment window remains the same, and it’s simply a visual overhaul. There could easily be a desire for more, but we didn’t want to make any changes that would affect all the merchants of ours which has spent a lot of resources on customising their own version of the payment window.

Creating customised brandings Is still very possible, and your existing brandings does still work as previously. However we urge you all to check our new version of the standard-branding on our GitHub (https://github.com/QuickPay/standard-branding/) to get updated with the latest files, logo’s etc. which is not automatically being added to your branding.


End of life

The old version of the standard branding will eventually be deprecated and no longer supported. The specific date is yet to be announced, but this will most likely not be happening before the end of 2025. Nonetheless we urge our merchants with or without custom brandings, to start adapting the new version.

Visa/Dankort co-branding

We wish to inform you, that Visa has made som new requirements, that imposes on traders, that uses both Dankort and Visa-payments to let the cuatomers choose the Visa or Dankort part of the card.

This function is now avaliable in the Quickpay standard paymentwindow. But will only be an option if the account has a Visa and a Dankort agreement activated, so both logos show in the payment window.

Specifically this means that, when the customers enter a Visa/Dankort, they will get the option to choose between Dankort and Visa.

For the costumers they will be able to press on the logo for Dankort or Visa, if they want to use that part of the card for the payment.

If you are using your own branding of the payment window, you will need to update to the newest branding version 2.2.1, to get the option in the payment window.

Get your shop logo in the payment window

You can get your own logo in the payment window without creating a new branding, and therefore without any fee.

To get your logo into the payment window simply upload your logo from the Quickpay Manager, and the logo will automatically be shown when loading the payment window.

1. Go to Settings > Merchant in the Quickpay Manager

2. Click UPLOAD NEW LOGO and select a logo in a fitting size (eg. 250x250).

Now the logo will automatically be shown in the payment window.

Change font

If you wish to use a special font, you can. We support TTF and Woff/Woof2 fonts.

Step 1 - Log into the Quickpay Manager and navigate to Settings > Brandings

Step 2 - Click the branding where you wish to use your font.

Step 3 - Click the menu button in the top right corner and choose Upload new file

Step 4 - Now choose the font file. Once you have selected it and clicked ok, you need to specify a path in front of the file name. Simply write “fonts/” in front of the file name, as shown on the image below.

Step 5 - Find the file “stylesheets/paymentwindow.css” and click Edit

Now input the following code (in this example we use a font called Lobster-Regular)

@font-face {
    font-family: Lobster-Regular;
    src: url(../fonts/Lobster-Regular.ttf);
}

Step 6 - Change the used font

body, td {
  font-family: Lobster-Regular, arial, tahoma, verdana, sans-serif;
}

Finish by clicking Save.

Branding Config

Through branding config it is possible to change certain elements in the payment window.

Branding config can be changed in the payment request or by creating a branding.

Not all shopsystem-modules support branding config, and will have to be set in branding instead.

Branding

It is also possible to change through the branding config, in the branding system.

In the file config.json the relevant values can be changed.

Cardholders name in the payment window

If you wish to have your customer type in their name in the payment window, this can be activated by setting

{
    "enable_card_holder_field": true
}

In the payment window there will now be a field for the cardholders name.

The name can now be found on the payment, under metadata > issued_to

Cardholder activation of 3-D Secure

If you wish to give the customer the possibility to force a payment through 3-D Secure this can be done by setting

{
    "enable_3d_card_field": true
}

Cardholder can now activate 3-D Secure in the payment window.

Please note - if your payment method is set to: 3d-creditcard - the “Enable 3-D Secure” field will not be shown in the payment window, because it would defeat the purpose of the other setting

Set title in browser

If you wish to set the ’title’ shown in the browser tab, it can be done by defining

{
    "title": "Sko Butik"
}

Autojump

If you want to use autojump, meaning that that when you have filled out eg. card number it automatically jumps to expiration month, it can be done by setting

{
    "autojump": true
}

Variables in the payment window

Depending on your shops flow, target group and what product/sevice you are selling, it can sometimes be a good idea to add some extra information to the payment window.

By using branding it is possible to have the customers address, basket with items or other self-defined variables. These information can be sent along with it, when the payment is created. You can read more about this on our tech site.

It is possible to completely change the payment window, and thereby the possibilities to add extra information are endless.

This example is based on a wish to have a customer number shown in the payment window, next to the other standard information. In the creation of the payment, the customer number is sent as a variable called “customer”.

Next you need to create a new branding under Settings > Brandings in the Quickpay Manager, and setting this as default.

Download branding, and open the file templates/order_info.liquid

Input

<dt>Customer no</dt> <dd>{{ model.variables.customer}}</dd>

in this example it is entered in the end of the file

When the payment window is opened, it is show as such

It is also possible with other information, that is sent to the payment window, such as invoice_address, shipping_address or basket

If you want the customers name it can be done by writing

<dt>Dit navn</dt> <dd>{{ model.invoice_address.name}}</dd>

Or you can show the basket by writing

{% for basket in model.basket %}

<dt>{{basket.item_name}}</dt> <dd>{{basket.item_price}}</dd>

{% endfor %}

Language in the payment window

The payment window is also available in a variety of languages. You define the language’shown in the payment window, by using the variable “language”. This is done where you call the payment window from your shop. Example below.

"language"	 => da

The language can also be chosen in the Quickpay Manager under Settings > Integration, where you can choose a Default payment window language

In the link below you can se a list of the currently supported languages.

https://github.com/Quickpay/standard-branding/tree/master/locales

If you have an alternative language request, simply contact us, and we’ll try to find a solution to have it added.

Amount when creating a subscription

If you wish to show an amount in the payment window when creating a subscription, it is done through branding.

• Log into the Quickpay Manageren and navigate to Settings > Branding
• Click the desired branding
• Find the file templates/form/card.liquid and click ‘Edit’
• Find the line that states:

{% t Create subscription %}

And change to the following:

{% t Create subscription %} - <span id="total-field"> - {{ model.formatted_amount }} {{ model.currency }}</span>

Click ‘Save’. Remember to call your branding id either through your shopsystem or by choosing it as your standard branding under Settings > Branding

Next time you open the payment window it looks like this:

Make fields required

If you wish to make fields required to be filled out before it is possible to click Pay it is done as follows:

• Log into the Quickpay Manager and navigate to Settings > Branding
• Click the desired branding
• Find the file templates/form/card.liquid and click ‘Edit’
• Find the line that states:

<input type="tel" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric">

And change to the following:

<input type="tel" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric" required>

Change text in the payment window

First download the file you want to edit, eg. the Danish text. In the Quickpay-manager Go to Settings -> Brandings, click on the branding you want to edit. Find the file (for Danish) locales_da_DK_LC_MESSAGES_branding.po click the download button to right. Open the file with a PO Editor, eg. PoEdit. When you have made your changes, compile the file to MO. The file is now named locales_da_DK_LC_MESSAGES_branding.mo Upload the new file to your branding in the Quickpay-manager.

Use iteration

If you wish to use iteration in the payment window, naturally there is a guide for this.

Best practice

Need help for Liquid operators, types etc. we can recommend Liquid

Examples of what can be done with branding