2.3 Corporate PayPage
Die 1cs Online Bezahlsystem-Formulare sind standardmäßig weiß und grau eingerahmt. Sie haben jedoch die Möglichkeit, das Layout der Formulare mit Hilfe von Layout-Parametern selbst zu gestalten. Die einfachste Form, das Layout zu beeinflussen, sind Parameter für Hintergrundfarbe (BGColor), Hintergrundbild (BGImage) und die Schrift (FFace). Weitergehende Layout-Anpassungen sind mit XSLT-Templates möglich:
Im Fall von Lastschriftzahlungen können Sie mit dem Parameter Template ein individuelles Layout für das PaySDD-Formular nutzen, das 100%ig zu Ihrem Shop-Layout passt. Zu diesem Zweck entwirft Ihr Grafiker ein HTML-Template im Shop-Design auf Basis der XSLT-Technologie (Extensible Stylesheet Language Transformation). Der First Cash Solution Support kopiert dieses XSLT-Template auf unseren 1cs Online Bezahlsystem-Server. Wenn Sie den Namen Ihrer XSLT-Datei im Parameter Template übergeben, erscheint das 1cs Online Bezahlsystem-Formular in Ihrem Layout.
Allgemeine Informationen zu XSLT finden Sie unter www.w3.org.
Für die Nutzung der Corporate Pay Page mit XSLT gelten die nachfolgenden Konventionen:
2.3.1 Dateinamen
Eine von Ihnen gestaltete XSL-Datei definiert Ihr individuelles Layout. Die zugehörige XML-Datei enthält die Texte, die auf dem Formular angezeigt werden sollen. So lässt sich problemlos eine Mehrsprachigkeit realisieren. In den Bezeichnungen der Dateien verwenden Sie stets Ihre MerchantID.
XSL-Template: MerchantID_PaySDD.xsl
XML-Textdatei: MerchantID_PaySDD.xml
Unterordner für Bilder: Templates/imagesMerchantID
Um keine Sicherheitshinweise zu erhalten, stellen Sie bitte bei externen Bildquellen sicher, dass diese über SSL aufgerufen werden.
Zum Aufruf des individuellen Layouts verwenden Sie den Parameter „template“ mit Ihrer MerchantID und hängen ihn unverschlüsselt an den Aufruf der First Cash Solution Bezahlseite an, zum Beispiel: https://www.computop-paygate.com/paysdd.aspx?MerchantID=IhreMID&Len=123&Data=ABCFED…ACEF&template=IhreMerchantID
2.3.2 Feldnamen des Formulars
Bei der Implementierung des Textfeldes für die IBAN verwenden Sie für die Parameter „name“ und „id“ folgende Werte:
Kontoinhaber: „AccOwner“
IBAN: „IBAN“
BIC: „BIC“
Kreditinstitut (optional): „AccBank“
Ein Textfeld zur Eingabe der IBAN wird dann folgendermaßen implementiert:
<input type="text" name="IBAN" id= "IBAN" value=""></input>
2.3.3 Hidden Fields
Folgende Hidden Fields müssen implementiert werden, damit die Werte beim Abschicken des Formulars weitergereicht werden können:
MerchantID: „MerchantID“
Request-Länge: „Len“
Request-Daten: „Data“
Template: „Template“
Sprache: „Language“
2.3.4 Sprachauswahl
Die Sprachauswahl im PaySDD.aspx-Formular erfolgt automatisch anhand des Parameters Language. Die anderen Sprachbereiche werden herausgefiltert. Wenn Sie z.B. mit JavaScript auf das Feld eines anderen Sprachbereichs zugreifen wollen, ist das über den folgenden Pfad möglich: template/language/@name.
2.3.5 XML-Struktur
Mit dem Parameter „language“ wird gesteuert, welcher Abschnitt der XML-Textdatei ausgelesen wird. Standardmäßig wird immer deutsch „de“ verwendet.
Die XML-Datei sollte folgendes Grundgerüst haben:
<?xml version="1.0" encoding="UTF-16"?>
</languages>
<language name="de">
</language> <language name="en"> </language> </languages>
Mit <xsl:variable name=““ select=“template/language/@name“/> können Sie direkt von der XSL-Datei einen XML- Sprachenabschnitt ansprechen.
Zum Überblick, welche Parameter zusätzlich von der PaySDD gerendert werden, sehen Sie sich bitte folgende Struktur an (XSL-Datei wird gegen folgenden XML-String gerendert):
Dim strXML As String = "<?xml version='1.0' encoding='UTF-16'?>" & _
"<template pay='elv'>" & _
"<merchantID>"..."</merchantID>" & _
"<PayID>"..."</PayID>" & _ "<len>"..."</len>" & _ "<data>"..."</data>" & _ "<language>"..."</language>" & _ "<Border>"..."</Border>" & _ "<Background>"..."</Background>" & _ "<BGImage>"..."</BGImage>" & _ "<BGColor>"..."</BGColor>" & _ "<FFace>"..."</FFace>" & _ "<FSize>"..."</FSize>" & _ "<FColor>"..."</FColor>" & _ "<twidth>"..."</twidth>" & _ "<theight>"..."</theight>" & _ strCustomFieldsXML & _ "<URLBack>"..."</URLBack>" & _ "<AccOwner>"..."</AccOwner>" & _ "<IBAN>"..."</IBAN>" & _ "<PBAN>"..."</PBAN>" & _ "<BIC>"..."</BIC>" & _ "<Bank>"..."</Bank>" & _ "<template>"..."</template>" & _ "</template>"
Da Sie ein eigenes Layout für Ihr Formular verwenden, benötigen Sie die Layout Parameter nicht. Es ist jedoch möglich, nach voriger Absprache mit der First Cash Solution die Parameter für die Übergabe, z. B. der SessionID zu verwenden.
2.3.6 JavaScript
JavaScript-Funktionen sind, wenn gewünscht, von Ihnen in Ihr Template zu implementieren.
<script id="clientEventHandlersJS" language="JavaScript">
if (document.SDDForm.IBAN.value.length > 34)
{
alert(„<xsl:value-of select=“/template/language/strJavaScript1“/>“); document.SDDForm.IBAN.focus(); } ... </script>
Bitte verwenden Sie keinen externen Link auf Ihr JavaScript.
2.3.7 Link mit Computop-Logo
Wir sind verpflichtet, dem Kontoinhaber jederzeit die Möglichkeit zu geben, sich zu informieren, auf welchem Server er sich befindet. Dazu implementieren Sie bitte ein Computop-Logo wie auf dem Standardformular umgesetzt oder zeigen einen kleinen Impressum-Link an. Das Computop-Logo können Sie auf www.computop.de/downloads abrufen.
Beide Informationen müssen auf die Computop-Seite impressum.aspx verweisen. Diese erwartet den Parameter „Data“, der wie im folgenden Beispiel an die URL angehängt wird.
impressum.aspx?data=<xsl:value-of select="/template/language/@name"/>|<xsl:value-of select="template/merchantID"/>
2.3.8 Programmierung und Test des Formulars
Zunächst gestalten Sie sich eine HTML-Seite mit dem Layout für ihre Bezahlseite und speichern diese zunächst zum Testen mit der Dateiendung htm oder html ab. Öffnen Sie diese Datei im Browser. Als nächste speichern Sie diese als xsl-Datei ab.
<?xml version='1.0' encoding="UTF-16"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:template match="/"> <html> <head> <title>PaySDD Template</title> <script>Ihr JavaScript</script> </head> <body> <form action="https://www.computop-paygate.de/payinterim.aspx" methode="POST">
Ihr Formular mit hiddenfields und xsl-tags </form> </body> </html> </xsl:template>
Um die Texte aus der XML-Datei zu lesen, erstellen Sie zunächst in den gewünschten Sprachabschnitten Ihre Tags mit den Texten:
<language name="de">
<strIBAN>IBAN</strIBAN>
</language>
Anschließend ersetzen Sie den Text im HTML durch einen Verweis auf den entsprechenden Abschnitt in der XML-Datei:
<xsl:value-of select="/template/language/strIBAN"/>
Um Ihr Template zu testen, bitten wir Sie folgende Zeilen nur für den Test (bevor Sie es an die First Cash Solution schicken) in Ihre XML-Datei zu integrieren und im Anschluss die XML-Datei in einem Browser aufzurufen. Wenn kein Fehler angezeigt wird, können Sie unserem Support Ihr Template und den Image-Ordner in einer Zip-Datei schicken, mit der Bitte es zu prüfen und einzuspielen.
<?xml version="1.0" encoding="UTF-16"?>
<?xml-stylesheet type="text/xsl" href="templatename.xsl"?>
<template>
<languages>bitte für Ihre Layout Tests weglassen <language name="de"> </language> <language name="en"> </language> </languages> bitte für Ihre Layout Tests weglassen </template>
Um einen Überblick der Versionen zu erhalten, versehen Sie bitte den Namen Ihrer Zip-Datei mit Datum und Versions-Nummer.