FlexWin Responsive Decorator

The decorator has a responsive design that adapts seamlessly to the browser window size of any device.

Download and modify Responsive standard

The DIBS Responsive decorator is designed to fit the new DIBS corporate design. The decorator has a responsive design that adapts seamlessly to the browser window size of any device. Most importantly this decorator will provide a higher conversion rate of customers.

The decorator is built using the standard XML and CSS files of FlexWin that can easily be edited in any suitable editor.

This gives you the freedom to modify the decorator in order to adapt better to the design of your web shop. With a basic skill level in HTML and CSS you may do small modifications yourself, such as changing the logotype or the background color. However, for more extensive modifications, and depending on your skill level, you may want to hire a highly skilled professional.

Please refer to the styling page for more information about the decorator files in general, or if you want an Out-of-the-box responsive payment window.

Please note Support is only available on a “getting started” level by contacting DIBS support in your country by telephone or e-mail. Support for modifications and redesign is only available as a separate consultant service where you pay per hour or an agreed upon fixed price.

Desktop and Mobile versions may have different styles. Some of the elements below have slightly different styles on Desktop and Mobile, and  take special care when replacing logos. Make changes to CSS with great care – if you do not know what the CSS property does, do not modify it, since it might break the layout only on some of the browsers.

Download decorator   Download guide

The DIBS brand is well known in the Nodic markets, and a symbol for a safe and serious online store. This recognition benefits you by increasing your conversion, and even helps customers trust your store.

To continuously get this recognition, it’s very important that we use the same logo in all touch points; in both your shop and checkout pages.

We included DIBS Secure Payment logos for you convenience in the decorator XML file and commented them out.
To enable logo for English language, please uncomment everything between these comments:

<!-- DIBS Secure logo EN -->

...

<!-- //DIBS Secure logo EN -->

The process is the same for other languages as well - find the comment for appropriate language and uncomment everything between those comments.

The DIBS Secure Payment logo is available in English, Danish, Norwegian and Swedish.

The header background is set with a CSS pseudo-element, which can be found by CSS selector .region-body:after. To adjust background color, change the background value to your desired color in HEX. To adjust text color, change the color value to your desired color in HEX.

.region-body:after {
    display: block;
    background: #0094cf;
    color: #ffffff;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 210px;
    z-index: 2;
}

The mobile version of Flexwin has a sticky header. Styles for the sticky header can be found by the CSS selector .fixed-header. To adjust background color, change the background value to your desired color in HEX. To adjust text color, change the color value to your desired color in HEX.

.fixed-header {
    display: block;
    position: fixed;
    background: #0094CF;
    color: #000000;
    height: 22px;
    left: 0;
    right: 0;
    padding: 9px 10px;
    z-index: 5;
    overflow: visible;
    top: -40px;
    transition: top 0.2s ease-in;
}

Please note that the sticky header is set to be invisible on Desktop version.

There are two main buttons for the whole payment process.

Styles for the Payment method button can be found by the CSS selector #btnAuthSubmit. The positioning wrapper is found under #wwctrl_btnAuthSubmit. To adjust background color, change the background-color value to your desired color in HEX. To adjust text color, change the color value to your desired color in HEX.

#wwctrl_btnAuthSubmit {
    background-color: #ffffff;
    color: #000000;
    padding: 20px 0 0;
}
#btnAuthSubmit {
    background-color: #ffffff;
    color: #000000;
    font-size: 18px;
    padding: 4px 25px 3px;
}

Styles for the Continue button can be found by the CSS selector #btn_continue. The positioning wrapper is found under #wwctrl_btn_continue. To adjust background color, change the background-color value to your desired color in HEX. To adjust text color, change the color value to your desired color in HEX.

#wwctrl_btn_continue {
    background-color: #ffffff;
    color: #000000;
    margin-top: 30px;
    margin-bottom: 10px;
}
#btn_continue {
    background-color: #ffffff;
    color: #000000;
    font-size: 18px;
    padding: 3px 25px 2px;
}

Option 1

Changing the logo is the most complicated part of the Flexwin. The logo can be identified by the CSS selector .brand__link.

Please note that default implementation has 6 different logos – one for the Desktop version, one for the Mobile version, one for the sticky header and each of those logos with double-sized images for high density displays (such as MacBook Pro Retina, iPhone, iPad, etc.).

If you are not planning to support high density displays, simply remove all styles associated with it at the end of decorator.css file (search for the comment /** high density displays */ and remove everything below).

Please note that if you set size for the logo element, make sure it is of the same size as the actual image, otherwise add background-size property and define desired size in pixels.

If this sounds too complicated, please consider Option 2.

Option 2

If you have the logo of your company available on your servers, you can simply add <img src=”URL_TO_YOUR_LOGO” alt=”Company name” /> in decorator.xml pointing to your logo inside <a href=”#” class=”brand__link”></a> and remove the class “brand__link”, otherwise you might get unexpected results.

<div class="brand">
    <a href="/"><img src="/URL_TO_YOUR_LOGO" alt="Company name" /><dibs:text name="dibs_payment" /></a>
</div>

Payment type logos (Visa, Amex etc.) are not part of this decorator, but are a standard feature of FlexWin. The size of these logos can be changed in Dibs Admin under Integration -> FlexWin, and they should be set to “Large” to fit this decorator.

To upload your design to DIBS server, you need log in to the DIBS administration and go to the following menu.

Integration / FlexWin

Here you are able to upload the new design through three decorator files as well as all the pictures you are using in your design.

When all the files and images are uploaded, your FlexWin payment window should then have the new layout.

Please contact DIBS support, if you have any questions.

Known errors

Wrong format input fields

If you use a custom designed responsive decorator, and experience that the validation in the input fields are formatted wrong, it is due to a known error in the previous version of the decorator.

The input fields will look like this:

To fix this, remove the following lines from your decorator.js file (the "Scripting" file):

// this forces IE to repaint input field, otherwise input text gets cut
if(typeof $.browser.msie !== 'undefined' && $.browser.msie true) {
           $this.width('100.01%');
           setTimeout(function() {
                      $this.width('100%');
           }, 1);
}

Do you have a question or need help?
Follow us
DIBS Payment Services
Stockholm +46 (0)8-527 525 00
Göteborg +46 031-600 800
København +45 7020 3077
Oslo +47 21 55 44 00