FlexWin (Method 1)
- Decorators
A decorator is a new feature of FlexWin compared to the Payment Window, and allows the customer to apply another design onto it. This feature is part of the Integration add-on package, which is included in some of the standard DIBS packages, or which may be purchased seperately. For further details, please refer to your local DIBS support or call DIBS on one of the numbers listed at the bottom of this page.
You can change the look and behavior of FlexWin through the following files:
- The decorator (decorator.xml)
- The script file (decorator.js)
- The style sheet (decorator.css)
- Images
Download the Flexwin default decorator here.
These files are uploaded in the DIBS Administration under "Integration > FlexWin" (see screen dump below). The file names must be decorator.xml, decorator.js and decorator.css. Regardless of what the files are called on your computer, they will automatically be renamed to the correct names upon upload. As a consequence, uploading more than one of each type of decorator file with different local names, will merely overwrite the previous one. Supported image formats are GIF, JPEG and PNG.
Decorator file — decorator.xml
This is the main file of a decorator. It is an XML file, which describes the layout of FlexWin. The file is parsed upon upload to verify the syntax. In principal it will suffice to decorate FlexWin. Most of the code in the following example will be identical for most FlexWin decorators. The parts in bold will typically be where you put your own content.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dibs="http://www.dibs.dk/paymentweb">
<head>
<title>config-test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<h1><dibs:shopname /></h1>
<div class="message">
<p>orderid: <dibs:shopvar name="orderid" /></p>
<p>amount: <dibs:amount /></p>
<p>fee: <dibs:fee /></p>
</div>
<dibs:payment />
</body>
</html>
Please note the DIBS specific tags. The DIBS system provides a list of these tags, which will display certain blocks of information when implemented in the XML file. In the previous example, the tag "<dibs:amount>" is replaced with the preformated purchase amount by the DIBS system. These tags may only be used between <body> and </body>. The DIBS tags are replaced by HTML and occasionally JavaScript each time FlexWin is shown, so the resulting code sent to the user's browser will be much lengthier — too long for display here.
Script file — decorator.js
This is an ordinary JavaScript file, containing scripts to be used by FlexWin. Please note, that if you choose to include a JavaScript file in your decorator, then the file name has to be decorator.js, due to the automatic renaming of the file upon upload in DIBS Administration. The file should be included in the header part of the decorator, like this:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="decorator.js" type="text/javascript"></script>
...
</head>
Stylesheet file — decorator.css
This is a regular CSS stylesheet. From here you may apply your own style upon FlexWin. Please refer to the section "DIBS tags" for class names used in FlexWin. Please note, that if you choose to use a stylesheet in your decorator, then the file name has to be decorator.css, due to the automatic renaming of the file upon upload in DIBS Administration. The file should be included in the header of the decorator:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="decorator.css" type="text/css" />
...
</head>
Images
You can upload images to be used in your decorator. A certain amount of disk space has been reserved for your decorator files and images. So you may upload any number of images, as long as you do not exceed the allocated disk space. (Please refer to DIBS Administration for details.) Supported image formats are JPEG, PNG, GIF, and ICO. Images are included within the body part of the decorator, similar to this example:
... <img src="images/logo.gif" alt="" /> ...
You are only allowed to include images, that have been uploaded in DIBS Administration. Please notice the relative path "images/", which must preceed the image file names.
Favorites icon
You may use you own icon for use in a browser's bookmarks and address field. Upload your icon, and add a link to the icon as illustrated here:
...
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:dibs="http://www.dibs.dk/paymentweb">
<head>
<title>Acme</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon"
href="images/favicon.ico" />
</head>
...
