Branding of payment window

Is it possible to create a custom designed payment window? A payment window with a design simular to the shop design, instead of the standard Quickpay payment window?

First of all. Our experience tells us that shops using our payment window has a better conversion rate than shops with a custom designed payment window.

Studies has shown, that shoppers feels more safe, when using our payment window instead of custom designs. However, the answer to question above: Yes. You can design/brand the payment window.

The easy and simple solution: Upload your logo to the payment window. This is done from the Quickpay-manager.
The more advance solution which offers complete branding - read more below.
The third option is to use Shopify. They are PCI-compliant and therefore it is possible to have a designed/integrated payment window with them.

Templates

Quickpay standard

Download XML-file

Download CSS-file

Guide to Branded payment window

A branded window consists of a template, a stylesheet and a number of pictures. Please note that you have a limit of 512 KB for your files all together.

- Template file must be named branded.xml and must start with

<?xml version="1.0" encoding="UTF-8"?>
<body xmlns="http://www.quickpay.net/branded-xhtml" xmlns:qp="http://www.quickpay.net/branded-qp">

and end with

</body>

All HTML between the body tags must observe the xHTML standard. It is not possible to upload a template that does not respect the standard. Also it is not allowed to use javascript.

There is a number of qp tags you can use:

<qp:amount/>
Order amount in format #.###,##

<qp:shopname/>
Your merchant name

<qp:shoplogo/>
Inserts img tag with path to the logo you have uploadet in the Quickpay-manager

<qp:changetype/>
Inserts link to change payment method

<qp:shopvar name="variabel navn"/>
Inserts chosen variable without any formatting. Following variables are available:

currency - Currency
type - Payment or subscription
ordernumber - Order number
amount - Amount

<qp:text name="text example"/>
Inserts translations of "text example" if a translation exists. If there is no translation, then will "text example" be shown unchanged. Remember that "text example"-variables starts with a capital letter.

Currency - Currency
Type - Payment or subscription
Order number - Order number
Amount - Amount

<qp:cancelbutton/>
Inserts a cancel button that redirects to cancelurl.

<qp:payment>
<qp:submittext name="complete" value="Pay" />
<qp:submittext name="continue" value="Continue" />
</qp:payment>
The first button is used with standard creditcard payments, where you enter card details and click Pay. The second button is used with eg eDankort, where you choose bank and click Continue.

<qp:payment/>
Inserts "Choose payment method", Form to enter card information, Info-text and link to external payment (Danske bank, Nordea etc.) or Error message if payment failed.

<qp:paytypes/>
Inserts logoes for every allowed card type. Shown with "Enter card information" and indicates which card types that can be entered.

Example that shows Visa-Dankort and Mastercard:
<p id="paytypes">
<img class="paytypes_card" src="/form/gfx/cards-s/dankort.gif" alt="Dankort / Visa-Dankort" title="Dankort / Visa-Dankort"/>
<img class="paytypes_card" src="/form/gfx/cards-s/mastercard.gif" alt="Mastercard" title="Mastercard"/>

<qp:progress/>
Inserts breadcrumb that shows where you are in the payment process. The format are:

<div id="breadCrumbsContainer"><span id="bread-crumb-active">Select payment method</span> » Complete payment » Receipt

<qp:trigger name="variabel_navn" operator="eq/neq" value="værdi">html</qp:trigger>
Inserts html between <qp:trigger ...> and </qp:trigger> if shopvar (see <qp:shopvar>) "variable_name" is equal/not equal with (eq/neq) "value".

Path to pictures should be set as "/images/picture.name"

Regarding CSS the following classes are defined as standards. It is recommended, that you do not overrule these classes in your own stylesheet files.

  .bgWhite {
      background: #ffffff;
  }

  .left {
      text-align: left;
  }
  .right {
      text-align: right;
  }
  .center {
      text-align: center;
  }

  .fleft {
      float: left;
  }
  .fright {
      float: right;
  }

  .underline {
      text-decoration: underline; 
  }
  .bold {
      font-weight: bold;
  }

  .inline {
      display: inline;
  }
  .hidden {
      display: inline;
  }
  .block {
      display: block;
  }
  .nowrap {
      white-space: nowrap;    
  }
  .maximize {
      width: 100%;    
  }
  .vmiddle {
      vertical-align: middle; 
  }

You also have different options for branding the payment window with CSS:

#cvdHelpBtn { display: none; }
If you want to remove our link to CVD-help.

Branding and transaction fees

Imagine that the tabel below is a part of a tabel to show order details.

We will use a trigger to control wether fee and total should be shown for the chosen card type, if the fee can be calculated up front based on the chosen card type.s

Examples