Styling - DIBS Technical Documentation

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.

Responsive payment window
DIBS 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 file description

Decorator

The main decorator file is the decorator.xml file, that describes the layout of FlexWin. It is also here the scripting- and css file that is uploaded has to be included, if not they will not be included in the layout of FlexWin. The body of the following code example 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 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 example above, the tag "<dibs:amount>" is replaced with the preformated purchase amount by the DIBS system. These tags may only be used in the body of the xml file. 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 contain much more code generated by the DIBS system.
It is also possible to use HTML meta tags in the decorator. As an example, the ‘viewport’ tag can be used to control the scaling of the FlexWin window on mobile devices:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />

Script

This is an ordinary Javascript file, containing scripts to be used by FlexWin.

Please note:
The name of the javascript file has to be "decorator.js" and the file should be included in the header part of the decorator.xml, 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

If you want to add your own style to FlexWin, this is configured through a regular CSS stylesheet. If you want to alter the style used in the "DIBS tags" please see the following description of the "DIBS tags" for identifiers used in FlexWin.

Please note:
When uploading a stylesheet, then name of the file has to be "decorator.css" for it to work. The file should also be included in the header of the decorator.xml file as shown in the following example.

<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 decoration of FlexWin. Images are included within the body part of the decorator, similar to the following example:

Please note:
A certain amount of disk space has been reserved for your decorator files and images. The status of free space is shown in the DIBS administration where you upload the decorator files.
You may upload any number of images, as long as you do not exceed the allocated disk space.
You are only allowed to include images, that have been uploaded in the DIBS Administration.
Supported image formats are JPEG, PNG, GIF, and ICO.

...
<img src='/images/logo.gif' alt="" />
...

The relative path for your images is "/images/". If you have uploaded a picture "yourPicture.jpg" the src of the <img> has to be "/images/yourPicture.jpg".

Favorites icon

You may use you own icon for use in a browser's bookmarks and address field as long as this is uploaded to DIBS like any other image.

Add the icon as illustrated below.

...
<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>
...

DIBS Tags

Introduction

To help you display various information during payment, you can use DIBS custom tags. They range from simple tags, such as displaying an amount, to more complex ones, such as the payment form. The generic syntax for DIBS tag inclusion is:

<dibs:*tag-name* />

The DIBS tags are listed below (for a complete description of the tags, please use the slider menu):

Tag	Description
<dibs:amount />	The basic amount of the purchase.
<dibs:fee />	The fee amount of the purchase.
<dibs:total />	The total sum of dibs:amount and dibs:fee of the purchase.
<dibs:payment />	This tag shows the payment process (the content depends on where the customer is in the payment flow).
<dibs:paytypes />	Displays a textual link back to the first page in FlexWin, where you have the list of payment types. Please note: Nothing is displayed if FlexWin is called with the parameter name="paytype" and only when the value is one paytype ex. value="VISA".
<dibs:paytypeSelector />	Displays a paytype selection box when the payment form is shown, allowing the customer to select a different paytype after a paytype has been choosen in step 1.
<dibs:progress />	Depending on the step of 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. Other parameters may be posted to and used by FlexWin.
<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.
<dibs:voucheramount />	Displays the amount covered by a voucher.
<dibs:voucherrest />	Displays the remaining amount on the used voucher.

amount

The tag:

<dibs:amount />

is substituted with the amount incl. currency. The resulting HTML is similar to this:

<span id="amountField">1.00 DKK</span>

The syntax of the amount (what type of seperator e.g. ',' or '.') is determined by the language of the shop, which is specified in DIBS administration.

Note: You cannot get the amount and currency seperated from each other

fee

The tag:

<dibs:fee />

is substituted with the fee incl. currency. The resulting HTML is similar to this:

 <span id="feeField">1.42 DKK</span>

Any fee amount will be shown here, depending on the paytype and if the parameter "calcfee" has been sent along the call. Until the paytype has been determined, the tag will only show a dash. As soon as a card number has been entered, the tag will be updated automatically.

The syntax of the fee (what type of seperator e.g. ',' or '.') is determined by the language of the shop, which is specified in DIBS administration.

Note: You cannot get the fee amount and currency seperated from each other.

total

The tag:

<dibs:total />

is substituted with the total amount (amount + fee) incl. currency. The resulting HTML is similar to this:

 <span id="totalField">2.42 DKK</span>

The total amount of the purchase will be shown here. If there is no fee or if the fee hasn't been calculated, only the base amount will figure as the total amount. When the fee has been calculated, the tag will be updated automatically.

The syntax of the total amount (what type of seperator e.g. ',' or '.') is determined by the language of the shop, which is specified in DIBS administration.

Note: You cannot get the total amount and currency seperated from each other

payment

The tag:

<dibs:payment />

is substituted with the input form.

This is the core of FlexWin, 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 input fields for the card holder information. This is enabled in the DIBS administration in the menu:

Integration / Cardholder Info

The HTML that replaces this tag is extensive. In order to give you an overview of the classes and IDs involved, please see the following examples.

<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>
...

<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&
quot;/>
<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>

<div class="message"><div class="icon"><img alt="" height="28" width=&
quot;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>

paytypes

The tag:

<dibs:paytypes />

This tag will create a textual link to the FlexWin paytype selector (first page). It only appears once a paytype has been chosen or the parameter name="paytype" contains more than one paytype e.g. value="VISA,MC". If shown, the HTML will look similar to this:

<a href="/paytype.action?paytype=all">Payment method</a>

paytypeSelector

The tag:

<dibs:paytypeSelector />

This tag will display a selector box from which the user may choose another paytype when a paytype has already been chosen. If used, the resulting HTML is similar to:

<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>

Even if FlexWin is called with the parameter "paytype", the customer may still choose between all available paytypes.

progress

The tag:

<dibs:progress />

will be replaced by some progress information. The HTML that replaces this tag will be similare to the following:

<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>

To inform the customer how many steps they have to complete pay 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 go back to previous steps.

shopname

The tag:

<dibs:shopname />

is substituted by the name of the shop, without any HTML involved. Just the name of the shop as pure text.

shopvar

The tag:

<dibs:shopvar name="*parameterName*" />

is replaced with the value of the paramter sent to FlexWin. The tag can display all parameters sent along the call to FlexWin.

The following example displays the order ID of the current purchase:

<dibs:shopvar name="orderid" />

If the following parameter is sent to FlexWin, the value can be displayed in FlexWin.

...
<input type="hidden" name="*parameterName*" value="*someValue*" />
...

To display this value in FlexWin, write the tag:

<dibs:shopvar name="*parameterName*" />

This tag is then replaced with *someValue*.

text

The tag:

<dibs:text name="*someTextName*" />

is replaced by text which is fetched from a language database, in order to support different languages. The following example shows 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, fee, payment_accepted, payment_declined, and purchase_info, voucher_coverage, voucher_rest.

trigger

Sometimes you may want to display parts of your decorator only under certain conditions. In that case you can use the trigger tag 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" constructions. For instance, it is used in the DIBS decorators for showing an optional fee and a total amount:

The dibs:trigger tag takes three attributes, of which two 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.

<dibs:trigger name="calcfee">  // interpreted as: If the shop variable calcfee is different from null.

<dibs:trigger name="preauth" operator="eq">  // interpreted as: If the shop variable preauth is equal to null.

<dibs:trigger name="paytype" operator="eq" value="'V-DK'">  // interpreted as: If the shop variable paytype is equal to the exact string "V-DK".

voucheramount

The tag:

<dibs:voucheramount />

will be replaced the total amount covered by the used voucher.

voucherrest

The tag:

<dibs:voucherrest />

will be replaced by the remaining amount on a voucher.

Decorator Examples

Example 1

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>

Order lines workaround

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&quot; 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:

FLEXWIN STYLING

Decorator file description

Decorator

Script

Stylesheet

Images

Favorites icon

DIBS Tags

Introduction

amount

fee

total

payment

paytypes

paytypeSelector

progress

shopname

shopvar

text

trigger

voucheramount

voucherrest

Decorator Examples

The order

The form

The decorator