> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment, shipping and order completion

> Building the payment and shipping method page: selection lists for payment method and shipping method, preferred delivery date, minimum order value, free shipping, weight and volume, and follow-up orders.

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-PayDeliv~" method="post">
   <h3>Bitte wählen Sie eine Zahlungsart</h3>
   ~WS-PaymentFields~
</form>
```

> [!NOTE]
>
> `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`.

> [!WARNING]
>
> 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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
id="ws_paymentdiv_<Container>_id_<Zahlungsartencode>"
```

> [!NOTE]
>
> 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.

> [!NOTE]
>
> 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.

> [!WARNING]
>
> 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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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 |

> [!NOTE]
>
> `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.

> [!NOTE]
>
> `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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-PayDeliv~" method="post">
   <h3>Bitte wählen Sie eine Versandart</h3>
   ~WS-DeliveryFields~
</form>
```

> [!NOTE]
>
> `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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!WARNING]
>
> 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.

> [!NOTE]
>
> 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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Delivery}
   <p>Versand mit ~WS-Delivery~ für ~WS-DeliveryCost~ ~WS-Currency~.</p>
{/WS-Delivery}
```

> [!NOTE]
>
> `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.

> [!WARNING]
>
> 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.

> [!NOTE]
>
> `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.

> [!NOTE]
>
> 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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- 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}
```

> [!WARNING]
>
> Choose **one** of the two variants. They are alternatives, not additions.

> [!WARNING]
>
> `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.

> [!NOTE]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!NOTE]
>
> 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.

> [!NOTE]
>
> 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.

> [!WARNING]
>
> 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}`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-FastOrderConfigurationLink~">Einstellungen zur Schnellbestellung</a>
```

> [!NOTE]
>
> `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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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}
```

> [!WARNING]
>
> `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.

> [!NOTE]
>
> `WS-MinOrder-Base` and `WS-MinOrder-Remaining` also work as bracketing. `WS-MinOrder-Value` is exclusively a single tag.

## Free shipping

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-FreeDeliveryRest}
   <p>Noch ~WS-FreeDeliveryRest~ ~WS-Currency~ bis zum versandkostenfreien Einkauf.</p>
{/WS-FreeDeliveryRest}
```

> [!NOTE]
>
> `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)`.

> [!WARNING]
>
> 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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Basket_OK}
   {WS-Pallets}
      <p>Für den Versand werden ~WS-Pallets~ Paletten benötigt.</p>
   {/WS-Pallets}
{/ST-Basket_OK}
```

> [!NOTE]
>
> 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.

> [!NOTE]
>
> `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.

> [!WARNING]
>
> 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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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 |

> [!NOTE]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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}
```

> [!WARNING]
>
> `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.

> [!WARNING]
>
> 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.

> [!NOTE]
>
> 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.

> [!NOTE]
>
> 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.

## Related topics

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


## Related topics

- [Order process, addresses and checks](https://dokumentation.websale.de/en/v8s/referenz/tags/ws/bestellprozess-adressen-und-pruefungen.md)
- [Shop, page and technology](https://dokumentation.websale.de/en/v8s/referenz/tags/ws/shop-seite-und-technik.md)
- [Overview of payment and shipping methods](https://dokumentation.websale.de/en/v8s/informationsseiten/uebersicht-von-zahlungs-und-versandarten.md)
- [TAC- (display of payment and shipping methods)](https://dokumentation.websale.de/en/v8s/referenz/tags/tac-anzeige-von-zahlungs-und-versandarten.md)
- [checkout - Order flow](https://dokumentation.websale.de/en/konfiguration/checkout-bestellablauf.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.