Letzte Aktualisierung 2/05/2014

6. Look & Feel der Zahlungsseite

Erscheinungsbild: Bauen Sie die Zahlungsseite so auf, dass sie zu Ihrer Marke passt und dem Bedarf Ihrer Kunden zum Zeitpunkt vor der Zahlung entspricht, um ein stimmiges Einkaufserlebnis zu bieten und damit Ihre Konversionsrate zu erhöhen.

Auf der gehosteten Zahlungsseite gibt es zwei Arten von Information:

  • Statische Informationen (z.B. Ihr Logo)
  • Detaillierte Zahlungsinformationen (z.B. Bestellnummer, Felder, in die der Kunde seine Kartendaten eingibt, usw.)
Die statischen Informationen stammen aus dem gängigen Layout unseres Systems oder der Seitenvorlage eines bestimmten Händlers. Unser System fügt die Zahlungsdaten für jede Transaktion dynamisch hinzu. Sie können Ihre Zahlungsseite anpassen, bis hin zur Anwendung von benutzerdefiniertem HTML und CSS auf Ihre Inhalte. Sie brauchen uns lediglich zu sagen, wo die „PAYMENT ZONE“ eingefügt werden soll, die die Zahlung auf Ihrer Seite übernimmt.

SICHERES HOSTING: Ingenico ePayments bietet Ihnen sicheres Hosting für den Template Ihrer Zahlungsseite, sodass Sie PCI-konform bleiben können.

Hinweis: Den folgenden Abschnitt über die Anpassung des Demo-Template können Sie überspringen, wenn Sie nicht vorhaben, Ihre Zahlungsseite anzupassen.

6.1 Responsive Payment Page von Ingenico ePayments

Unsere vollständige Responsive Payment Page-Vorlage ist die perfekte und einfachste Lösung für ein Online-Einkaufserlebnis mit mehreren Bildschirmen für Ihre Kunden. Es gewährleistet Ihnen eine optimierte Konvertierung sowohl auf Desktop- als auch auf mobilen Geräten.

  • Um die Ingenico ePayments Responsive Payment Page-Vorlage im Ingenico ePayments Back Office zu aktivieren, gehen Sie zu Konfiguration> Vorlage> Vorlagenauswahl und klicken Sie auf „Die Responsive Payment Page aktivieren“.
  • Um die Vorlage mit Ihrem Logo zu personalisieren, gehen Sie zu Konfiguration> Vorlage> Dateimanager und laden Sie Ihr Logo namens „logo.png“ hoch.

6.2 Passen Sie Ihre eigene angepasste Vorlage an und laden Sie sie hoch

Laden Sie zunächst die Quellenvorlage für die Responsive Payment Page von Ingenico ePayments herunter, um sie an Ihre spezifischen Markenbedürfnisse anzupassen. Sie können Ihre eigene Vorlagenseite vollständig selbst gestalten, sodass nur ein Bereich auf dieser Seite von unserem System ausgefüllt wird. Sie können Ihre Vorlagenseite und Dateien auch in unserer sicheren Umgebung hosten, die wir als „statische Vorlage“ bezeichnen.

Laden Sie unsere Demo-Vorlage für e-Commerce-Zahlungsseiten herunter

Probieren Sie unsere Demo-Vorlagen für Desktop- und mobile Browser aus. Sie können sie als solche verwenden oder sie auf Ihre Zwecke hin anpassen. 

Passen Sie einfach den anderen Wert mit den CSS-Dateien an, um die von Ihnen gewünschte Seite zu erhalten.

Neben der Anpassung der bereitgestellten CSS-Dateien können Sie den HTML-Code auch durch Hinzufügen eigener Kopf- und Fußzeileninformationen vervollständigen. Weitere Informationen finden Sie in Kapitel 6.2.2. Wenden Sie aus Sicherheitsgründen keine unautorisierten externen Daten/Dateien an. Alle Dateien und Daten müssen in den Dateimanager hochgeladen werden, damit sie verwendet werden können. Sobald vervollständigt, Befolgen Sie diese Schritte, um die Vorlagen kostenlos herunterzuladen und anzuwenden:

  1. Download der zip-Datei.
  2. Gehen Sie dazu vom Back Office auf Konfiguration > Vorlage > Erweiterte Konfiguration > Nutzung der dynamischer Vorlage erlauben > Ja zur Aktivierung der dynamischer Vorlagen.
  3. Gehen Sie zum Menüpunkt Konfiguration > Vorlage > Dateimanager, um die in der zip-Datei (kein Ordner) enthaltenen Dateien hochzuladen.
  4. Gehen Sie auf Konfiguration > Vorlage > Vorlagen-Auswahl, um Ihre bevorzugte „Standard-Händler-Vorlage“ für e-Commerce auszuwählen. 

WICHTIG: 

  • Für unser Responsive Payment Page Vorlage müssen Sie die Zahlungsmethoden in vertikal anordnen. Dies erreichen Sie, indem Sie den Parameter PMLISTTYPE=2 mit jeder Transaktion zusätzlich mitsenden.
  • Wenn Sie Ihre e-Commerce-Seite nicht anpassen möchten, können Sie hier unterbrechen. Mehr Informationen, wie Sie Ihre e-Commerce-Seite mit unseren Demo-Vorlagen personalisieren können, finden Sie im nächsten Abschnitt.
  • Die Plattform unterstützt mehrere Vorlagen. Sie können die Standardvorlage für beliebige Transaktionen verwerfen und mithilfe des “TP”-Parameters in Ihrer POST-Anforderung eine spezielle Vorlage aussuchen (TP=<vollständiger Name der HTML-Datei einschließlich Erweiterung>).

Umfangreiche Anpassung: Gestalten Sie Ihre eigene Zahlungsseite 

Neben der Personalisierung der vorhandenen css-Dateien können Sie auch das HTML mit Ihrer eigenen Header- und Footer-Informationen ausfüllen. Mehr Informationen dazu finden Sie in Kapitel 6.2.2 Aus Sicherheitsgründen verwenden Sie bitte keine unautorisierten externen Daten/Dateien; alle Dateien und Daten müssen zur Nutzung auf den Dateimanager hochgeladen werden.

6.2.1 Verborgene Felder

Das folgende verborgene Feld dient zur Übermittlung der URL Ihrer Vorlagenseite:

<input type="hidden" name="TP" value="">

Feld
Nutzung
TP Dateiname der Vorlage, die von Ingenico ePayments gehostet wird.

6.2.2 Zahlungszone (Payment zone)

Die dynamische Vorlagenseite können Sie ganz nach Ihrem Geschmack gestalten. Die einzige Anforderung besteht darin, dass sie die Zeichenfolge "$$$PAYMENT ZONE$$$"enthält. Sie zeigt an, an welcher Stelle unser e-Commerce Modul seine Felder dynamisch einfügen kann. Der Mindesteintrag muss also lauten:

<html>
$$$PAYMENT ZONE$$$
</html>

Wichtig

Verwenden Sie keine BASE Tags, Frames oder FORM Tags, um die Zeichenfolge $$$PAYMENT ZONE$$$ zu verkapseln.

6.2.3 Formatvorlagen

Sie können das Look & Feel Ihrer Zahlungsseite personalisieren, indem Sie der Vorlagenseite Formatvorlagen hinzufügen.

Wir haben eine Klasse für die verschiedenen Typen von Tabellen und Zellen innerhalb unserer Tabellen sowie eine Klasse für die Schaltflächen zum Absenden definiert. Fügen Sie den folgenden Codeblock zwischen die Tags <head></head> ein und ändern Sie die Eigenschaften dieser Klassen gemäß dem Look & Feel Ihrer Webseite (siehe auch das Beispiel auf der oben genannten Vorlagenseite):

<style type="text/css">
<!--
td.ncolh1 {background-color : #006600; color : yellow; font-family : verdana}
td.ncoltxtl {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtl2 {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtr {background-color : #ffffcc; color : black; text-align : left; font-weight : bold}
td.ncoltxtc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
td.ncolinput {background-color : #ffffcc; color : black}
td.ncolline1 {background-color : #ffffff; color : black}
td.ncolline2 {background-color : #ffffcc; color : black}
input.ncol {background-color : #006600; color : white}
td.ncollogoc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
table.ncoltable1 { background-color: #ffffcc;   }
table.ncoltable2 { background-color: #ffffcc;  border-width : medium; border-color : green; }
table.ncoltable3 { background-color: #ffffcc;   }
-->
</style>

Bei der Eingabe eigener Layoutanweisungen müssen Sie der Syntax kaskadierender Formatvorlagen folgen. Wir empfehlen dringend, das Layout in verschiedenen Browsern zu testen, da die Browser Styles auf sehr unterschiedliche Weise handhaben.

6.3 Dynamische Vorlage

Mit der dynamischen Vorlagenseite können Sie das Design der Zahlungsseiten umfänglicher individuell anpassen als mit der statischen Vorlage.

Wenn Sie eine dynamische Vorlagenseite verwenden, gestalten Sie Ihre eigene Vorlagenseite komplett und lassen nur einen Bereich dieser Seite durch unser System ausfüllen. Für jede Transaktion muss die URL Ihrer Vorlagenseite in den verborgenen Feldern an uns geschickt werden.

Denken Sie bitte daran, dass die Verwendung einer dynamischen Vorlagenseite die zusätzliche Anforderung an unser System beinhaltet, Ihre Vorlagenseite zu suchen. Das erhöht die Zeit, die für den Bezahlvorgang benötigt wird.

Wichtig

Um dem aktuellsten PCI-DSS (siehe hier) zu entsprechen, müssen Sie Ihre Vorlage (und die zugehörigen Dateien) in einer Umgebung hosten, die über die höchste PCI-Zertifizierung verfügt. Sollte Ihnen dies nicht möglich sein, empfehlen wir Ihnen eingehend, Ihre Vorlagen-Dateien mit Ingenico ePayments zu hosten und dabei eine statische Vorlage und unseren Template File Manager zu verwenden. Denken Sie bitte daran, dass Ihre Vorlage auf diese Weise trotzdem einen Teil ihres dynamischen Verhaltens einbüßen kann (je nach Ihrer Integration).

6.3.1 Verborgene Felder

Das folgende verborgene Feld dient zur Übermittlung der URL Ihrer Vorlagenseite:

<input type="hidden" name="TP" value="">

Feld
Nutzung
TP URL der dynamischen Vorlagenseite des Händlers (die Seite muss vom Händler gehostet werden). Die URL muss absolut angegeben werden (also mit dem vollständigen Zugriffspfad). Geben Sie in der URL keine Ports an, denn wir akzeptieren nur die Ports 443 und 80. Jede in der Vorlagenseite enthaltene Komponente muss ebenfalls über eine absolute URL verfügen.

6.3.2 Zahlungszone (Payment zone)

Die dynamische Vorlagenseite können Sie ganz nach Ihrem Geschmack gestalten. Die einzige Anforderung besteht darin, dass sie die Zeichenfolge "$$$PAYMENT ZONE$$$"enthält. Sie zeigt an, an welcher Stelle unser e-Commerce Modul seine Felder dynamisch einfügen kann. Der Mindesteintrag muss also lauten:

<html>
$$$PAYMENT ZONE$$$
</html>

Wichtig

Verwenden Sie keine BASE Tags, Frames oder FORM Tags, um die Zeichenfolge $$$PAYMENT ZONE$$$ zu verkapseln.

6.3.3 Dynamisches Verhalten

Für alle Bestellungen kann die gleiche Vorlagenseite verwendet werden. Alternativ lässt sie sich gemäß den Parametern der Bestellung auch dynamisch von der Applikation des Händlers erzeugen.

Um die Vorlagenseite dynamisch zu erzeugen, kann der Händler wahlweise eine für die Bestellung spezifische Seite erstellen, deren URL in den verborgenen Feldern übertragen wird, oder eine feste URL benutzen, dabei aber ein von der Bestellnummer abgeleitetes Ergebnis übergeben. Um dies zu ermöglichen, fügt unser System die wichtigen Zahlungsdaten einschließlich Bestellnummer des Händlers (siehe Verarbeitung nach erfolgter Zahlung) hinzu, wenn es die Vorlagenseite abruft:

HTTP request = url_page_template ?orderID=...&amount=...&currency=…

6.3.4 Formatvorlagen

Sie können das Look & Feel Ihrer Zahlungsseite personalisieren, indem Sie der Vorlagenseite Formatvorlagen hinzufügen.

Wir haben eine Klasse für die verschiedenen Typen von Tabellen und Zellen innerhalb unserer Tabellen sowie eine Klasse für die Schaltflächen zum Absenden definiert. Fügen Sie den folgenden Codeblock zwischen die Tags <head></head> ein und ändern Sie die Eigenschaften dieser Klassen gemäß dem Look & Feel Ihrer Webseite (siehe auch das Beispiel auf der oben genannten Vorlagenseite):

<style type="text/css">
<!--
td.ncolh1 {background-color : #006600; color : yellow; font-family : verdana}
td.ncoltxtl {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtl2 {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtr {background-color : #ffffcc; color : black; text-align : left; font-weight : bold}
td.ncoltxtc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
td.ncolinput {background-color : #ffffcc; color : black}
td.ncolline1 {background-color : #ffffff; color : black}
td.ncolline2 {background-color : #ffffcc; color : black}
input.ncol {background-color : #006600; color : white}
td.ncollogoc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
table.ncoltable1 { background-color: #ffffcc;   }
table.ncoltable2 { background-color: #ffffcc;  border-width : medium; border-color : green; }
table.ncoltable3 { background-color: #ffffcc;   }
-->
</style>

Bei der Eingabe eigener Layoutanweisungen müssen Sie der Syntax kaskadierender Formatvorlagen folgen. Wir empfehlen dringend, das Layout in verschiedenen Browsern zu testen, da die Browser Styles auf sehr unterschiedliche Weise handhaben.

6.3.5 Leistungsverhalten

Unser System ist mit einer Zeitüberschreitungsgrenze von 5 Sekunden für die Anfrage zum Abruf der dynamischen Vorlagenseite beim Händler konfiguriert.

Wir sind gerne bereit, diese Zeitgrenze (HTTPTimeOut) auf unserer Seite auf Anfrage des Händlers (via Support-Ticket) zu ändern.

Verstreicht diese Zeit, verwendet unser System stattdessen die statische Vorlage des Händlers.

Ist keine statische Vorlage konfiguriert, verwendet unser System als letzte Möglichkeit die statische Vorlage Ingenico ePayments.

Dieses HTTPTimeOut Feld wirkt sich sowohl auf Anfragen dynamischer Vorlagen als auch auf Post-Sale-Anfragen aus (siehe Direktes Feedback über HTTP-Server-zu-Server-Anfrage). Daraus folgt, dass wenn der Händler diesen Wert beispielsweise auf 15 Sekunden ändern lässt, sich auch der Timeout-Wert für Post-Sale-Anfragen auf 15 Sekunden verlängert.

Für jede Bestellung führt unser System eine Anfrage durch, um Ihre dynamische Vorlagenseite abzurufen. Wenn Sie ein hohes Transaktionsaufkommen oder eine umfangreiche Vorlagenseite haben (z. B. wenn Ihre dynamische Vorlagenseite eine große Zahl von Bildern enthält), können diese HTTP-Anfragen viel Zeit in Anspruch nehmen. Wenden Sie sich wegen einer Lösung für hohe Transaktionsvolumen bitte an unser Vertriebsteam.

6.4 Mobilgeräte-Vorlage

Sie können die  Anzeige der Zahlungsseite auf Mobilgeräten (Smartphones, Tablets usw.) optimieren, indem Sie eine  Vorlagenseite anwenden, die mit Formatvorlagen angereichert ist (s. die nachfolgenden Kapitel).

6.4.1 Layout-Parameter

Nachstehend sehen Sie die Felder, die durch die Bereitstellung von Angaben in Anfragen individuell angepasst werden können:

<input type="hidden" name="TITLE" value="">
<input type="hidden" name="BGCOLOR" value="">
<input type="hidden" name="TXTCOLOR" value="">
<input type="hidden" name="TBLBGCOLOR" value="">
<input type="hidden" name="TBLTXTCOLOR" value="">
<input type="hidden" name="BUTTONBGCOLOR" value="">
<input type="hidden" name="BUTTONTXTCOLOR" value="">
<input type="hidden" name="LOGO" value="">
<input type="hidden" name="FONTTYPE" value="">

Feld

Beschreibung

Standardwert

TITLE Titel der Seite Titel
BGCOLOR Hintergrundfarbe white
TXTCOLOR Textfarbe black
TBLBGCOLOR Hintergrundfarbe für die rechten Spalten white
TBLTXTCOLOR Textfarbe für die rechten Spalten black
BUTTONBGCOLOR Hintergrundfarbe der Schaltflächen nicht verfügbar
BUTTONTXTCOLOR Farbe des Schaltflächentexts black
LOGO

URL/Dateiname des Logos, das Sie auf der Zahlungsseite anzeigen möchten.

https://secure.ogone.com/Bilder/Händler/[PSPID]/[Bild]

-
FONTTYPE

Schriftfamilie

Verdana

6.4.2 Vorlage

Dias folgende verborgene Feld wird verwendet, um die URL Ihrer Vorlagenseite zu übermitteln:

<input type="hidden" name="TP" value="">

Feld Beschreibung
TP

URL der dynamischen Vorlagenseite. Die URL muss absolut sein (den vollständigen Pfad enthalten), sie kann nicht relativ sein. Jede in der Vorlagenseite enthaltene Komponente muss ebenfalls eine absolute URL haben.

Wichtig: Um dem aktuellen PCI-DSS (2015) zu entsprechen, müssen Sie die Vorlagenelemente, die auf der Zahlungsseite verwendet werden, in einer Umgebung mit der höchsten PCI-Zertifizierung hosten. Deshalb empfehlen wir Ihnen, Ihre Dateien bei Ingenico ePayments zu hosten und dabei den File Manager (Dateimanager) zu verwenden.

Zahlungszone (Payment Zone)

Die Vorlagenseite können Sie ganz nach Ihrem Geschmack gestalten. Die einzige Anforderung besteht darin, dass sie die Zeichenfolge "$$$PAYMENT ZONE$$$" enthält. Sie zeigt an, an welcher Stelle unser e-Commerce-Modul seine Felder dynamisch einfügen kann. Der Mindesteintrag muss also lauten:

<html>
$$$PAYMENT ZONE$$$
</html>

Siehe Beispielvorlagen, um anhand der Vorlagen, die wir erstellt haben, einige Ideen zu bekommen oder Ihre eigene Vorlage einfach auf der Grundlage unserer Vorlagen zu erstellen.

6.4.3 Formatvorlagen (CSS)

Zur leichteren Handhabung und Verständnis von CSS-Formatvorlagen haben wir die CSS-Formatvorlagen in vier Hauptteile unterteilt:

Hinweis: Obwohl die Beispielbilder unten wiedergeben, welche Elemente von den CSS beeinflusst werden, können die verwendeten Stile (Farben, Bilder usw.) von dem, was in den begleitenden Beispielscodes beschrieben wird, abweichen.


Kopfteil

Durch die Verwendung dieses Stils können Sie den Kopfteil der Zahlungsseite wie  unten gezeigt ändern:

Element(s)

- Lock Part

.securedBG
{
background: #797979;
}
.secured
{
padding: 8px 20px 0px 40px;
color: #ffffff;
width: 235px;
margin: 0 auto;
background: url("lock.png") 5px no-repeat #797979;
height: 30px;
}

- Order Summary

table.ncoltable1
{
width: 100%;
margin: 0 auto;
min-width: 300px !important;
}
td.ncoltxtl
{
font-family: open-sans ,Verdana,sans-serif;
font-size: 14px;
background-color:#ffffff;
text-align : left !important;
font-weight : bold !important;
vertical-align:bottom;
}
td.ncoltxtr
{
text-align: left;
font-weight: normal;
font-family: open-sans ,Verdana,sans-serif;
font-size: 14px;
background-color:#ffffff;
}

 

Zahlungsdaten

Wenn Sie diesen Stil verwenden, können Sie den Zahlungsdaten-Abschnitt wie folgt anpassen:

td.ncolinput
{
text-align: left;
font-weight: normal;
font-size: 14px;
font-family: open-sans ,Verdana,sans-serif;
display: block;
box-shadow: none !important;
}
input.ncol
{
background-color: #ffffff;
height: 40px;
font-size: 14px;
text-align: center;
padding: 0px;
font-family: open-sans ,Verdana,sans-serif;
margin: 0 35px 20px;
border-bottom: 1px solid #999999;
border-radius: 0px;
-webkit-appearance: none !important;
-webkit-border-radius: 0 !important;
}
td.ncoltxtl2
{
text-align: left;
font-family: open-sans ,Verdana,sans-serif;
white-space: nowrap;
display: block;
font-size: 14px;
background-color:#ffffff;
}

 

Fußteil

Mit diesem Stil können Sie den Fußteil der Zahlungsseite einstellen:

Element(s)

td.ncollogoc
{
text-align: center;
font-weight: normal;
font-size: 14px;
padding: 2px;
vertical-align: top !important;
}
td.ncollogoc IMG
{
width: 90px;
height: 55px;
margin-right: 4px;
}
.ncollogoc td .ncol
{
width: auto;
padding-right: 10px;
padding-left: 10px;
cursor:pointer;
}
.ncollogoc input.ncol
{
margin-top:10px !important;
-webkit-appearance: none !important;
-webkit-border-radius: 0 !important;
}

 

Zahlungsstatus-Abschnitt

Durch die Verwendung dieses Abschnitts können Sie die Gestaltung der Zahlungsstatus-Seite wie hier gezeigt anpassen:

Element(s)

td.ncoltxtc
{
background-color:#ffffff;
color:#999999;
padding: 0px;
text-align: left;
font-weight: normal;
font-size: 14px;
border-top: 0px solid #ffffff;
font-family: open-sans ,Verdana,sans-serif;
}
td.ncoltxtc h3
{
text-align: center;
font-weight: normal !important;
padding: 5px;
font-family: open-sans ,Verdana,sans-serif;
}
td.ncoltxtmessage
{
background-color: #ffffff;
color: #999999;
text-align: left;
font-weight: normal;
}

 

Die daraus resultierende Seite würde dann so aussehen:

6.4.4 Beispielseiten

Als Starthilfe haben wir zwei Seiten selbst erstellt.

Die erste ist eine Marken-Version, die Sie als Beispiel verwenden können:

https://secure.ogone.com/ncol/StandardMobileTemplate.htm

Sie können aber auch die nachstehende „nackte" Version als Grundlage verwenden, um Ihre eigene Vorlage zu erstellen:

https://secure.ogone.com/ncol/StandardMobileTemplate_generic.htm

Diese beiden Vorlagen mit zusätzlichen Dateien (Schriftarten, Bildern) stehen Ihnen als herunterladbare Zip-Datei hier.

6.5 Vorlagen-Dateimanager

Mit dem Vorlagen-Dateimanager können Sie Ihre Vorlagen und die unterschiedlichen damit in Zusammenhang stehenden Dateien einfach verwalten.

Um den Dateimanager zu verwenden, melden Sie sich bei Ihrem Ingenico ePayments-Konto an und gehen Sie zu „Konfiguration“ > „Vorlage“ > „Dateimanager“.

Wichtig
Es ist nicht möglich, in Ihrer Integration Dateien, die zuvor von Ingenico ePayments hochgeladen wurden, und Dateien, die mit dem Dateimanager hochgeladen wurden, zu verwenden.
Wenn Sie Dateien haben, die in der Vergangenheit von Ingenico ePayments hochgeladen wurden, vergewissern Sie sich bitte, dass diese Dateien erneut von Ihnen über den Dateimanager hochgeladen werden.

6.5.1 Vorlagendateien hochladen

Unter „Vorlagendateien hochladen“ wählen Sie die Schaltfläche „Dateien...“ aus, um nach den Dateien zu suchen, die Sie hochladen möchten. Sie können JavaScripts sowie HTML-, CSS- und Bilddateien (.css, .jpg, .jpeg, .gif, .png, .html, .js) mit einer Größe von höchstens 7 MB pro Datei bzw. 10 MB insgesamt hochladen.

Treffen Sie Ihre Auswahl, und bestätigen Sie diese anschließend.

6.5.2 Hochgeladene Dateien prüfen und verwalten

Sobald der Upload abgeschlossen ist, sehen Sie Ihre hochgeladenen Dateien auf der gleichen Seite im Abschnitt „Hochgeladene Dateien“.

Die Dateien werden zunächst den Status „Wird geprüft“ aufweisen, in dem die erforderlichen Sicherheits-/Virenprüfungen durchgeführt werden.

Sie können die Dateien verwenden, sobald sich deren Status zu „Bestätigt“ geändert hat.

Klicken Sie auf die Schaltfläche „Aktualisieren“ , um den aktuellen Status der Dateien zu prüfen bzw. auf die Schaltfläche „Löschen“ , um die Datei dauerhaft zu löschen.

Eine Datei wechselt in den Status „Abgelehnt“, wenn sie die Sicherheitsprüfung nicht bestanden hat. Das kann beispielsweise auf einen Virus oder eine falsche Dateierweiterung zurückzuführen sein. 

6.5.3 Integration

Weisen Sie Ihren hochgeladenen Dateien in Ihren Vorlagen einen Code in diesem Format zu: $$$TP RESOURCES URL$$$/[Name Ihrer Datei].

Wenn Sie jedoch eine Ressource in einer CSS-Datei nutzen möchten, sollten Sie den folgenden Code referenzieren: "./[Name Ihrer Datei]

Beispiel:

Um Ihre hochgeladene Vorlage in Ihrer e-Commerce-Integration zuzuweisen, senden Sie den Namen der Vorlagendatei mit dem Parameter „TP“.

Beispiel: TP=mytemplatefile.html

Wenn Sie über eine grundlegende e-Commerce-Integration mit einem Logo im oberen Bereich der Seite verfügen, müssen Sie das hochgeladene Logo zuweisen, indem Sie den Dateinamen sowie den Parameter „LOGO“ senden.

Beispiel: LOGO=mycompanylogo.png

6.6 Vorlage Sicherheitskontrolle

Um die Kunden des Händlers vor betrügerischen Aktivitäten zu schützen, beispielsweise vor der Manipulation sensibler Kartendaten (Kartennummer, CVC), sind verschiedene Sicherheitsprüfungen für die Händler-Vorlage bereitgestellt worden.

Auf der Seite Technische Informationen des Händlers, Register "Globale Sicherheitsparameter", Bereich "Template", können folgende Einstellungen konfiguriert werden:

  • Enable Javascript check on template (Prüfung auf Javascript im Template aktivieren)
    Diese Funktion können Sie aktivieren, um die Verwendung von Javascript auf der Template-Seite zu erkennen. Wenn Javascript erkannt wird, wird der Template gesperrt und stattdessen der Standard-Template verwendet.
  • Allow usage of dynamic template (Nutzung dynamischer Vorlage erlauben)
    Der Händler kann auswählen, welche Vorlagentypen zur Initiierung einer Transaktion auf unserer Plattform zulässig sind: Es können sowohl statische als auch dynamische Vorlagen konfiguriert werden.

    • Wenn der Händler die Option Nutzung statischer Vorlage erlauben aktiviert hat, muss der Name der vertrauenswürdigen statischen Vorlage angegeben werden. Diese Liste wird dann zum Abgleich der Informationen genutzt, die während des Zahlungsprozesses von Ingenico ePayments empfangen werden. Es können hier einer oder mehrere, durch Semikolon getrennte Werte eingegeben werden.
    • Wenn der Händler die Option Nutzung dynamischer Vorlage erlauben aktiviert hat, muss der Hostname der vertrauenswürdigen Website angegeben werden, die als Host dieser dynamischen Vorlage dient. Dieses Feld kann mehrere Web-Hosts, getrennt durch Semikolon, enthalten. Es sollte aber immer die komplette URL angegeben werden, z. B. http://www.website.com/. Die Unterverzeichnisse können wegfallen. Wenn die URL der dynamischen Vorlage http://www.website.com/templates/nl/template1.htm lautet, reicht als Angabe für den vertrauenswürdigen Web-Host http://www.website.com aus.

      Zusätzlich kann der Händler wahlweise eine oder mehrere URLs absolut vertrauenswürdiger dynamischer Vorlagen, getrennt durch Semikolon, konfigurieren.

Wird mit einer Transaktion eine dynamische Vorlage übermittelt, aber dynamische Vorlagen sind nicht erlaubt, wird die Vorlage gesperrt und unser System verwendet stattdessen die statische Vorlage.  Wenn keine statische Vorlage konfiguriert ist oder, wird die Standardvorlage Ingenico ePayments verwendet. In der Voreinstellung sind bei Händlern die Optionen JavaScript-Prüfung der Vorlage. 

6.7 Schloss-Symbol für sichere Umgebungen

Die für die Verbindung des Kunden mit unserer Plattform verwendete URL nutzt ein sicheres Protokoll (HTTPS). Sämtliche Kommunikation zwischen unserer e-Commerce-Plattform und dem Kunden ist sicher verschlüsselt.

Das kleine Vorhängeschloss, das im Browser zur Anzeige einer sicheren Webseite verwendet wird, erscheint jedoch unter Umständen nicht, wenn einige Elemente (z. B. Bilder) in der Vorlagenseite nicht auf einem sicheren Server hinterlegt sind oder wenn einige Frames der angezeigten Webseite nicht von sicheren Webseiten stammen.

Auch wenn die Kommunikation für die Zahlungsverarbeitung verschlüsselt ist, erkennen die meisten Browser eine sichere Verbindung nur dann, wenn alle Elemente auf dem Bildschirm einschließlich Bildern, Tönen usw. von sicheren Webseiten kommen.

Händler, die nicht über eine sichere Webseite verfügen, sollten folgende Regeln beachten:

  1. Verwenden Sie für Zahlungsseiten keine Frames. Sie können die gesamte Bildschirmanzeige mit einer Vorlagenseite aktualisieren, die so aussieht, als würden Sie Frames verwenden, oder die Verarbeitung der Zahlung in einem neuen Browser-Fenster erlauben.
  2. Verknüpfen Sie keine Dateien mit der Vorlagenseite (<link> Tag), die Sie für die Zahlungsseite benutzen. Verwenden Sie stattdessen die Tags <style> und <script>, um Formatvorlagen und Skripts in die Vorlagenseite einzubinden.
  3. Sorgen Sie dafür, dass die Bilder in Ihrer Vorlagenseite auf einem sicheren Server gespeichert sind (die Vorlagenseite selbst kann auf einem nicht sicheren Server hinterlegt sein, die Bilder müssen es jedoch sein). Wir können das Hosting für diese Elemente übernehmen (siehe Optionen für Bilderhosting in Ihrem Konto).

6.8 Zahlungsseite in einem iFrame

iFrames werden immer beliebter. Sie erlauben dem Händler, eine externe Webseite (beispielsweise die Zahlungsseite) in seine Website zu integrieren und dabei seine eigene URL im Browser zu erhalten.

iFrames weisen jedoch im aktuellen Kontext auch wesentliche Nachteile auf:

  • Da es sich bei der URL um die des Händlers handelt, könnte es eine einfache http (nicht https) sein und damit würde das Vorhängeschloss-Symbol nicht im Browser erscheinen. Dies könnte bei potenziellen Kunden Zweifel an der Sicherheit des Webshops wecken.
  • Einige Zahlungsmethoden (wie Giropay, Sofortüberweisung, Bancontact/Mister Cash, PayPal...) verwenden Weiterleitungen, die zu einem unbefriedigenden Erscheinungsbild bzw. Problemen bei der Navigation führen können.

Aus diesen Gründen werden iFrames von Ingenico ePayments nicht empfohlen und ihre Verwendung erfolgt auf alleinige Verantwortung des Händlers. Ingenico ePayments rät stattdessen dringend zur Verwendung einer dynamischen Vorlage.

Falls Sie die Integration von iFrames planen, möchten wir Ihnen folgende Empfehlungen geben:

  • Verwenden Sie iFrames ausschließlich auf der Seite für die Auswahl der Zahlungsmethode (und den nachfolgenden Seiten).
  • Verwenden Sie wo immer möglich Pop-ups für externe Zahlungsmethoden, um die korrekte Darstellung der Web-Applikationen Dritter sicherzustellen.

Diese Website verwendet Cookies, um Ihnen die beste Nutzer-Erfahrung zu geben. Wenn Sie Cookies nicht akzeptieren möchten, empfehlen wir Ihnen, Ihre Cookie-Einstellungen zu ändern. Klicken Sie auf "Akzeptieren", um alle Cookies von dieser Website zu ermöglichen.

Cookie-einstellungen

Cookies werden verwendet, um die Webseite zu verbessern und Informationen anzubieten, die für Sie von Interesse sind.

Funktionsbezogene Cookies

Funktionsbezogene Cookies sind für das ordnungsgemäße Funktionieren der Webseite nötig. Diese Cookies können nicht deaktiviert werden.

Optimierte

Optimierungscookies ermöglichen es uns, die Nutzung der Webseite zu analysieren, damit wir unsere Webseite bewerten und verbessern können.
Dies ist der Standardwert.

Personalisierte

Personalisierte Cookies werden für Soziale Medien und die erweiterte Personalisierung verwendet. Sie ermöglichen es uns, Ihnen Informationen bezüglich Ihres Unternehmens zu zeigen.


Beispiel für unterstützte Funktionen

  • Ländereinstellung speichern
  • Spracheinstellung speichern

Beispiel für eine unerlaubte Funktion

  • Personenbezogene Daten über Ihren Besuch speichern
  • anonymes Tracking über Google Analytics
  • Tracking zum Zweck der Weitervermarktung

Beispiel für unterstützte Funktionen

  • Ländereinstellung speichern
  • Spracheinstellung speichern
  • Anonymes Tracking über Google Analytics

Beispiel für eine unerlaubte Funktion

  • Personenbezogene Daten über Ihren Besuch speichern
  • Tracking zum Zweck der Weitervermarktung

Beispiel für unterstützte Funktionen

  • Ländereinstellung speichern
  • Spracheinstellung speichern
  • Anonymes Tracking über Google Analytics
  • Auf Ihre Interessen abgestimmte Inhalte bereitstellen
  • Auf Ihre Interessen abgestimmte Inserate bereitstellen
  • Tracking zum Zweck der Weitervermarktung

Beispiel für unerlaubte Funktionen

  • Personenbezogene Daten speichern