<< Click here to display Table of Contents >> Navigation: Referenz > Tags > WS- (Allgemein):

WS-PaymentFields

Die komplette Anzeige der auswählbaren Zahlungsarten im Bestellprozess wird mit dem Einzel-Tag WS-PaymentFields realisiert. Es erzeugt automatisch eine Struktur von div-Containern, die unten beschrieben werden.

Die Reihenfolge, in der die Zahlungsarten in der Shopkonfiguration shop.config angelegt sind, bestimmt die Reihenfolge bei der Ausgabe auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) im Shop.

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

Wegweiser: Zahlungsarten anlegen

Sie können alternativ zu dem Einzel-Tag WS-PaymentFields Ihre Zahlungsarten auch mit Hilfe der zahlreichen PAY-Data-Tags anzeigen lassen. Damit können Sie das HTML-Konstrukt um die einzelnen Elemente für jede Zahlungsart noch flexibler und individueller gestalten. Siehe "Einzelpositionierung der Zahlungsarten".

Wegweiser: Zahlungsarten anlegen: Einzelpositionierung der Zahlungsarten

Verwendbar als …

Einzel-Tag	+
Bereichs-Tag	–
negatives Bereichs-Tag	–
Schleifen-Tag	–

Zulässig in Templates …

Template für Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm), innerhalb von <form action="~Form-PayDeliv~">

Aufbau der DIV-Struktur

Die Auswahl der Zahlungsart wird durch ein einziges Tag auf dem Template Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) "Zahlungs- und Versandart wählen" ausgegeben. Bei der Darstellung mit DIV-Containern werden die einzelnen Hauptcontainer mit den verfügbaren Zahlungsarten hintereinander ausgegeben.

Ein Hauptcontainer hat dabei folgende Struktur:

Hauptcontainer

Logocontainer

Beinhaltet das zugehörige Bild (bzw. die zugehörigen Bilder bei Zahlungsart Kreditkarte) wenn vorhanden (<img...> Element(e)), ansonsten  

Radiobutton-Container

Beinhaltet den Radiobutton zur Auswahl dieser Zahlungsart (<input type="radio" ...> Element)

Textcontainer

Beinhaltet den Namen der Zahlungsart (<p...> Element)

Container Kreditkartenart wählen

Dieser Container ist optional und wird nur erzeugt, wenn bei der Zahlungsart Kreditkarte die Art der Kreditkarte hier ausgewählt werden muss.

Container Bankinstitut für PayEX wählen

Dieser Container ist optional und wird nur bei der Zahlungsart DirectDebitPayEX erzeugt. Hier muss das Bankinstitut ausgewählt werden.

Clearcontainer 1

Dieser Container besitzt keinen Inhalt und wird nur für das Design benötigt.

Remarkscontainer

Dieser Container ist optional und wird nur dann angezeigt wenn mindestens einer der folgenden Punkte erfüllt ist:

•zu der Zahlungsart ist eine zusätzliche Beschreibung angegeben

•zu der Zahlungsart ist mindestens eine zusätzliche Eingabe konfiguriert

•bei der Zahlungsart "Kostenstelle" ist die Eingabe für Name und/oder E-Mail-Adresse konfiguriert

Suffixcontainer

Dieser Container ist optional und wird nur erzeugt wenn zu dieser Zahlungsart eine zusätzliche Beschreibung angegeben ist.

Beinhaltet die zusätzliche Beschreibung (Text)

Container Suffix Eingabefeld 1

Dieser Container ist optional und wird nur erzeugt wenn zu dieser Zahlungsart das zusätzliche Eingabefeld 1 konfiguriert ist.

Beinhaltet den Namen des Eingabefelds 1 (<p...> Element) und das Eingabefeld 1 (<input type="text"...> Element).

Container Suffix Eingabefeld 2

Dieser Container ist optional und wird nur erzeugt wenn zu dieser Zahlungsart das zusätzliche Eingabefeld 2 konfiguriert ist.

Beinhaltet den Namen des Eingabefelds 2 (<p...> Element) und das Eingabefeld 2 (<input type="text"...> Element).

Container Suffix Eingabefeld 3

Dieser Container ist optional und wird nur erzeugt wenn zu dieser Zahlungsart das zusätzliche Eingabefeld 3 konfiguriert ist.

Beinhaltet den Namen des Eingabefelds 3 (<p...> Element) und das Eingabefeld 3 (<input type="text"...> Element).

Container Kostenstelle Name

Dieser Container ist optional und wird nur erzeugt bei der Zahlungsart "Kostenstelle" und wenn das Eingabefeld "Name der Kostenstelle" konfiguriert ist.

Beinhaltet den Namen des Eingabefelds "Name der Kostenstelle" (<p...> Element) und das Eingabefeld "Name der Kostenstelle" (<input type="text"...> Element).

Container Kostenstelle E-Mail-Adresse

Dieser Container ist optional und wird nur erzeugt bei der Zahlungsart "Kostenstelle" und wenn das Eingabefeld "E-Mail-Adresse" konfiguriert ist.

Beinhaltet den Namen des Eingabefelds "E-Mail-Adresse" (<p...> Element) und das Eingabefeld "E-Mail-Adresse" (<input type="text"...> Element).

Container abhängige Zusatzinformationen zur Zahlungsart

Dieser Container ist optional und kann bis zu 10 mal vorkommen. Die Container werden nur erzeugt, wenn abhängige Zusatzinformationen zur Zahlungsart abgefragt werden und die Abhängigkeiten erfüllt sind.

Beinhaltet immer den Namen bzw. die Beschreibung der abgefragten Zusatzinformation (<p...> Element).

Beinhaltet je nach Konfiguration eines der folgenden Elemente:

•ein Eingabefeld (<input type="text"...> Element)

•eine Listbox (<select...> Element)

•die Auswahl des Geburtstags der Rechnungsadresse (3 <select...> Elemente)

Beinhaltet, falls ein Fehler bei der Eingabe aufgetreten ist eine entsprechende Fehlermeldung (<p...> Element).

Clearcontainer 2

Dieser Container besitzt keinen Inhalt und wird nur für das Design benötigt.

Disabledcontainer

Dieser Container ist optional und wird nur erzeugt, wenn diese Zahlungsart nicht verfügbar ist und ausgegraut angezeigt werden soll.

Beinhaltet den Grund warum diese Zahlungsart nicht verfügbar ist (Text).

Clearcontainer 3

Dieser Container besitzt keinen Inhalt und wird nur für das Design benötigt.

Styles und JavaScripts

Jeder Container erhält bis zu vier Klassen und eine ID, um ein individuelles Design und den Zugriff per JavaScript zu ermöglichen. Einige Elemente erhalten weitere Klassen für noch bessere individuelle Anpassung.

Klassennamen für die einzelnen div-Container

ws_paymentdiv_<Art des Containers>
Diese Klasse ist für alle Zahlungsarten gleich. Über diese Klasse kann die Darstellung der Containerart für alle Zahlungsarten festgelegt werden.

ws_paymentdiv_<Art des Containers>_<Nummer der verfügbaren Zahlungsart>
Diese Klassen werden nummeriert um anhand der Position der Zahlungsart eine individuelle Darstellung realisieren zu können. Sie können zum Beispiel einen Farbwechsel erzeugen indem Sie den Klassen mit den Nummern 1,3,5,7,... eine andere Hintergrundfarbe zuweisen als den Klassen mit den Nummern 2,4,6,8,....

ws_paymentdiv_<Art des Containers>_active
Diese Klasse wird nur dann bei der Zahlungsart gesetzt, wenn der Käufer diese Zahlungsart ausgewählt hat. Mit dieser Klasse können Sie die gewählte Zahlungsart visuell hervorheben.

ws_paymentdiv_<Art des Containers>_disabled
Diese Klasse wird nur dann bei der Zahlungsart gesetzt, wenn diese Zahlungsart nicht verfügbar ist und ausgegraut angezeigt werden soll. Mit dieser Klasse können Sie die nicht verfügbaren Zahlungsarten visuell abheben.

Optionale IDs für jeden div-Container:

Für jede Zahlungsart wird eine eindeutige ID erzeugt:

ws_paymentdiv_<Art des Containers>_id_<eindeutige numerische ID der Zahlungsart>

Mithilfe dieser ID können Sie jeden einzelnen div-Container per CSS-Styles individuell gestalten oder per JavaScript darauf zugreifen.

Materialien: Zahlungarten-Codes

Containerarten, Klassennamen und IDs

Folgende Containerarten/HTML-Elemente mit zugehörigen Klassen und IDs werden erzeugt:

Containerart/HTML-Element	Beschreibung	Klassen	ID
main	Hauptcontainer	ws_paymentdiv_main ws_paymentdiv_main_<Counter**> ws_paymentdiv_main_active ws_paymentdiv_main_disabled	ws_paymentdiv_main_id_<ID*>
logo	Logo-Container	ws_paymentdiv_logo ws_paymentdiv_logo_<Counter**> ws_paymentdiv_logo_active ws_paymentdiv_logo_disabled	ws_paymentdiv_logo_id_<ID*>
radio	Radiobutton-Container	ws_paymentdiv_radio ws_paymentdiv_radio_<Counter**> ws_paymentdiv_radio_active ws_paymentdiv_radio_disabled	ws_paymentdiv_radio_id_<ID*>
inputelement	Radiobutton im Radiobutton-Container, <input type="radio"...>	ws_paymentdiv_inputelement ws_paymentdiv_inputelement_<Counter**> ws_paymentdiv_inputelement_active ws_paymentdiv_inputelement_disabled	ws_paymentdiv_inputelement_<ID*>
text	Textcontainer	ws_paymentdiv_text ws_paymentdiv_text_<Counter**> ws_paymentdiv_text_active ws_paymentdiv_text_disabled	ws_paymentdiv_text_id_<ID*>
name	p-Element im Textcontainer mit dem Namen der Zahlungsart	ws_paymentdiv_name ws_paymentdiv_name_<Counter**> ws_paymentdiv_name_active ws_paymentdiv_name_disabled	ws_paymentdiv_name_id_<ID*>
ccard	Container Kreditkartenart	ws_paymentdiv_ccard ws_paymentdiv_ccard_<Counter**> ws_paymentdiv_ccard_active ws_paymentdiv_ccard_disabled	ws_paymentdiv_ccard_id_<ID*>
payexbank	Container Bankinstitut PayEX	ws_paymentdiv_payexbank ws_paymentdiv_payexbank_<Counter**> ws_paymentdiv_payexbank_active ws_paymentdiv_payexbank_disabled	ws_paymentdiv_payexbank_id_<ID*>
clear1	Clearcontainer 1	ws_paymentdiv_clear1 ws_paymentdiv_clear1_<Counter**> ws_paymentdiv_clear1_active ws_paymentdiv_clear1_disabled	ws_paymentdiv_clear1_id_<ID*>
remarks	Remarkscontainer	ws_paymentdiv_remarks ws_paymentdiv_remarks_<Counter**> ws_paymentdiv_remarks_active ws_paymentdiv_remarks_disabled	ws_paymentdiv_remarks_id_<ID*>
suffix	Suffixcontainer	ws_paymentdiv_suffix ws_paymentdiv_suffix_<Counter**> ws_paymentdiv_suffix_active ws_paymentdiv_suffix_disabled	ws_paymentdiv_suffix_id_<ID*>
inputsuffix1	Container Suffix Eingabefeld 1	ws_paymentdiv_inputsuffix1 ws_paymentdiv_inputsuffix1_<Counter**> ws_paymentdiv_inputsuffix1_active ws_paymentdiv_inputsuffix1_disabled	ws_paymentdiv_inputsuffix1_id_<ID*>
inputsuffix1_name	p-Element im Container Suffix Eingabefeld 1, Name des Eingabefelds 1	ws_paymentdiv_inputsuffix1_name ws_paymentdiv_inputsuffix1_name_<Counter**> ws_paymentdiv_inputsuffix1_name_active ws_paymentdiv_inputsuffix1_name_disabled	ws_paymentdiv_inputsuffix1_name_id_<ID*>
inputsuffix1_input	input-Element im Container Suffix Eingabefeld 1, Eingabefeld 1	ws_paymentdiv_inputsuffix1_input ws_paymentdiv_inputsuffix1_input_<Counter**> ws_paymentdiv_inputsuffix1_input_active ws_paymentdiv_inputsuffix1_input_disabled	ws_paymentdiv_inputsuffix1_input_id_<ID*>
inputsuffix2	Container Suffix Eingabefeld 2	ws_paymentdiv_inputsuffix2 ws_paymentdiv_inputsuffix2_<Counter**> ws_paymentdiv_inputsuffix2_active ws_paymentdiv_inputsuffix2_disabled	ws_paymentdiv_inputsuffix2_id_<ID*>
inputsuffix2_name	p-Element im Container Suffix Eingabefeld 2, Name des Eingabefelds 2	ws_paymentdiv_inputsuffix2_name ws_paymentdiv_inputsuffix2_name_<Counter**> ws_paymentdiv_inputsuffix2_name_active ws_paymentdiv_inputsuffix2_name_disabled	ws_paymentdiv_inputsuffix2_name_id_<ID*>
inputsuffix2_input	input-Element im Container Suffix Eingabefeld 2, Eingabefeld 2	ws_paymentdiv_inputsuffix2_input ws_paymentdiv_inputsuffix2_input_<Counter**> ws_paymentdiv_inputsuffix2_input_active ws_paymentdiv_inputsuffix2_input_disabled	ws_paymentdiv_inputsuffix2_input_id_<ID*>
inputsuffix3	Container Suffix Eingabefeld 3	ws_paymentdiv_inputsuffix3 ws_paymentdiv_inputsuffix3_<Counter**> ws_paymentdiv_inputsuffix3_active ws_paymentdiv_inputsuffix3_disabled	ws_paymentdiv_inputsuffix3_id_<ID*>
inputsuffix3_name	p-Element im Container Suffix Eingabefeld 3, Name des Eingabefelds 3	ws_paymentdiv_inputsuffix3_name ws_paymentdiv_inputsuffix3_name_<Counter**> ws_paymentdiv_inputsuffix3_name_active ws_paymentdiv_inputsuffix3_name_disabled	ws_paymentdiv_inputsuffix3_name_id_<ID*>
inputsuffix3_input	input-Element im Container Suffix Eingabefeld 3, Eingabefeld 3	ws_paymentdiv_inputsuffix3_input ws_paymentdiv_inputsuffix3_input_<Counter**> ws_paymentdiv_inputsuffix3_input_active ws_paymentdiv_inputsuffix3_input_disabled	ws_paymentdiv_inputsuffix3_input_id_<ID*>
costcenternumber	Container Kostenstelle Name	ws_paymentdiv_costcentername ws_paymentdiv_costcentername_<Counter**> ws_paymentdiv_costcentername_active ws_paymentdiv_costcentername_disabled	ws_paymentdiv_costcentername_id_<ID*>
costcenternumber _name	p-Element im Container Kostenstelle Name, Name	ws_paymentdiv_costcentername_name ws_paymentdiv_costcentername_name_<Counter**> ws_paymentdiv_costcentername_name_active ws_paymentdiv_costcentername_name_disabled	ws_paymentdiv_costcentername_name_id_<ID*>
costcenternumber _input	input-Element im Container Kostenstelle Name, Eingabefeld	ws_paymentdiv_costcentername_input ws_paymentdiv_costcentername_input_<Counter**> ws_paymentdiv_costcentername_input_active ws_paymentdiv_costcentername_input_disabled	ws_paymentdiv_costcentername_input_id_<ID*>
costcenteremail	Container Kostenstelle eMail	ws_paymentdiv_costcenteremail ws_paymentdiv_costcenteremail_<Counter**> ws_paymentdiv_costcenteremail_active ws_paymentdiv_costcenteremail_disabled	ws_paymentdiv_costcenteremail_id_<ID*>
costcenteremail _name	p-Element im Container Kostenstelle eMail, Name	ws_paymentdiv_costcenteremail_name ws_paymentdiv_costcenteremail_name_<Counter**> ws_paymentdiv_costcenteremail_name_active ws_paymentdiv_costcenteremail_name_disabled	ws_paymentdiv_costcenteremail_name_id_<ID*>
costcenteremail _input	input-Element im Container Kostenstelle eMail, Eingabefeld	ws_paymentdiv_costcenteremail_input ws_paymentdiv_costcenteremail_input_<Counter**> ws_paymentdiv_costcenteremail_input_active ws_paymentdiv_costcenteremail_input_disabled	ws_paymentdiv_costcenteremail_input_id_<ID*>
paymentcountryrule	abhängige Zusatzinformationen zur Zahlungsart	ws_paymentdiv_paymentcountryrule ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*> ws_paymentdiv_paymentcountryrule_ error (nur wenn ein Eingabefehler aufgetreten ist) ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_<Counter> ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_active ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_disabled	ws_paymentdiv_paymentcountryrule_ <CountryRule-ID**>_id_<ID>
paymentcountryrule_name	p-Element im Container abhängige Zusatzinformationen zur Zahlungsart, Name	ws_paymentdiv_paymentcountryrule_name ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_name ws_paymentdiv_paymentcountryrule_ name_error (nur wenn ein Eingabefehler aufgetreten ist) ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_name_<Counter> ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_name_active ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_name_disabled	ws_paymentdiv_paymentcountryrule_ <CountryRule-ID**>_name_id_<ID>
paymentcountryrule_list	select-Element im Container abhängige Zusatzinformationen zur Zahlungsart, Listbox	ws_paymentdiv_paymentcountryrule_list ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_list ws_paymentdiv_paymentcountryrule_ list_error (nur wenn ein Eingabefehler aufgetreten ist) ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_list_<Counter> ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_list_active ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_list_disabled	ws_paymentdiv_paymentcountryrule_ <CountryRule-ID**>_list_id_<ID>
paymentcountryrule_input	input-Element im Container abhängige Zusatzinformationen zur Zahlungsart, Eingabefeld	ws_paymentdiv_paymentcountryrule_input ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_input ws_paymentdiv_paymentcountryrule_ input_error (nur wenn ein Eingabefehler aufgetreten ist) ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_input_<Counter> ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_input_active ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_input_disabled	ws_paymentdiv_paymentcountryrule_ <CountryRule-ID**>_input_id_<ID>
paymentcountryrule_error	p-Element im Container abhängige Zusatzinformationen zur Zahlungsart, Fehlermeldung	ws_paymentdiv_paymentcountryrule_error ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_error ws_paymentdiv_paymentcountryrule_ error_error (nur wenn ein Eingabefehler aufgetreten ist) ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_error_<Counter> ws_paymentdiv_paymentcountryrule_ <CountryRule-ID>_error_active ws_paymentdiv_paymentcountryrule_ <CountryRule-ID*>_error_disabled	ws_paymentdiv_paymentcountryrule_ <CountryRule-ID**>_error_id_<ID>
clear2	Clearcontainer 2	ws_paymentdiv_clear2 ws_paymentdiv_clear2_<Counter**> ws_paymentdiv_clear2_active ws_paymentdiv_clear2_disabled	ws_paymentdiv_clear2_id_<ID*>
disabled	Disabledcontainer	ws_paymentdiv_disabled ws_paymentdiv_disabled_<Counter**> ws_paymentdiv_disabled_active ws_paymentdiv_disabled_disabled	ws_paymentdiv_disabled_id_<ID*>
clear3	Clearcontainer 3	ws_paymentdiv_clear3 ws_paymentdiv_clear3_<Counter**> ws_paymentdiv_clear3_active ws_paymentdiv_clear3_disabled	ws_paymentdiv_clear3_id_<ID*>

* ID = Eindeutige numerische ID der Zahlungsart (siehe Zahlungsarten-Codes)
** Counter = Zähler der verfügbaren Zahlungsart. Diese Nummerierung wird durch die Reihenfolge der Zahlungsarten in der Shopkonfiguration shop.config festgelegt.
*** CountryRule-ID = konfigurierte technische ID der Zusatzinformation aus Shopkonfiguration shop.config (siehe +CountryRule)

Individuelle JavaScripts verknüpfen

Sie können einzelne HTML-Elemente mit individuellen JavaScripten verknüpfen:

Element

Event

Beschreibung

<img ...> Element(e) im Logocontainer

onClick

Sie können bei einem Klick auf das Logo der Zahlungsart ein JavaScript ausführen lassen (ein angegebener Link bei der Zahlungsart sowie der Zahlungsartencode/BrandID kann der Funktion übergeben werden) .

Dieses können Sie bei der Zahlungsart konfigurieren (Parameter ImgOnClick, Sektion PaymentXXX-Txt, Shopkonfiguration shop.config bzw. ImgOnClick, Sektion Card1...5, Shopkonfiguration shop.config).

Beispiel 1 - Auswahl der Zahlungsart (Standard):

ImgOnClick = selectPaymentImage('~ID~');

Beispiel 2 - Öffnet ein neues Popup-Fenster mit der URL, die im Parameter Link eingetragen ist:

ImgOnClick = window.open('~Link~', '_blank', 'top=400,left=400,width=600,height=200');

<input type="radio"...> Element im Radiobutton-Container

onClick

Sie können ein JavaScript ausführen lassen, wenn der Käufer die Zahlungsart auswählt (der Zahlungsartencode sowie die ID des Radiobuttons kann der Funktion übergeben werden).

Dieses können Sie bei der Versandart konfigurieren (Parameter RadioOnCLick, Sektion PaymentXXX-Txt, Shopkonfiguration shop.config).

Anwendungsbeispiel:
Sie können die Hervorhebung der aktivierten Zahlungsart per JavaScript anpassen und zum Beispiel die Klassen ..._active für alle entsprechenden Container entfernen und dem Container mit der entsprechenden ID die Klasse ..._active wieder hinzufügen.