Vorlagen im Gesamtüberblick
Computop bietet 3 Arten gehosteter Vorlagen an:
- Gehostetes Kreditkartenformular
- Gehostete Zahlungsseite mit allen relevanten Zahlungsmethoden auf einer Seite
- Gehostetes Lastschriftformular
Computop gehostetes Kreditkartenformular
Endpunkt
https://www.computop-paygate.com/payssl.aspx
Visualisierung
Merkmale & Funktionen
| Merkmale & Funktionen | Beschreibung |
|---|---|
| Unterstützte Marken | Derzeit werden folgende Marken unterstützt:
|
| Automatische Markenerkennung | Anhand der führenden Ziffern (BIN) erkennen die Vorlagen die richtige Marke und heben das Logo der Marke hervor |
| Automatische Trennung der Ziffern der Kartennummer | Basierend auf der erkannten Marke wird das richtige Trennmuster angewendet (z. B. Visa: 4-4-4-4; Amex: 4-6-5) |
| Automatisierte Kartennummernprüfung | Vorlagen führen eine Luhn-Prüfung durch, um die Kartennummer zu validieren. Falsche Kartennummern führen dazu, dass das Feld rot hervorgehoben wird, was auf einen Fehler hinweist. |
| Automatisierte Kartenablaufprüfung | Bei Ablauf in der Vergangenheit wird eine Fehlermeldung ausgegeben. |
| Unterstützte Sprachen | Derzeit werden unterstützt:
Das Hinzufügen neuer Sprachen geht sehr schnell und kann im Handumdrehen erfolgen. Wir benötigen lediglich die übersetzten Texte. |
| Benutzerdefinierte Felder | Händler können URL-Abfrageparameter verwenden, um zusätzliche Felder für die grundlegende Anpassung zu senden. Alle Felder sind unten beschrieben. |
| CVC-Tarnung | Der CVC-Wert wird nicht in Rohform angezeigt, sondern als zusätzliche Sicherheitsebene verborgen. |
| Geräte-Spezifizität | Die Formulare sind responsive. |
| Ziffernblock bei der Arbeit auf einem Mobilgerät | Für ein besseres Benutzererlebnis wird beim Bearbeiten numerischer Felder der Ziffernblock verwendet. |
Computop gehostete Zahlungsseite (HPP)
Endpunkt
https://www.computop-paygate.com/paymentpage.aspx
HPP mit allen Zahlungsmethoden als Logos
Diese Seite zeigt alle Logos der verfügbaren Zahlungsmethoden, der Händler hebt also keine Zahlungsmethode hervor.
Der Benutzer wird automatisch zur spezifischen URL der gewählten Zahlungsmethode weitergeleitet (siehe Anleitung zu den einzelnen Zahlungsmethoden).
Visualisierung
Per HPP verfügbare Zahlungsmethoden
Zahlungsmethode |
|---|
Karten |
Lastschrift |
PayPal |
iDEAL |
Sofort |
giropay |
paydirekt |
Alipay |
Bancontact |
Bank Transfer |
| Bitpay |
eNETS |
Finland Online Bank Transfer |
Multibanco |
My Bank |
MyClear FPX |
Przelewy 24 |
PostFinance |
paysafecard |
QIWI |
RHB Bank |
TrustPay |
| Apple Pay |
Computop gehostetes Lastschriftformular
Endpunkt
https://www.computop-paygate.com/paysdd.aspx
Visualisierung
Anpassung der Vorlagen im Überblick
Option 1 Computop Standardvorlagen | Option 2 Anpassung des Händlers mithilfe von Variablen | |
|---|---|---|
Anzeigeoptionen für Zahungsmittel | Standarddesign: Die Vorlagen sind im Computop-Firmenstil gestaltet. Der Händler kann ein Logo und mehrere benutzerdefinierte Felder wie unten beschrieben hinzuzufügen. | Mehr Flexibilität: Es können Hintergrund- und Schaltflächenfarben, Schriftgrößen und -stile und mehr angepasst werden. Eine ausführliche Anleitung mit einer Beschreibung aller Optionen finden Sie weiter unten. |
Anpassung | Ø Händlerlogo Ø Benutzerdefinierte Felder, auch CustomFields genannt (Bestelldetails, Kundendetails…) | Im separaten Kapitel weiter unten beschrieben: Anpassung des Händlers mithilfe von Variablen |
Anpassung der Computop Standardvorlagen
Wie kann die Zahlungsseite angepasst werden?
Wenn sich der Händler für die Verwendung der Standard-Zahlungsseite von Computop entscheidet, kann er sein Logo einfügen und bis zu 9 spezifische Felder (auch CustomFields genannt) des Zahlungsformulars anpassen.
Key | Format | CND | Beschreibung |
|---|---|---|---|
CustomField1 | ans..50 | O | Betrag und Währung der Transaktion |
CustomField2 | ans..50 | O | Bestellnummer |
CustomField3 | ans..50 | O | Logo des Händlers, URL des Logos. Format: .png Das Logo kann jede beliebige Größe haben, Vorlagen passen die gewünschte Größe an. |
CustomField4 | ans..50 | O | Beschreibung der Bestellung |
CustomField5 | ans..50 | O | Käuferinformationen |
CustomField6 | ans..50 | O | Versandinformationen |
CustomField7 | ans..50 | O | Lieferinformationen |
CustomField8 | ans..50 | O | Name eines neuen Feldes, das vom Händler hinzugefügt wurde |
CustomField9 | ans..50 | O | Wert eines neuen Feldes, das vom Händler hinzugefügt wurde |
| URLBack | ans..100 | O | Rückkehrseite, falls der Kunde das Zahlungsformular mit der Schaltfläche "x" in der rechten oberen Ecke abbricht. |
Zahlungsanfrage mithilfe benutzerdefinierter Felder:
.......aspx?MerchantID=Test&Len=67&Data=0A67FE96a65d384350F50FF1&CustomField1=...&CustomField2=....
Visualisierung der Anpassung unter Verwendung aller benutzerdefinierten Felder
Anpassung des Händlers mittels Variablen
Änderung des Vorlagennamens
Bevor das Erscheinungsbild geändert und angepasst werden kann, muss der Vorlagenname geändert werden.
Die Namensänderung muss erfolgen in:
- .xml Dateiname
- .xsl Dateiname
- innerhalb der xsl-Datei
- Name des Bilderordners
- innerhalb der Datei main.js
Die Regel lautet, dass der aktuelle Name (z. B. Cards_template_v1) in einen neuen Namen (z. B. merchant_A) geändert werden muss, ohne dass sonst etwas geändert wird.
Beispiel für eine neue Struktur mit Vorlagenname: merchant_A
imagesmerchant_A_PaySSL
merchant_A_PaySSL.xml
merchant_A_PaySSL.xsl
Darüber hinaus muss die Änderung des Vorlagennamens wie oben beschrieben in den Dateien merchant_A_PaySSL.xsl und main.js erfolgen.
Die Zahlungsvorlagen bieten mehrere Möglichkeiten, um das Erscheinungsbild individuell anzupassen.
Die Konfiguration erfolgt über Änderungen in einer CSS-Datei namens „overrides.css“, die sich im Ordner „css“ der Vorlage befindet. Es ist erforderlich, dass Sie über grundlegende Kenntnisse von CSS verfügen.
Standardvorlage ohne jegliche Anpassung
Mögliche Änderungen
Die Datei „overrides.css“ ist standardmäßig in der Vorlage enthalten und kann zum Hinzufügen benutzerdefinierter CSS-Änderungen verwendet werden. Es gibt zwei Möglichkeiten, Änderungen hinzuzufügen:
- Ändern der vordefinierten Optionen
- Hinzufügen von benutzerdefiniertem CSS-Code
Da die Standardvorlage sorgfältig angepasst wurde und viele besucherspezifische Details berücksichtigt, die Ihnen möglicherweise nicht bewusst sind (z. B. Browser, Betriebssystem, Land, Sprache, Bildschirmgröße/-auflösung, Gerätetyp …), wird das Hinzufügen benutzerdefinierten CSS-Codes nicht empfohlen, ist jedoch dennoch möglich, wenn Sie wissen, was Sie tun.
Vordefinierte Optionen
Nachfolgend finden Sie eine Liste der Anpassungsoptionen mit Abbildungen und Erklärungen
Optionen können festgelegt werden, indem Sie den angegebenen CSS-Variablennamen in der Datei „overrides.css“ auskommentieren und seinen Standardwert auf den gewünschten Wert ändern.
Schriftarten & Text
Mit den folgenden Variablen können Sie das Erscheinungsbild des Textes in der Zahlungsvorlage ändern:
Variablenname | Standardwert | Zweck |
|---|---|---|
--font-size-base | 12px | Alle Schrift- und Elementgrößen werden von diesem Wert abgeleitet. Er definiert die Größe des normalen Textes und skaliert alle anderen Elemente (Überschriften, Seitenleisten, Eingaben) proportional dazu. |
--font-family-headline | 'Ubuntu', monospace | Die für Überschriften verwendete Schriftfamilie (A). |
--font-family-copy | 'NotoSans', sans-serif | Die für alle anderen Texte verwendete Schriftfamilie. |
--text-color-base | #606060 | Standardfarbe von Text. |
--text-color-link | #4b61a5 | Standardfarbe von Links (B). |
Hintergrundfarben
Passen Sie die folgenden Hintergrundfarben des Layouts an:
CSS Variablenname | Standardwert | Zweck |
|---|---|---|
--background-page | #697272 | Definiert die Hintergrundfarbe von Bereich A |
--background-header | #ffffff | Definiert die Hintergrundfarbe von Bereich B |
--background-content | #eaecec | Definiert die Hintergrundfarbe von Bereich C |
--background-cart | #f7f7f7 | Definiert die Hintergrundfarbe von Bereich D |
Zahlungsformulare
Für Zahlungsformulare stehen folgende Anpassungsmöglichkeiten zur Verfügung:
Variablenname | Standardwert | Zweck |
|---|---|---|
--input-highlight | var(--ui-color) | Die Rahmenfarbe einer aktuell aktiven Texteingabe (A). |
--input-text | var(--ui-color) | Die Textfarbe von Texteingaben (B). |
--input-background | #ffffff | Die Hintergrundfarbe von Texteingaben (C). |
--submit-background | var(--ui-color) | Die Hintergrundfarbe von Senden-(Bezahlen-)Schaltflächen (D). |
--submit-text | #ffffff | Die Textfarbe von Senden-(Bezahlen-)Schaltflächen (E). |
Sonstige Änderungen
Logoaustausch (A)
Die verwendete Bilddatei befindet sich im Bilderordner der Vorlage und heißt „logo_template_360x100.png“.
Denken Sie daran, sie nur durch eine Datei mit genau denselben Abmessungen (360 Pixel Breite, 100 Pixel Höhe) zu ersetzen.
Fußzeilenlinks (B) & Copyright (C)
Die Fußzeilenlinks und das Copyright sind Teil des Fußzeilenabschnitts in der Datei „translations.json“, die sich im Ordner „data“ der Vorlage befindet. Passen Sie sie nach Bedarf an.
