Payment, shipping and order completion

On the payment and shipping method page, the buyer makes two decisions, both of which change the price. The shop system takes a lot of work off the template here: two single tags generate the complete selection lists for payment methods and shipping methods, including all div elements, class names and IDs. This page first describes these two large tags and how to style the result via CSS. After that come the details that result from the selection: delivery date, shipping costs, weight and volume. At the end are the minimum order value and the follow-up order, which both define the scope of the order.

Reference: The introduction to the WS- prefix is on Shop, page and technology
Reference: Terms and conditions, addresses and age verification are on Order process, addresses and checks

Displaying the payment methods

<form action="~FORM-PayDeliv~" method="post">
   <h3>Bitte wählen Sie eine Zahlungsart</h3>
   ~WS-PaymentFields~
</form>

WS-PaymentFields generates the complete selection of all configured payment methods. The order results from the order of the sections in the shop configuration. The tag belongs exactly once on the payment and shipping method page, inside FORM-PayDeliv.

The generated HTML code cannot be customized. If you need a different structure, build the selection payment method by payment method using the PAY-Data tags instead. This takes more effort, but is entirely in your hands.

Reference: Individual positioning with the PAY-Data tags is described on PAY- (payment methods)

The structure per payment method

For each available payment method, a main container is created with these components, in this order:

Container	Contains	Appears
`logo`	the image of the payment method, otherwise a non-breaking space	always
`radio`	the radio button	always
`text`	the name of the payment method	always
`ccard`	the selection of the credit card type	only if it is selected there
`payexbank`	the selection of the bank	only for DirectDebitPayEX
`clear1`	nothing, only for the layout	always
`remarks`	the additional details, see below	if needed
`clear2`	nothing, only for the layout	always
`disabled`	the reason for unavailability	only for a grayed-out payment method
`clear3`	nothing, only for the layout	always

Further containers can be located inside remarks: suffix for an additional description, inputsuffix1 to inputsuffix3 for up to three additional input fields, costcentername and costcenteremail for the cost center payment method, and up to ten paymentcountryrule containers for country-dependent additional details.

The class names

Each container gets up to four classes following a fixed pattern:

Class	Applies
`ws_paymentdiv_<Container>`	the same for all payment methods
`ws_paymentdiv_<Container>_<Nummer>`	per position in the configuration
`ws_paymentdiv_<Container>_active`	only for the selected payment method
`ws_paymentdiv_<Container>_disabled`	only for an unavailable payment method

In addition, each container gets an ID:

id="ws_paymentdiv_<Container>_id_<Zahlungsartencode>"

The numbered class is the way to alternating background colors: give the odd numbers a different color than the even ones. The number depends on the position in the shop configuration, not on the payment method code.

The _active class is the reason why the selected payment method can be highlighted without your own JavaScript. If the highlighting should change as soon as the buyer clicks, without reloading the page, store your own script for this via the RadioOnClick or ImgOnClick parameters in the shop configuration.

The pattern differs for the country-dependent additional details: there, the configured ID of the additional detail is placed between the container and the rest, for example ws_paymentdiv_paymentcountryrule_<Kennung>_name. In addition, in case of an error, there is a class with _error appended.

Displaying the selected payment method

{WS-Payment}
   <p>Ihre Zahlungsart: ~WS-Payment~</p>
{/WS-Payment}

{WS-BankInfo}
   <p>Bitte überweisen Sie auf folgendes Konto:<br>~WS-BankInfo~</p>
{/WS-BankInfo}

{WS-PaymentConfirmText}
   <p>~WS-PaymentConfirmText~</p>
{/WS-PaymentConfirmText}

Tag	Returns
`WS-Payment`	the name of the selected payment method
`WS-BankInfo`	the merchant’s bank details for prepayment
`WS-PaymentConfirmText`	a text stored for the payment method for the confirmation page

WS-BankInfo only applies if prepayment was selected. The bank details are in the PaymentPrepayment-Txt section of the shop configuration, not in the template. That is how it should be, because they change independently of the design.

WS-PaymentConfirmText is the place for notes that only belong to one payment method, for example the request to specify the payment reference. The text is located in the respective payment method section of the shop configuration.

Displaying the shipping methods

<form action="~FORM-PayDeliv~" method="post">
   <h3>Bitte wählen Sie eine Versandart</h3>
   ~WS-DeliveryFields~
</form>

WS-DeliveryFields works on the same principle as WS-PaymentFields, only leaner. For each shipping method, five containers are created: logo, radio, text, the optional suffix and clear.

Class	Applies
`ws_deliverydiv_<Container>`	the same for all shipping methods
`ws_deliverydiv_<Container>_<Nummer>`	per position in the configuration
`ws_deliverydiv_<Container>_active`	only for the selected shipping method

<div id="ws_deliverydiv_main_id_XYZ" class="ws_deliverydiv_main ws_deliverydiv_main_1">
   <div id="ws_deliverydiv_logo_id_XYZ" class="ws_deliverydiv_logo ws_deliverydiv_logo_1">
      <img src="../../navigation/grafiken/logo-XYZ.png" onclick="selectDelivererImage('XYZ');">
   </div>
   <div id="ws_deliverydiv_radio_id_XYZ" class="ws_deliverydiv_radio ws_deliverydiv_radio_1">
      <input id="ws_deliverydiv_inputelement_id_XYZ"
             class="ws_deliverydiv_inputelement ws_deliverydiv_inputelement_1"
             type="radio" name="ws_input_delivery" value="XYZ">
   </div>
   <div id="ws_deliverydiv_text_id_XYZ" class="ws_deliverydiv_text ws_deliverydiv_text_1">
      <p id="ws_deliverydiv_name_id_XYZ" class="ws_deliverydiv_name ws_deliverydiv_name_1">
         Name-Txt Country-Txt
      </p>
      <div id="ws_deliverydiv_suffix_id_XYZ" class="ws_deliverydiv_suffix ws_deliverydiv_suffix_1">
         Suffix-Txt
      </div>
   </div>
   <div id="ws_deliverydiv_clear_id_XYZ" class="ws_deliverydiv_clear ws_deliverydiv_clear_1"></div>
</div>

The example on the previous page inserts the configured ID of the shipping method into the classes, i.e. ws_deliverydiv_main_XYZ. According to the rule above, the sequential number goes there, and the ID belongs exclusively in the id. The corrected version is shown above. Otherwise, anyone who styles the classes by ID will wonder why their rules don’t apply.

The ID in the id is only created if an ID is assigned in the +Deliverer section of the shop configuration. Without an ID, there is no id, and you cannot target the individual shipping method.

Displaying the selected shipping method

Tag	Returns
`WS-Delivery`	name and delivery area of the selected shipping method
`WS-DeliveryID`	its configured ID
`WS-DeliveryIndex`	its internal index
`WS-DeliveryCost`	the shipping costs

{WS-Delivery}
   <p>Versand mit ~WS-Delivery~ für ~WS-DeliveryCost~ ~WS-Currency~.</p>
{/WS-Delivery}

WS-Delivery outputs two details together: the name from the Name-Txt parameter and the delivery area from the optional Country-Txt parameter, separated by a space. Both are in the +Deliverer section of the shop configuration.

If the order is delivered to several addresses, there is more than one shipping method. All three tags then show the first one used in the shopping cart. For a breakdown per item, use the shopping cart tags.

WS-DeliveryIndex exists in the shop system but is not described in the previous documentation. It returns the internal number of the shipping method. Unlike the other two tags, it also outputs 0, i.e. the state with no shipping method selected. This makes it more meaningful than WS-DeliveryID for troubleshooting, but unsuitable for display in the shop.

The first time one of these tags is evaluated, the shop system calculates the shipping costs and filters the available shipping methods. This happens once per page build, so using them multiple times costs nothing extra.

The preferred delivery date

There are two variants, a simple one and an advanced one. Both consist of one tag for the selection and one for the display.

Selection	Display	Configuration
`WS-DelivDateFields`	`WS-DelivDate`	`DeliveryDate` section
`WS-AdvDelivDateFields`	`WS-AdvDelivDate`	`AdvDeliveryDate` section

<!-- auf der Zahlungs- und Versandartenseite -->
~WS-DelivDateFields~

<!-- auf der Bestellübersicht und der Bestätigungsseite -->
{WS-DelivDate}
   <p>Ihr Wunschtermin: ~WS-DelivDate~</p>
{/WS-DelivDate}

Choose one of the two variants. They are alternatives, not additions.

WS-DelivDateFields only outputs something on the payment and shipping method page, and in an express checkout. On any other template, the spot remains empty, without an error message. WS-AdvDelivDateFields is also permitted on the order overview page.

The selection tags generate the finished selection list. Which dates it contains and how far into the future they reach is set in the corresponding section of the shop configuration.

Defaults for fast ordering

A buyer who orders frequently can store payment method and shipping method as defaults in their account. Four tags offer this to them.

<label>
   <input type="checkbox"
          name="~WS-FastOrderDefaultPayment_input~"
          ~WS-FastOrderDefaultPayment_checked~>
   Diese Zahlungsart künftig voreinstellen
</label>

<label>
   <input type="checkbox"
          name="~WS-FastOrderDefaultDelivery_input~"
          ~WS-FastOrderDefaultDelivery_checked~>
   Diese Versandart künftig voreinstellen
</label>

The four tags exist in the shop system but are not described in the previous documentation. The _input tags return fixed field names, the _checked tags return checked and also work as bracketing.

The checkmark appears if the currently selected method matches the default stored in the account. For the shipping method, the shop system does not compare the individual shipping method but its group. If several shipping methods are in the same group, the default applies to all of them.

Both tags require a logged-in buyer. Without login, the bracketing does not apply, and the checkbox would have no effect. Therefore, place the block in {ST-LoggedIn}.

<a href="~WS-FastOrderConfigurationLink~">Einstellungen zur Schnellbestellung</a>

WS-FastOrderConfigurationLink leads to the page on which the buyer manages these defaults. The link is permitted on all templates and belongs at least on the customer account page.

The minimum order value

Tag	Returns
`WS-MinOrder-Value`	the configured minimum order value
`WS-MinOrder-Base`	the basis against which it is checked
`WS-MinOrder-Remaining`	the missing amount

{WS-MinOrder-Remaining}
   <p>
      Es fehlen noch ~WS-MinOrder-Remaining~ ~WS-Currency~
      bis zum Mindestbestellwert von ~WS-MinOrder-Value~ ~WS-Currency~.
   </p>
{/WS-MinOrder-Remaining}

WS-MinOrder-Base is not the displayed goods value. The value can be higher, for example if a percentage voucher is not included in the check. Therefore, do not calculate the missing amount yourself, but use WS-MinOrder-Remaining. Otherwise, you give the buyer an amount that does not match the check they are about to fail.

WS-MinOrder-Base and WS-MinOrder-Remaining also work as bracketing. WS-MinOrder-Value is exclusively a single tag.

Free shipping

{WS-FreeDeliveryRest}
   <p>Noch ~WS-FreeDeliveryRest~ ~WS-Currency~ bis zum versandkostenfreien Einkauf.</p>
{/WS-FreeDeliveryRest}

WS-FreeDeliveryRest requires a scale to be stored in the shop configuration that goes to 0 at a certain amount, for example BasicCost-List = (0:10)(200:8)(300:0).

If the shop uses several shipping service providers, the +Deliverer section with this scale must be in first place in the shop configuration. Otherwise, the tag calculates against a different scale, and the stated remaining amount is incorrect.

Weight, volume and pallets

Tag	Returns
`WS-TotalWeight`	the total weight of the order
`WS-TotalVolume`	the total volume
`WS-Pallets`	the number of pallets required

{ST-Basket_OK}
   {WS-Pallets}
      <p>Für den Versand werden ~WS-Pallets~ Paletten benötigt.</p>
   {/WS-Pallets}
{/ST-Basket_OK}

The volume either comes from a direct volume specification on the product or is calculated from length, width and height. Which method applies depends on what is maintained in the product data.

WS-Pallets works as bracketing if any pallets are needed at all. For shops with bulky goods, this is the note that saves a query to customer service.

The template information in the previous documentation names the file ws_confirm.htm as the order overview page for WS-TotalWeight and WS-TotalVolume. ws_confirm.htm is the order receipt confirmation. The order overview is ws_place_order.htm.

Price type and VAT country

{WS-PriceTypeGross}
   <p>Alle Preise verstehen sich inklusive Mehrwertsteuer.</p>
{/WS-PriceTypeGross}

{!WS-PriceTypeGross}
   <p>Alle Preise verstehen sich zuzüglich Mehrwertsteuer.</p>
{/!WS-PriceTypeGross}

Tag	Returns
`WS-PriceTypeGross`	applies if the displayed prices are gross prices
`WS-VATRateDefinitionISO-Standard`	the country stored by default for the tax calculation
`WS-VATRateDefinitionISO-Used`	the country currently used

The two country tags differ when the delivery address is in a country other than the default country. Comparing them lets you explain on the order overview page why a different tax rate applies than on the product page.

{WS-VATRateDefinitionISO-Used}
   <p>Steuerberechnung nach den Sätzen von ~WS-VATRateDefinitionISO-Used~.</p>
{/WS-VATRateDefinitionISO-Used}

Follow-up orders

If a buyer orders again shortly after their last order, the shop can treat this as a follow-up order and, for example, offer special shipping conditions. Six tags describe this state.

Tag	Returns
`WS-SubSequentOrder_Qualified`	applies if the next order counts as a follow-up order
`WS-SubSequentOrder_TimeLimitInHours`	the configured period in hours
`WS-SubSequentOrder_TimeLimitInSecs`	the same period in seconds
`WS-SubSequentOrder_TimeLeftInSeconds`	the remaining time in seconds
`WS-SubSequentOrder_TimestampLastOrder`	the timestamp of the last order taken into account
`WS-SubSequentOrder_TimestampExpire`	the timestamp until which the rule applies

{WS-SubSequentOrder_Qualified}
   <p>
      Folgebestellung möglich bis
      ~DC-DateTime_setunixtimestamp($WS-SubSequentOrder_TimestampExpire$)~
      ~DC-DateTime_day(true)~.~DC-DateTime_month(true)~.~DC-DateTime_year(true)~
      um ~DC-DateTime_hours(true)~:~DC-DateTime_minutes(true)~ Uhr.
   </p>
{/WS-SubSequentOrder_Qualified}

WS-SubSequentOrder_Qualified is exclusively a bracketing. As a single tag, the shop system explicitly reports an invalid tag, so there is no silent empty output.

The four time and timestamp tags only apply inside {WS-SubSequentOrder_Qualified}. Outside of it, they return nothing, and a calculation with them produces meaningless values.

All time details are seconds or timestamps. For readable output, convert them with the DC-Int tags or insert the timestamp into the DC-DateTime tags, as in the example.

The two period tags also work as bracketing if the function is set up at all. If the period is set to 0 in the shop configuration, they remain silent. This lets you restrict a note to shops in which the function is active.

Reference: The arithmetic operations are described on DC- (DesignControl)

The tags at a glance

Tag	Single tag	Range tag	Negative range tag	Loop tag
`WS-PaymentFields`	yes	–	–	–
`WS-Payment`	yes	yes	yes	–
`WS-PaymentConfirmText`	yes	yes	yes	–
`WS-BankInfo`	yes	yes	yes	–
`WS-DeliveryFields`	yes	–	–	–
`WS-Delivery`	yes	yes	yes	–
`WS-DeliveryID`	yes	yes	yes	–
`WS-DeliveryIndex`	yes	yes	yes	–
`WS-DeliveryCost`	yes	yes	yes	–
`WS-DelivDateFields`	yes	–	–	–
`WS-DelivDate`	yes	yes	yes	–
`WS-AdvDelivDateFields`	yes	–	–	–
`WS-AdvDelivDate`	yes	yes	yes	–
`WS-FastOrderDefaultPayment_input`	yes	–	–	–
`WS-FastOrderDefaultPayment_checked`	yes	yes	yes	–
`WS-FastOrderDefaultDelivery_input`	yes	–	–	–
`WS-FastOrderDefaultDelivery_checked`	yes	yes	yes	–
`WS-FastOrderConfigurationLink`	yes	–	–	–
`WS-MinOrder-Value`	yes	–	–	–
`WS-MinOrder-Base`	yes	yes	yes	–
`WS-MinOrder-Remaining`	yes	yes	yes	–
`WS-FreeDeliveryRest`	yes	yes	yes	–
`WS-TotalWeight`	yes	–	–	–
`WS-TotalVolume`	yes	–	–	–
`WS-Pallets`	yes	yes	yes	–
`WS-PriceTypeGross`	–	yes	yes	–
`WS-VATRateDefinitionISO-Standard`	yes	yes	yes	–
`WS-VATRateDefinitionISO-Used`	yes	yes	yes	–
`WS-SubSequentOrder_Qualified`	–	yes	yes	–
`WS-SubSequentOrder_TimeLimitInHours`	yes	yes	yes	–
`WS-SubSequentOrder_TimeLimitInSecs`	yes	yes	yes	–
`WS-SubSequentOrder_TimeLeftInSeconds`	yes	yes	yes	–
`WS-SubSequentOrder_TimestampLastOrder`	yes	yes	yes	–
`WS-SubSequentOrder_TimestampExpire`	yes	yes	yes	–

WS-PaymentFields, WS-DeliveryFields and WS-DelivDateFields apply on the payment and shipping method page, WS-AdvDelivDateFields also on the order overview page. WS-DelivDate and WS-AdvDelivDate apply on the order overview page and the confirmation page, WS-PaymentConfirmText and WS-DeliveryCost on the confirmation page, and WS-BankInfo also on the order overview page and in the confirmation email. WS-TotalWeight and WS-TotalVolume apply on the shopping cart page, the order overview page and in the mail confirmation template. All other tags are permitted on all templates.

Guide: Creating payment methods
Guide: Creating shipping methods
Guide: Offering a preferred delivery date
Guide: Fast ordering
Reference: PAY- (payment methods)
Reference: DELIV- (shipping methods)

​Displaying the payment methods

​The structure per payment method

​The class names

​Displaying the selected payment method

​Displaying the shipping methods

​Displaying the selected shipping method

​The preferred delivery date

​Defaults for fast ordering

​The minimum order value

​Free shipping

​Weight, volume and pallets

​Price type and VAT country

​Follow-up orders

​The tags at a glance

​Related topics

Displaying the payment methods

The structure per payment method

The class names

Displaying the selected payment method

Displaying the shipping methods

Displaying the selected shipping method

The preferred delivery date

Defaults for fast ordering

The minimum order value

Free shipping

Weight, volume and pallets

Price type and VAT country

Follow-up orders

The tags at a glance

Related topics