Corporate Paypage
Die Computop Paygate-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 Kreditkartenzahlungen können Sie mit dem Parameter Template ein individuelles Layout für das PaySSL-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 Computop Helpdesk kopiert dieses XSLT-Template auf unseren Computop Paygate-Server. Wenn Sie den Namen Ihrer XSLT-Datei im Parameter Template übergeben, erscheint das Computop Paygate-Formular in Ihrem Layout.
Allgemeine Informationen zu XSLT finden Sie unter www.w3.org .
Bitte beachten Sie, dass die Corporate Paypage eine kostenpflichtige Zusatzoption ist. Sprechen Sie daher Computop Vertrieb darauf an.
Computop stellt Ihnen ein Programmierbeispiel zur Erstellung eines responsive Kreditkartenformulars online unter https://www.computop.com/de/xslt zur Verfügung. Die zu erstellenden Template-Dateien – XSL und XML – werden später automatisch für die diversen Browser transformiert. Stellen Sie daher vor dem Versand an Computop sicher, dass die beiden Dateien korrekt im Browser geladen werden können. Dort muss der komplette Code ausgegeben werden können, es dürfen keine Fehlermeldungen erscheinen. Wird eine Fehlermeldung ausgegeben, müssen der Code und die verwendeten Tags entsprechend überarbeitet werden. Bitte beachten Sie, dass uns neue Versionen bis spätestens 15:30 Uhr vorliegen müssen, damit eine Bearbeitung am gleichen Tag erfolgen kann.
Für die Nutzung der Corporate Paypage mit XSLT gelten die nachfolgenden Konventionen:
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.
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 Computop Bezahlseite an, zum Beispiel: https://www.computop-paygate.com/payssl.aspx?MerchantID=IhreMID&Len=123&Data=AGSDJ…ASDF&template=IhreMerchantID
Feldnamen des Formulars
Bei der Implementierung des Textfeldes für die Kreditkartennummer verwenden Sie für die Parameter „name“ und „id“ folgende Werte:
Ein Textfeld zur Eingabe der Kreditkartennummer wird dann folgendermaßen implementiert:
<input type="text" name="cardNumber" id= "cardNumber" value=""></input>
Hidden Fields
Folgende Hidden Fields müssen implementiert werden, damit die Werte beim Abschicken des Formulars weitergereicht werden können:
Sprachauswahl
Die Sprachauswahl im PaySSL.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: paygate/language/@name.
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="windows-1252"?>
</languages>
<language name="de">
</language>
<language name="en">
</language>
</languages>
Die Codierung ist auch „UTF-8“ möglich.
Mit <xsl:variable name=““ select=“paygate/language/@name“/> können Sie direkt von der XSL-Datei einen XML- Sprachenabschnitt ansprechen.
Zum Überblick, welche Parameter zusätzlich von der PaySSL gerendert werden, sehen Sie sich bitte folgende Struktur an (XSL-Datei wird gegen folgenden XML-String gerendert):
strXML = "<?xml version='1.0' encoding='windows-1252'?>" & _
"<paygate pay='ssl'>" & _
"<merchantID>"..."</merchantID>" & _
"<len>"..."</len>" & _
"<data>"..."</data>" & _
"<Background>"..."</Background>" & _
"<BGImage>"..."</BGImage>" & _
"<BGColor>"..."</BGColor>" & _
"<FFace>"..."</FFace>" & _
"<FSize>"..."</FSize>" & _
"<FColor>"..."</FColor>" & _
"<center>"..."</center>" & _
"<CCard>"..."</CCard>" & _
"<Year>"..."</Year>" & _
"<URLBack>"..."</URLBack>" & _
"<twidth>"..."</twidth>" & _
"<theight>"..."</theight>" & _
“<brands><brand>”…”</brand></brands>” &_
“<cvc>”…”</cvc>” &_
"<ccexpiryyear>" … "</ccexpiryyear>" & _
"<ccbrand>" … "</ccbrand>" & _
"<template>"..."</template>" & _
"<counter>"… "</counter>" & _
"<notify>"… "</notify>" & _
"<errorcode>"..."</errorcode>" & _
"<PCNr>"..."</PCNr>" & _
"<PCNrBrand>"... "</PCNrBrand>" & _
"<PCNrMonth>"… "</PCNrMonth>" & _
"<PCNrYear>"… "</PCNrYear>" & _
“<creditcardholder>” … “</creditcardholder>” & _
"<Autostart>"…"</Autostart>" & _
<language/@name ... (Area for selected language-Node)
(content of MerchantId_PaySSL.xml in the respective language)>
"</paygate>"
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 Computop Helpdesk die Parameter für die Übergabe, z. B. der SessionID zu verwenden.
Fehler-Mapping
Bei den unten genannten Fehlercodes leiten wir auf das Formular zurück, um eine erneute Eingabe der Kreditkartendaten zu ermöglichen. Sie müssen lediglich den Parameter „errorcode“ auswerten und den gewünschten Text aus Ihrer XML-Datei anzeigen.
An dieser Stelle wird das template „errorcode“ aufgerufen:
<xsl:apply-templates select=“/paygate/errorcode” />
Das aufgerufene Template „errorcode“ kann dann so aussehen. Alternativ auch mit „if“ umzusetzen.
<xsl:template match="errorcode">
<tr>
<td>
<xsl:choose>
<xsl:when test=".='0015'">
<xsl:value-of select="//language/ErrorCodeDescription/Description1"/>
<!--The input of the credit card number was not correct-->
</xsl:when>
...
</xsl:choose>
</td>
</tr>
</xsl:template>
Es ist aber auch möglich, die Fehlertexte direkt in das (Haupt-) Template zu integrieren:
<xsl:if test="paygate/errorcode != ''">
<xsl:choose>
<xsl:when test="paygate/errorcode='0015'">
<xsl:value-of select="/paygate/language/ErrorCodeDescription/Description1"/>
<!--The input of the credit card number was not correct-->
</xsl:when>
</xsl:choose>
</xsl:if>
JavaScript
JavaScript-Funktionen sind, wenn gewünscht, von Ihnen in Ihr Template zu implementieren.
<script id=“clientEventHandlersJS“ language=“JavaScript“>
if (document.SSLForm.cardNumber.value.length> 19)
{
alert(„<xsl:value-of select=“/paygate/language/strJavaScript1“/>“);
document.SSLForm.cardNumber.focus();
}
...
</script>
Bitte verwenden Sie keinen externen Link auf Ihr JavaScript.
Link zu Visa Secure und MasterCard Secure Code
Die Visa und MasterCard-Regularien erfordern, dass Ihre Bezahlseite das Logo von Visa Secure und SecureCode anzeigt. Bitte verlinken Sie das Verified Secure-Logo mit https://www.computop-paygate.com/vbv.aspx und das MasterCard SecureCode-Logo mit https://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html .
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="windows-1252"?>
<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>PaySSL Template</title>
<script>Your JavaScript</script>
</head>
<body>
<form action="BASEURL/payinterim.aspx" method="POST">
Your form with hidden fields and 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">
<strCCNumber>credit card number</strCCNumber>
</language>
Anschließend ersetzen Sie den Text im HTML durch einen Verweis auf den entsprechenden Abschnitt in der XML-Datei:
<xsl:value-of select="/paygate/language/strCCNumber"/>
Um Ihr Template zu testen, bitten wir Sie folgende Zeilen nur für den Test (bevor Sie es an Computop 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 Computop Helpdesk 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="windows-1252"?>
<?xml-stylesheet type="text/xsl" href="templatename.xsl"?>
<paygate>
<languages>please omit for your layout tests
<language name="de">
</language>
<language name="en">
</language>
<languages>please omit for your layout tests
</paygate>
Um einen Überblick der Versionen zu erhalten, versehen Sie bitte den Namen Ihrer Zip-Datei mit Datum und Versions-Nummer.
Analog zum Kreditkartenformular ist es nun auch möglich, eigene XSLT-Templates für das SEPA-Lastschriftformular zu gestalten. Genau wie beim Kreditkartenformular wird das über den Parameter „Template“ gesteuert. Über folgende URL kann dies aufgerufen werden:
https://www.computop-paygate.com/paySDD.aspx?MerchantID=IhreMID&Len=123&Data=AGSDJ…ASDF&template=IhreMerchantID |
Dabei müssen die Dateien folgende Namenskonvention verwenden:
Hinweis: Eine Corporate Paypage ermöglicht Ihnen noch zahlreiche weitere Funktionen wie zum Beispiel die Vorbelegung von Kartendaten, die hier nicht einzeln erläutert sind. Für Fragen zu weiteren Funktionen wenden Sie sich bitte an den Computop Helpdesk.