FlexWin (Method 1)
- DIBS tags
To help you display various information during payment, you can use DIBS specific HTML-like tags. They range from simple ones, such as displaying an amount, to extremely complex ones, such as the payment form. The generic syntax for DIBS tag inclusion is:
<dibs:tag-name />
In the examples below, the resulting classes and IDs are shown in bold. These are the ones to access when you want to imprint your own style on FlexWin. As a rule of thumb, IDs are handled through JavaScript, while class elements are handled through the style sheet.
The list of DIBS specific tags:
Tag | Description |
<dibs:amount /> | The basis amount of the purchase. |
<dibs:fee /> | The fee amount of the purchase. |
<dibs:total /> | The sum total of dibs:amount and dibs:fee of the purchase. |
<dibs:payment /> | This tag shows the payment itself, the content of which depends on which step you are in the payment process. |
<dibs:paytypes /> | Displays a textual link back to the first page in FlexWin, where you have the list of payment types. Empty if FlexWin is called with the argument paytype. |
Displays a selection box with all valid payment types. It must be used along with the payment form (<dibs:payment />), so that the selection box and the payment form are presented together, allowing the user to select a different payment type. The page is refreshed automatically upon selection of another type. | |
<dibs:progress /> | Depending on which step has been reached in the payment process, this tag changes accordingly. |
<dibs:shopname /> | The name of the shop. |
<dibs:shopvar name="varname" /> | All parameters posted to FlexWin can be extracted via this tag. E.g., the order ID can be fetched by <dibs:shopvar name="orderid" />, "orderid" being a required parameter, as described above. Other parameters may be forwarded to FlexWin, after which they can be redisplayed, e.g. <dibs:shopvar name="username" />. |
<dibs:text name="textname" /> | This tag is used for displaying specific text in the correct language. I.e. <dibs:text name="amount" /> will be converted into the text "Amount" on English language sites and "Beløb" on Danish language sites. |
<dibs:trigger expression> content </dibs:trigger> | The content between the start and end tag is displayed, depending on whether the expression evaluates to true. E.g., <dibs:trigger name="calcfee"> is true if FlexWin has been called with the parameter calcfee. |
dibs:amount
The tag is substituted with the amount incl. currency. The resulting HTML is similar to this:
<span id="amountField">1.00 DKK</span>
In FlexWin it will appear like this:
The textual format of the amount is determined by the language of shop, which is specified in DIBS Administration. You cannot fetch amount and currency separately, nor can you change the textual format, decimal separator or currency code.
dibs:fee
This tag is only relevant, if FlexWin has been called with the parameter for fee calculation, calcfee. Any fee amount will be shown here, which depends on the payment method. Until the payment method has been determined, the tag will only show a hyphen. As soon as a card number has been entered, the tag will be updated automatically via Ajax calls back to the server. No page reloads are necessary to update the tag. The final HTML for the browser may look like this:
<span id="feeField">1.42 DKK</span>
Display, format and limitations are similar as for dibs:amount.
dibs:total
This tag is only relevant, if FlexWin has been called with the parameter for fee calculation, calcfee. The total amount of the purchase, i.e. the sum of amount and fee, will be shown here. Until the fee has been calculated, it will show the base amount. As soon as the fee has been calculated, the tag will be updated automatically via Ajax calls back to the server. No page reloads are necessary to update the tag. The final HTML for the browser may look like this:
<span id="totalField">2.42 DKK</span>
Display, format and limitations are similar as for dibs:amount.
dibs:payment
This is the core of FlexWin, the place where the payment takes place. The content of this complex tag changes from payment step to payment step, and includes choice of payment method, entering card data into the payment form, and displaying a receipt.
The payment form may contain an input field for the card holder's name. This is enabled in DIBS administration.
The HTML that comes of this tag is extensive. But in order to give you an overview of the classes and IDs involved, it is shown below, cut down to a minimum.
Choice of payment method:
- Choice of payment method (step 1).
<div id="payment">
<form id="payreturn" name="cancelform" onsubmit="customOnsubmit(); return true;"
action="..." method="post">
...
<div align="right" id="wwctrl_payreturn_0"><button type="submit"
id="payreturn_0" value="Cancel">Cancel</button>
</div>
</form>
...
<form id="paytypeItem_MC" name="paytype" onsubmit="customOnsubmit(); return true;"
action="/paymentweb/paytype.action">
...
<div class="paytypeItem"><span>•</span><div align="right"
id="wwctrl_paytypeLink_MC"><button type="submit" id="paytypeLink_MC"
value="MasterCard" class="paytypeName" style="">MasterCard</button>
</div>
<div align="right" id="wwctrl_paytypeLogo_MC"><input type="image" alt="logo"
src="/cardlogos/6_s.gif" id="paytypeLogo_MC" value="logo" class="paytypeLogo"/>
</div> </div></form>
...
<form id="paytypeItem_MTRO" name="paytype" onsubmit="customOnsubmit(); return true;"
action="/paymentweb/paytype.action">
...
<div class="paytypeItem"><span>•</span><div align="right"
id="wwctrl_paytypeLink_MTRO"><button type="submit" id="paytypeLink_MTRO"
value="Maestro" class="paytypeName" style="">Maestro</button>
</div>
<div align="right" id="wwctrl_paytypeLogo_MTRO"><input type="image" alt="logo"
src="/cardlogos/2004_s.gif" id="paytypeLogo_MTRO" value="logo"
class="paytypeLogo"/>
</div> </div></form>
...
The payment form:
- Filling out the payment form (step 2).
<div id="payment"><div class="paytypeItem">
<div ... class="paytypeLogo"/></div>
<div style="padding-right: 10px;" class="paytypeName">
<span class="header">Payment using ...</span></div></div>
<form id="payreturn" name="cancelform"
onsubmit="customOnsubmit(); return true;" action="..." method="post">
...
<div align="right" id="wwctrl_payreturn_0"><button type="submit"
id="payreturn_0" value="Cancel">Cancel</button></div>
</form>
...
<div id="formInput"><input type="hidden" name="cardId" value="..." id="cardId"/>
<form id="auth" name="paymentform" onsubmit="customOnsubmit(); return true;"
action="auth.action" target="_self" method="post">
...
<div id="wwgrp_auth_cardholder_name" class="wwgrp">
<div id="wwlbl_auth_cardholder_name" class="wwlbl">
<label for="auth_cardholder_name" class="label"><span class="required">*</span>
Cardholder name:</label></div>
<br /><div id="wwctrl_auth_cardholder_name" class="wwctrl">
<input type="text" name="cardholder_name" size="20" value=""
id="auth_cardholder_name"/></div> </div>
<div id="wwgrp_auth_cardno" class="wwgrp">
<div id="wwlbl_auth_cardno" class="wwlbl">
<label for="auth_cardno" class="label"><span class="required">*</span>
Card number:</label></div>
<br /><div id="wwctrl_auth_cardno" class="wwctrl">
<input type="text" name="cardno" size="20" value=""
id="auth_cardno" onblur="void(0);"/></div> </div>
<div id="wwgrp_auth_expmon" class="wwgrp">
<div id="wwlbl_auth_expmon" class="wwlbl">
<label for="auth_expmon" class="label"><span class="required">*</span>
Expiry month:</label></div>
<br /><div id="wwctrl_auth_expmon" class="wwctrl">
<input type="text" name="expmon" size="3" maxlength="2" value=""
id="auth_expmon"/></div> </div>
<div id="wwgrp_auth_expyear" class="wwgrp">
<div id="wwlbl_auth_expyear" class="wwlbl">
<label for="auth_expyear" class="label"><span class="required">*</span>
Expiry year:</label></div>
<br /><div id="wwctrl_auth_expyear" class="wwctrl">
<input type="text" name="expyear" size="3" maxlength="2" value=""
id="auth_expyear"/></div> </div>
<div id="wwgrp_auth_cvc" class="wwgrp">
<div id="wwlbl_auth_cvc" class="wwlbl">
<label for="auth_cvc" class="label"><span class="required">*</span>
CVC/CVV:</label></div>
<br /><div id="wwctrl_auth_cvc" class="wwctrl">
<input type="text" name="cvc" size="5" maxlength="3" value=""
id="auth_cvc"/></div> </div>
<div align="right" id="wwctrl_auth_0"><button type="submit" id="auth_0"
value="Validate payment" onclick="void(0);">Validate payment</button></div>
</form>...</div></div>
The receipt:
- Showing the receipt on the final page (step 3).
<div class="message"><div class="icon"><img alt="" height="28" width="30"
src="images/ico_ok.gif"/></div><div><span>Payment
accepted.</span><span> Click "Next" to show receipt</span>
<form id="payreturn" name="acceptform" onsubmit="customOnsubmit(); return true;"
action="..." method="post">
...
<div align="right" id="wwctrl_payreturn_0"><button type="submit"
id="payreturn_0" value="Next">Next</button>
</div>
</form>
...
</div></div>
dibs:paytypes
This tag will create a textual link to the first FlexWin page, i.e. the page which lists the available pay types. It only appears once a pay type has been chosen, and it will remain empty if FlexWin was called with the paytype argument. If shown, the HTML will look similar to this:
<a href="paytype.action?paytype=all">Payment method</a>
dibs:paytypeSelector
This tag will only generate content in conjunction with the payment form, i.e. dibs:payment. Then it will display a selector box from which the user may choose another payment type.
For instance, a shop may accept both Visa and Mastercard, and the user has chosen Visa from the paytype list. When she gets to the payment form, she may still change her mind and choose Mastercard instead. With this tag, she can make the change immediately, and does not have to return to step 1. The page reloads automatically, and the relevent input form is shown instead.
Even if FlexWin has been called with the argument "paytype", you may still choose another payment method with this tag. If however, a shop only accepts one payment type, then it makes no sense to use dibs:paytypeSelector.
The resulting HTML is fairly extensive, and also contains JavaScript. The following example has therefore been shortened to a minimum to give you a better outline.
<div id="paytypeSelector">
<form id="paytypeSelectorForm" onsubmit="customOnsubmit(); return true;"
action="paytype.action" method="post">
<div id="wwgrp_paytypeSelectorForm_paytypeChange" class="wwgrp">
<div id="wwlbl_paytypeSelectorForm_paytypeChange" class="wwlbl">
<label for="paytypeSelectorForm_paytypeChange"
class="label">Valgt betalingsform:</label></div>
<br /><div id="wwctrl_paytypeSelectorForm_paytypeChange" class="wwctrl">
<select name="paytypeChange" id="paytypeSelectorForm_paytypeChange"
onchange="paytypeReload()">
<option ...>...</option>
...
</select>
</div></div>
</form>
...
</div>
dibs:progress
To inform the user of the number of steps involved in the payment, and the progress through them, you can use the dibs:progress tag. The progress involves three steps, which are shown as an enumerated list. The current step is shown in bold. From step 2 and step 3 you may click back to previous steps. The HTML looks like the following, which is taken from step 2:
<div id="progress">
<div id="progressStep1" class="progressStep"><a
href="paytype.action?paytype=all">1. Payment method</a></div>
<div id="progressStep2" class="progressStep"><b>2. Validate payment</b></div>
<div id="progressStep3" class="progressStep">3. Payment accepted</div>
</div>
dibs:shopname
This tag is substituted by the name of shop, without any HTML involved. Just the pure text of the name of the shop.
dibs:shopvar
FlexWin utilizes a range of so-called shop variables. The variables contain data pertaining to the given shop, e.g. language setting, URLs, and more. The content of these variables are shown as pure text. The following example displays the order number of the current purchase:
<dibs:shopvar name="orderid">
The list of shop variables contains:
accepturl, amount, calcfee, callbackurl, cancelurl, currency, fee, lang, merchant, orderid, ordertext, and username.
dibs:text
All the text that is shown in FlexWin is fetched from a language database, in order to support different languages. These texts are displayed by using the dibs:text tag. This example show the purchase information:
<dibs:text name="purchase_info">
The list of text names includes:
action_back, action_continue, action_stop, cancel, amount, card_no, choose, close, cvc_info, dibs_mini_text, dibs_payment, dibs_text, not_accepted, order_id, payment_accepted, payment_declined, and purchase_info.
dibs:trigger
Sometimes you may want to display parts of your decorator only under certain conditions. Then this tag may be of use, which serves as a kind of if-statement, but which is fairly complex. The output is not HTML/JavaScript, but Struts2 expressions, which are processed server-side.
It's primary use is internally in other DIBS tags, and it is limited to evaluating textual comparisons on shop variables. Numeric comparison is not possible, and you cannot combine multiple expressions with "and/or" constructs. For instance, it is used in the DIBS decorators for showing an optional fee and a total amount:
<dibs:trigger name="calcfee">
<dd><strong><dibs:text name="fee" />
</strong><dibs:fee /></dd>
<dd><strong><dibs:text name="total_amount" /></strong>
<strong><dibs:total /></strong></dd>
</dibs:trigger>
The dibs:trigger tag takes three attributes, two of which are optional. The generic syntax for the attributes is:
name="..." [operator="..." [value="..."]]
where the value for "name" is a shop variable name, the value for "operator" is either "eq" or "neq" (equal/not equal), and the value for "value" is either "null", some text, or another shop variable name.
Example 1
<dibs:trigger name="calcfee">
is interpreted as: If the shop variable calcfee is different from null.
Example 2
<dibs:trigger name="preauth" operator="eq">
is interpreted as: If the shop variable preauth is equal to null.
Example 3
<dibs:trigger name="paytype" operator="eq" value="'V-DK'">
is interpreted as: If the shop variable paytype is equal to the exact string "V-DK".
