PAY- (Displaying and selecting payment methods)

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.

{PAY-Data}
   <p>~PAY-Data~ Zahlungsarten stehen zur Auswahl.</p>

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

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

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.

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

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

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

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

<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');">

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.

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

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

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.

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

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

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.

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.

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

{PAY-Data_Cost}
   <span class="gebuehr">zuzüglich ~PAY-Data_Cost~ ~WS-CurrencySymbol~</span>
{/PAY-Data_Cost}

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.

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.

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

{PAY-Data_DiscountRate}
   <span class="rabatt">~PAY-Data_DiscountRate~ % Skonto</span>
{/PAY-Data_DiscountRate}

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.

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

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

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.

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

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

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

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.

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

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

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

​The loop over the payment methods

​Name and identifier

​Is this payment method selected

​The radio button for selection

​Disabled payment methods

​The icons of a payment method

​Costs of the payment method

​Discount on the purchase

​Customer-specific payment costs

​Prepared IDs and CSS classes

​The area for additional information

​Having the page recalculated

​Deprecated tags

​The tags at a glance

​Related topics

The loop over the payment methods

Name and identifier

Is this payment method selected

The radio button for selection

Disabled payment methods

The icons of a payment method

Costs of the payment method

Discount on the purchase

Customer-specific payment costs

Prepared IDs and CSS classes

The area for additional information

Having the page recalculated

Deprecated tags

The tags at a glance

Related topics