
With a combination of an XML layout, javascript and css you are able to customize the payment window according to your needs.
You can also upload pictures, which will be shown in the payment window, to make an integration where the customer doesn't notice that they have left your shop to pay. You can do this and still expect the same safety standards as when using the standard FlexWin payment window.
Nets provides two options to easily implement a responsive payment window:
- Out-of-the-box responsive payment window - use the 'decorator=responsive' parameter. Read more about this feature on the input parameters page.
- Download and customize responsive payment window. Requires our "Integration" product is enabled on your solution.
Decorator Examples
The following code illustrates what the content of a decorator.xml file could be. This example produces a very simple FlexWin decoration. The screen-dump below the code shows its appearance in step 2 of the payment.
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:dibs="http://www.dibs.dk/paymentweb"> <head> <title>Payment</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> <dibs:progress /> <hr /> <p> Amount: <dibs:amount /><br /> Order ID: <dibs:shopvar name="orderid" /><br /> Order text: <dibs:shopvar name="ordertext" /> </p> <hr /> <dibs:paytypeSelector /> <dibs:payment /> </body> </html>
FlexWin does not currently have a DIBS tag for showing order information, such as the delivery address, ordered items, and the price of each item. However, if you know your way around JavaScript and XML, you can display that information in your own decorator.
The trick is to send the order information along to FlexWin in the parameters deliveryx, priceinfox, and ordlinex-y as described in the section "Parameters". In addition, you need four "new" parameters, which will tell your JavaScript just how many instances there is of each line (the x/y part of the parameter name), e.g., how many delivery lines there are. These extra parameters are only referred to from your own code, and have no effect elsewhere, so you may call them what you like. In the following implementation, we will use the following names:
- deliveryx: The number of delivery lines.
- priceinfox: The number of priceinfo lines.
- ordlinesx: The number of order lines (0-based).
- ordlinesy: The number of fields in each order line.
Please note that you need to enable the return of all CGI variables in DIBS Administration under Integration > Return Values.
Also note, that the order information is not available on the final receipt page of FlexWin.
The order
For this example, we will use the following order information:
- The delivery address is "Elmer Fudd, Main Street 100, 12300 Elsewhere". We will split the address into three delivery lines with an initial header line, i.e. four delivery lines.
- The price information merely contains the sum total of the purchase. So there is only one line of priceinfo.
- Elmer Fudd is ordering several pieces of home entertainment. Three TVs and two HiFi amplifiers. Each order line will contain the ID of the item, a description, the number of items ordered, and the price. In addition we will provide a header line. So the number of order lines is three, and the number of fields per order line is four. Please note, that the counter for order lines i 0-based, so the three order lines will be numbered 0 through 2. All the other counters start from 1.
The form
The idea is that we will have an HTML form with all the necessary parameters for FlexWin as hidden fields. So the delivery lines are specified like this:
<input type="hidden" value="Delivery address" name="delivery1" /> <input type="hidden" value="Elmer Fudd" name="delivery2" /> <input type="hidden" value="Main Street 100" name="delivery3" /> <input type="hidden" value="12300 Elsewhere" name="delivery4" />
The price information one-liner is specified like this:
<input name="priceinfo1" value="3,317.00" type="hidden"/>
The order information matrix is composed like this:
<input name="ordline0-1" value="ID" type="hidden"/> <input name="ordline0-2" value="Description" type="hidden"/> <input name="ordline0-3" value="Number" type="hidden"/> <input name="ordline0-4" value="Price (USD)" type="hidden"/> <input name="ordline1-1" value="102" type="hidden"/> <input name="ordline1-2" value="42" Plasma TV" type="hidden"/> <input name="ordline1-3" value="3" type="hidden"/> <input name="ordline1-4" value="2,997.00" type="hidden"/> <input name="ordline2-1" value="201" type="hidden"/> <input name="ordline2-2" value="Amplifier" type="hidden"/> <input name="ordline2-3" value="2" type="hidden"/> <input name="ordline2-4" value="320.00" type="hidden"/>
Finally, we add the extra counter parameters:
<input name="deliveryx" value="4" type="hidden"/> <input name="ordlinex" value="2" type="hidden"/> <input name="ordliney" value="4" type="hidden"/> <input name="priceinfox" value="1" type="hidden"/>
Again, please note that ordlinex is 0-based.
The decorator
Now comes the part, where we take the order information, and display it in FlexWin through our decorator. All parameters sent to FlexWin, are stored in hidden fields. So if we know the IDs of these fields, we can access them through JavaScript. Each ID is a concatenation of the string "cancelform_" and the parameter name. E.g. the value of parameter "delivery1" is stored in the hidden field with the ID "cancelform_delivery1". As the IDs indicate, the hidden fields are associated with the cancel button. So in the decorator, the JavaScript has to be located after the DIBS tag dibs:payment, which includes the cancel button. Using JavaScript we will construct the necessary HTML for the order information, and then insert it into a designated area in our decorator — a DIV tag.
Of course you can just have your JavaScript code write HTML directly. But in this example, we want to display the order information before dibs:payment. We do this by having an (almost) empty DIV tag before dibs:payment, and then having our JavaScript generate the order information and inserting it into the DIV tag.
The DIV tag must have an ID and a little content, so we just give it the ID "ordercontent" and a period as content:
<div id="ordercontent">.</div>
Now comes the JavaScript code, which generates the order information output. Most likely you will want to implement your own JavaScript code. This merely serves as an example on how to loop through the order information.
<script language="JavaScript" type="text/javascript"> <![CDATA[ var ordertext = new String; ordertext = ""; ordertext += "<p><br /><b>" + document.getElementById("cancelform_delivery1").getAttribute("value") + ":</b> "; ordertext += document.getElementById("cancelform_delivery2").getAttribute("value"); ordertext += ", " + document.getElementById("cancelform_delivery3").getAttribute("value"); ordertext += ", " + document.getElementById("cancelform_delivery4").getAttribute("value")+ "</p>"; ordertext += "<table style="background-color:#dddddd">"; for (x = 0; x <= document.getElementById("cancelform_ordlinex").getAttribute("value"); x++) { ordertext += "<tr>"; for (y = 1; y <= document.getElementById("cancelform_ordliney").getAttribute("value"); y++) { ordertext += "<td"; if (y == 3) { ordertext += " align="center"" } if (y == 4) { ordertext += " align="right"" } ordertext += ">"; ordertext += document.getElementById("cancelform_ordline" + x.toString() + "-" + y.toString()).getAttribute("value"); ordertext += "</td>"; } ordertext += "</tr>"; } for (x = 1; x <= document.getElementById("cancelform_priceinfox").getAttribute("value"); x++) { ordertext += "<tr>"; for (y = 1; y < document.getElementById("cancelform_ordliney").getAttribute("value"); y++) { ordertext += "<td></td>"; } ordertext += "<td align="right">"; ordertext += document.getElementById("cancelform_priceinfo" + x.toString()).getAttribute("value"); ordertext += "</td>"; ordertext += "</tr>"; } ordertext += "</table>"; //alert(ordertext); document.getElementById("ordercontent").innerHTML = ordertext; ]]> </script>
All of this will result in the display of the order information as shown in this image: