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

# PAY- (Displaying and selecting payment methods)

> Build the list of payment methods yourself instead of having it output as a block: loop, name, icons, radio button, costs and discounts, disabled payment methods, and the prepared CSS classes.

The payment methods can be output in the template as a ready-made block. This is quick, but it also fixes the structure. If you want to determine the layout yourself, build the list line by line from the `PAY-` tags instead. The documentation calls this individual positioning.

The basis is always the same loop over the available payment methods. Within the loop, you retrieve the name, icon, costs, and selection field for each payment method. This page describes this core. The additional fields that some payment methods also need are described on a separate page.

Guide: Selecting the payment method · Reference: PAY- (Additional fields for the payment method)

## The loop over the payment methods

`PAY-Data` is the entry point and has three forms. As a single tag, it outputs the number of available payment methods; as a range tag, it applies if there are any at all; and as a loop, it iterates over them.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data}
   <p>~PAY-Data~ Zahlungsarten stehen zur Auswahl.</p>

   {@PAY-Data}
      <div class="zahlungsart">
         ~PAY-Data_name~
      </div>
   {/@PAY-Data}
{/PAY-Data}
```

> [!NOTE]
>
> All other tags on this page work within `{@PAY-Data}`. Outside the loop, no payment method is selected, and they return nothing.

## Name and identifier

| Tag | Returns |
| - | - |
| `PAY-Data_name` | the name of the payment method as it appears in the shop configuration |
| `PAY-Data_techname` | the internal name of the payment method |
| `PAY-Data_NameSuffix` | the additional text for the payment method |
| `PAY-Data_index` | the payment method code |

Materials: Payment method codes

> [!NOTE]
>
> `PAY-Data_techname` does not return the configured name, but the fixed internal designation of the payment method. It does not change with the shop configuration and is therefore suitable as an anchor for CSS or JavaScript, while `PAY-Data_name` is the text for the buyer.

> [!NOTE]
>
> The shop system evaluates the additional text `PAY-Data_NameSuffix` a second time as a template. This means you can include tags in it, and `~WS-Currency~` and `~WS-CurrencySymbol~` are replaced in any case. This lets you, for example, phrase a note about the fee directly in the configuration without entering the amount there as a fixed value.

## Is this payment method selected

| Tag | Applies if |
| - | - |
| `PAY-Data_selected` | the buyer has chosen this payment method |
| `PAY-Data_IsDefault` | the logged-in buyer has stored this payment method as their default |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_selected}
   <p>Sie zahlen mit ~PAY-Data_name~.</p>
{/PAY-Data_selected}

{PAY-Data_IsDefault}
   <span class="hinweis">Ihre bevorzugte Zahlungsart</span>
{/PAY-Data_IsDefault}
```

> [!NOTE]
>
> `PAY-Data_IsDefault` is not described in the previous documentation. It requires a logged-in buyer with a stored default payment method. Use it to highlight their usual payment method, even before they have clicked anything.

## The radio button for selection

Together, eight tags create a complete `input` element. They return the ID, CSS classes, name, value, and the two state attributes.

| Tag | Returns |
| - | - |
| `PAY-Data_Selection_html_id` | the unique ID of the element |
| `PAY-Data_Selection_html_class_global` | the base CSS class |
| `PAY-Data_Selection_html_class_active` | the additional class for an available payment method |
| `PAY-Data_Selection_radioname` | the shared field name of the group |
| `PAY-Data_Selection_radiovalue` | the payment method code as the value |
| `PAY-Data_Selection_disabled` | the `disabled` attribute for a disabled payment method |
| `PAY-Data_Selection_checked` | the `checked` attribute for the selected payment method |
| `PAY-Data_Selection_html_js_onclick` | the call for the `onClick` attribute |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input id="~PAY-Data_Selection_html_id~"
       class="~PAY-Data_Selection_html_class_global~ ~PAY-Data_Selection_html_class_active~"
       type="radio"
       name="~PAY-Data_Selection_radioname~"
       value="~PAY-Data_Selection_radiovalue~"
       ~PAY-Data_Selection_disabled~
       ~PAY-Data_Selection_checked~
       onClick="~PAY-Data_Selection_html_js_onclick~">
```

For a selected payment method with the code `XX`, this results in:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input id="ws_paymentdiv_inputelement_XX"
       class="ws_paymentdiv_inputelement ws_paymentdiv_inputelement_active"
       type="radio"
       name="ws_radio_payment"
       value="XX"
       checked
       onClick="selectPayment('XX');">
```

> [!NOTE]
>
> The field name `ws_radio_payment` is fixed in the shop system, as is the structure of the ID. Always take both from the tags, otherwise the shop will not recognize the selection when the form is submitted.

> [!NOTE]
>
> `PAY-Data_Selection_radiovalue` and `PAY-Data_index` return the same value, namely the payment method code. In the `input` element, `PAY-Data_Selection_radiovalue` is the more descriptive choice; everywhere else, use `PAY-Data_index`.

## Disabled payment methods

The shop system can omit a payment method that is not eligible for this basket or display it grayed out. If you display it, three tags explain the case.

| Tag | Returns |
| - | - |
| `PAY-Data_disabled` | applies if the payment method is disabled |
| `PAY-Data_disabledcode` | the code of the reason for disabling |
| `PAY-Data_disabledmessage` | the configured rejection text from `<ShowDisabled-Txt>` |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_disabled}
   <p class="gesperrt">
      {PAY-Data_disabledmessage}
         ~PAY-Data_disabledmessage~
      {/PAY-Data_disabledmessage}
      {!PAY-Data_disabledmessage}
         Diese Zahlungsart steht für Ihre Bestellung nicht zur Verfügung.
      {/!PAY-Data_disabledmessage}
   </p>
{/PAY-Data_disabled}
```

> [!NOTE]
>
> `PAY-Data_disabledcode` returns the reason why the shop system filtered out the payment method, for example a minimum order value that was not reached or an excluded delivery country. Do not output the code visibly; instead, put it in a data attribute so that support can work with it.

> [!WARNING]
>
> Which code stands for which reason is not documented. Therefore, phrase the visible text via `PAY-Data_disabledmessage` and the shop configuration, not via your own mapping of the codes.

## The icons of a payment method

`PAY-Data_Image` is a separate loop within the payment method loop. A payment method can have several icons, for credit cards, for example, one per card brand. As a single tag, the tag outputs the number of icons.

| Tag | Returns |
| - | - |
| `PAY-Data_Image_url` | the address of the image file |
| `PAY-Data_Image_id` | the identifier of the icon |
| `PAY-Data_Image_link` | the configured link for the icon |
| `PAY-Data_Image_html_js_onclick` | the configured call for the `onClick` attribute |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_Image}
   {@PAY-Data_Image}
      {PAY-Data_Image_link}<a href="~PAY-Data_Image_link~">{/PAY-Data_Image_link}
         <img src="~PAY-Data_Image_url~" alt=""
              {PAY-Data_Image_html_js_onclick}onClick="~PAY-Data_Image_html_js_onclick~"{/PAY-Data_Image_html_js_onclick}>
      {PAY-Data_Image_link}</a>{/PAY-Data_Image_link}
   {/@PAY-Data_Image}
{/PAY-Data_Image}
```

> [!NOTE]
>
> For credit cards, the loop iterates over the configured card brands and skips any that is disabled or has no image stored. So you only see the brands that are actually accepted in the shop.

> [!NOTE]
>
> For credit cards, `PAY-Data_Image_id` returns the identifier of the card brand; for all other payment methods, it returns the payment method code. The previous documentation only mentions the second case.

> [!NOTE]
>
> In the configured `onClick` call, the shop system replaces the two placeholders `~ID~` and `~Link~` with the identifier and the link of the icon currently being processed. This way, a single entry in the configuration is enough for all card brands.

## Costs of the payment method

| Tag | Returns |
| - | - |
| `PAY-Data_Cost` | the costs in the shop's price type |
| `PAY-Data_NetCost` | the net costs |
| `PAY-Data_GrossCost` | the gross costs |
| `PAY-Data_AltCurrencyCost` | the costs in the alternative currency |
| `PAY-Data_AltCurrencyNetCost` | the net costs in the alternative currency |
| `PAY-Data_AltCurrencyGrossCost` | the gross costs in the alternative currency |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_Cost}
   <span class="gebuehr">zuzüglich ~PAY-Data_Cost~ ~WS-CurrencySymbol~</span>
{/PAY-Data_Cost}
```

> [!NOTE]
>
> `PAY-Data_Cost` outputs the amount the way the shop handles prices, i.e. gross in a gross shop and net in a net shop. `PAY-Data_NetCost` and `PAY-Data_GrossCost` each convert in the other direction. If you show both values side by side, consistently use `NetCost` and `GrossCost` and leave out `PAY-Data_Cost`.

> [!WARNING]
>
> An amount of zero is treated as empty. The range tag then does not apply, and the single tag outputs nothing. This is convenient because free payment methods automatically appear without a fee line. But it also means that you have to set an explicit "no fee" line via `{!PAY-Data_Cost}` if you want one.

> [!WARNING]
>
> The three `AltCurrency` tags require a selected alternative currency with a stored exchange rate. If the rate is missing, the shop system calculates with zero, and the tags remain empty according to the rule above. Therefore, always wrap the output in a range tag.

## Discount on the purchase

Some shops grant a discount if the buyer chooses a particular payment method.

| Tag | Returns |
| - | - |
| `PAY-Data_DiscountRate` | the discount rate in percent |
| `PAY-Data_Discount` | the amount calculated from it |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_DiscountRate}
   <span class="rabatt">~PAY-Data_DiscountRate~ % Skonto</span>
{/PAY-Data_DiscountRate}
```

> [!NOTE]
>
> Only the percentage is configured. `PAY-Data_Discount` calculates the amount from it, based on the discountable subtotal of the basket. Both tags remain empty as long as the basket does not contain a discountable sum. The previous documentation describes the absolute value as a separate setting; this is not correct.

> [!WARNING]
>
> `PAY-Data_DiscountRate` outputs the number with two decimal places and a period as the separator, for example `3.00`. It is the only amount tag on this page that does not go through the shop's number formatting. In a shop that uses a comma as the separator, this is noticeable, and you should reformat the number in the template.

## Customer-specific payment costs

A discount on the payment costs or a complete waiver can be stored for individual customers.

| Tag | Returns |
| - | - |
| `PAY-Data_UserPaymentCostDiscount` | the discount amount in the shop's price type |
| `PAY-Data_UserPaymentCostDiscountNet` | the net discount amount |
| `PAY-Data_UserPaymentCostDiscountGross` | the gross discount amount |
| `PAY-Data_UserPaymentCostDiscountRate` | the discount rate in percent |
| `PAY-Data_UserPaymentCostFree` | applies if payment costs are waived completely |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_UserPaymentCostFree}
   <span class="hinweis">Für Sie fallen keine Zahlungskosten an.</span>
{/PAY-Data_UserPaymentCostFree}

{!PAY-Data_UserPaymentCostFree}
   {PAY-Data_UserPaymentCostDiscount}
      <span class="hinweis">Ihr Zahlungskostenrabatt: ~PAY-Data_UserPaymentCostDiscount~ ~WS-CurrencySymbol~</span>
   {/PAY-Data_UserPaymentCostDiscount}
{/!PAY-Data_UserPaymentCostFree}
```

> [!NOTE]
>
> When payment costs are waived, the shop system sets the costs to zero, and all six cost tags from above remain empty. The fee line therefore disappears automatically. `PAY-Data_UserPaymentCostFree` is the place where you can state the reason for this instead.

> [!NOTE]
>
> All five tags require a logged-in buyer, because the discount is tied to the customer account. If necessary, additionally wrap the area with `ST-LoggedIn`.

## Prepared IDs and CSS classes

Five tags create IDs and class names according to the scheme that the block output also uses. This keeps a hand-built template compatible with the supplied stylesheet. All five require exactly one argument that specifies which element is meant.

| Tag | Creates | Applies |
| - | - | - |
| `PAY-Data_html_id(<Element>)` | `ws_paymentdiv_<Element>_id_<Code>` | always |
| `PAY-Data_html_class_global(<Element>)` | `ws_paymentdiv_<Element>` | always |
| `PAY-Data_html_class_counter(<Element>)` | `ws_paymentdiv_<Element>_<Nummer>` | always |
| `PAY-Data_html_class_active(<Element>)` | `ws_paymentdiv_<Element>_active` | only for the selected payment method |
| `PAY-Data_html_class_disable(<Element>)` | `ws_paymentdiv_<Element>_disabled` | only for a disabled payment method |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{@PAY-Data}
   <div id="~PAY-Data_html_id(main)~"
        class="~PAY-Data_html_class_global(main)~ ~PAY-Data_html_class_counter(main)~
               ~PAY-Data_html_class_active(main)~ ~PAY-Data_html_class_disable(main)~">

      <p id="~PAY-Data_html_id(name)~" class="~PAY-Data_html_class_global(name)~">
         ~PAY-Data_name~
      </p>

   </div>
{/@PAY-Data}
```

These elements are permitted as arguments:

`main`, `logo`, `radio`, `text`, `name`, `clear1`, `remarks`, `suffix`, `inputsuffix1`, `inputsuffix1_name`, `inputsuffix1_input`, `inputsuffix2`, `inputsuffix2_name`, `inputsuffix2_input`, `inputsuffix3`, `inputsuffix3_name`, `inputsuffix3_input`, `costcenternumber`, `costcenternumber_name`, `costcenternumber_input`, `costcenteremail`, `costcenteremail_name`, `costcenteremail_input`, `clear2`, `disabled`, `clear3`, `paymentcountryrule`, `paymentcountryrule_checkbox`, `paymentcountryrule_name`, `paymentcountryrule_input`, `paymentcountryrule_list`, `paymentcountryrule_error`, `payexbank`, `paypalplus-wrapper`

> [!WARNING]
>
> Without an argument or with more than one argument, all five tags are treated as an invalid tag. There is no default.

> [!NOTE]
>
> `PAY-Data_html_class_counter` numbers the payment methods in the loop consecutively. For example, you can color every second line differently by styling the classes with even and odd numbers differently.

How the elements are nested in the block output is described under WS-PaymentFields.

### The area for additional information

`PAY-Data_html_container_remarks` applies if the payment method has anything at all to display below the name. Use it to create the enclosing container only where it is needed.

The range tag applies in four cases: if an additional text is stored, if one of the three free input fields is configured, if an input for number or email address is set up for the cost center payment method, or if an additional rule applies for the delivery country.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PAY-Data_html_container_remarks}
   <div id="~PAY-Data_html_id(remarks)~" class="~PAY-Data_html_class_global(remarks)~">
      {PAY-Data_NameSuffix}~PAY-Data_NameSuffix~{/PAY-Data_NameSuffix}
   </div>
{/PAY-Data_html_container_remarks}
```

The tags for the additional fields themselves are described under PAY- (Additional fields for the payment method).

## Having the page recalculated

If the buyer changes the payment method, fees and totals change as well. `PAY-reload_hidden_identifier` returns the technical value for a hidden field that can be used to have the page recalculated.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="hidden" name="~PAY-reload_hidden_identifier~" value="">
```

## Deprecated tags

`PAY-Data_KlarnaCost` still exists in the shop system, but no longer outputs anything and never applies as a range tag. Remove it from existing templates. Retrieve the costs of a Klarna payment method via `PAY-Data_Cost`, as with any other.

## The tags at a glance

| Tag | Single tag | Range tag | Negative range tag | Loop tag |
| - | - | - | - | - |
| `PAY-Data` | yes | yes | yes | yes |
| `PAY-Data_name` | yes | yes | yes | – |
| `PAY-Data_techname` | yes | yes | yes | – |
| `PAY-Data_NameSuffix` | yes | yes | yes | – |
| `PAY-Data_index` | yes | yes | yes | – |
| `PAY-Data_selected` | – | yes | yes | – |
| `PAY-Data_IsDefault` | – | yes | yes | – |
| `PAY-Data_disabled` | – | yes | yes | – |
| `PAY-Data_disabledcode` | yes | yes | yes | – |
| `PAY-Data_disabledmessage` | yes | yes | yes | – |
| `PAY-Data_Image` | yes | yes | yes | yes |
| `PAY-Data_Image_url` | yes | yes | yes | – |
| `PAY-Data_Image_id` | yes | yes | yes | – |
| `PAY-Data_Image_link` | yes | yes | yes | – |
| `PAY-Data_Image_html_js_onclick` | yes | yes | yes | – |
| `PAY-Data_Selection_html_id` | yes | yes | yes | – |
| `PAY-Data_Selection_html_class_global` | yes | yes | yes | – |
| `PAY-Data_Selection_html_class_active` | yes | yes | yes | – |
| `PAY-Data_Selection_radioname` | yes | yes | yes | – |
| `PAY-Data_Selection_radiovalue` | yes | yes | yes | – |
| `PAY-Data_Selection_disabled` | yes | yes | yes | – |
| `PAY-Data_Selection_checked` | yes | yes | yes | – |
| `PAY-Data_Selection_html_js_onclick` | yes | yes | yes | – |
| `PAY-Data_Cost` | yes | yes | yes | – |
| `PAY-Data_NetCost` | yes | yes | yes | – |
| `PAY-Data_GrossCost` | yes | yes | yes | – |
| `PAY-Data_AltCurrencyCost` | yes | yes | yes | – |
| `PAY-Data_AltCurrencyNetCost` | yes | yes | yes | – |
| `PAY-Data_AltCurrencyGrossCost` | yes | yes | yes | – |
| `PAY-Data_Discount` | yes | yes | yes | – |
| `PAY-Data_DiscountRate` | yes | yes | yes | – |
| `PAY-Data_UserPaymentCostDiscount` | yes | yes | yes | – |
| `PAY-Data_UserPaymentCostDiscountNet` | yes | yes | yes | – |
| `PAY-Data_UserPaymentCostDiscountGross` | yes | yes | yes | – |
| `PAY-Data_UserPaymentCostDiscountRate` | yes | yes | yes | – |
| `PAY-Data_UserPaymentCostFree` | – | yes | yes | – |
| `PAY-Data_html_id(<Element>)` | yes | yes | yes | – |
| `PAY-Data_html_class_global(<Element>)` | yes | yes | yes | – |
| `PAY-Data_html_class_counter(<Element>)` | yes | yes | yes | – |
| `PAY-Data_html_class_active(<Element>)` | yes | yes | yes | – |
| `PAY-Data_html_class_disable(<Element>)` | yes | yes | yes | – |
| `PAY-Data_html_container_remarks` | yes | yes | yes | – |
| `PAY-reload_hidden_identifier` | yes | yes | yes | – |

All tags apply on the payment and shipping method page `ws_pay_deliv.htm` within the `@PAY-Data` loop. `PAY-Data` itself is placed outside the loop on this page.

## Related topics

* Guide: Selecting the payment method
* Guide: Creating payment methods
* Reference: PAY- (Additional fields for the payment method)
* Reference: WS-PaymentFields
* Materials: Payment method codes


## Related topics

- [PAY- (Additional fields for the payment method)](https://dokumentation.websale.de/en/v8s/referenz/tags/pay/zusatzfelder-zur-zahlungsart.md)
- [PPC- (PayPal Checkout)](https://dokumentation.websale.de/en/v8s/referenz/tags/ppc-paypal-checkout.md)
- [PAYPALEXPRESS- (PayPal Express Checkout)](https://dokumentation.websale.de/en/v8s/referenz/tags/paypalexpress.md)
- [PPP- (PayPal PLUS)](https://dokumentation.websale.de/en/v8s/referenz/tags/ppp-paypal-plus.md)
- [PAYMORROW- (Paymorrow)](https://dokumentation.websale.de/en/v8s/referenz/tags/paymorrow.md)


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