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

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