Durch das Hochladen von benutzerdefiniertem HTML haben Sie mehr Kontrolle über den Inhalt und das Layout jeder Seite. Wenn Sie Ihren HTML-Code schreiben, müssen Sie die eingebauten Felder und Blöcke verwenden, um die Felder auf den Seiten anzuzeigen, wenn sie von Trust Payments wiedergegeben werden.
Wenn Sie Ihre Website Payment Pages anpassen, sind Sie dafür verantwortlich, dass Ihre Lösung mit den einschlägigen Regelungen konform ist.
Klicken Sie hier, um eine vollständige Liste der verfügbaren Felder und Blöcke in einer neuen Registerkarte anzuzeigen.
Es kann nützlich sein, diese Liste zur Hand zu haben, wenn Sie den Rest dieses Dokuments lesen.
Felder
Sie können st.field in Ihr HTML einfügen, um Informationen aus der Sitzung und Eingaben wie Textfelder und Dropdown-Boxen als Teil der gerenderten Seite anzuzeigen. Mit CSS und HTML können Sie diese Elemente und ihre Position auf der Seite vollständig anpassen.
Im Folgenden finden Sie Beispiele für die Arten von Feldern, die in Ihren HTML-Code aufgenommen werden sollten:
Werte
Ein Wert wird verwendet, um zuvor eingegebene Informationen anzuzeigen, z. B.
You can use the following reference to track your order: {{st.orderreference .value}}Textfelder
Ein Textfeld ermöglicht es dem Kunden, neue Informationen einzugeben, z.B.
Please enter your postcode: {{st.billingpostcode.textfield}}Dropdowns
Drop-downs ermöglichen es den Kunden, Informationen aus einer Liste auszuwählen, z. B.
Country: {{st.billingcountryiso2a.dropdown}}
Bestimmte Felder können nicht als Texteingabe oder Dropdown-Listen angezeigt werden.
Klicken Sie hier, um eine vollständige Liste der Felder und ihrer unterstützten Implementierungen zu erhalten.
Die in den vorangegangenen Abschnitten beschriebenen HTML-Formulare werden automatisch mit Informationen aus der Sitzung vorausgefüllt, sofern diese bereits eingegeben wurden. Wenn der Kunde nicht alle erforderlichen Felder ausfüllt oder ungültige Informationen eingibt, wird die Zahlung nicht fortgesetzt und das betreffende Feld wird auf dem Bildschirm hervorgehoben.
Alle Felder von Trust Payments werden überprüft. Benutzerdefinierte Felder können nicht von Trust Payments validiert werden.
Feldfehler werden dem Kunden nur angezeigt, wenn die entsprechenden Eingabefelder auf der Seite enthalten sind
Wurde z. B. eine ungültige E-Mail-Adresse per Post übermittelt, kann der Kunde diese auf Payment Pages nicht korrigieren, wenn dieses Eingabefeld nicht sichtbar ist, so dass er seine Zahlung nicht abschließen kann.
Bitte vergewissern Sie sich, dass alle Daten nach unseren Vorgaben validiert wurden, bevor Sie sie an Payment Pages senden, ODER dass Sie die erforderlichen Rechnungs-/Lieferdaten auf Payment Pages anzeigen, damit der Kunde gegebenenfalls Änderungen vornehmen kann.
Benutzerdefinierte Texteingabefelder und -werte können auf dieselbe Weise eingegeben werden wie die zuvor beschriebenen integrierten Felder, z. B.
Enter your Membership Id: {{st.memberid.textfield}}
This is your Membership Id: {{st.memberid.value}}
- Die st.field Funktionalität unterstützt keine Dropdowns für benutzerdefinierte Felder.
- Trust Payments kann keine benutzerdefinierten Felder validieren.
Die meisten Felder, die in einer Payment Pages -Sitzung verwendet werden, einschließlich benutzerdefinierter Felder, können auf Ihrer Website als Teil einer Weiterleitung oder als Teil einer URL-Benachrichtigung.
Blöcke
An st.block is a reference you can include in your HTML to display grouped page elements when the page is rendered, instead of defining each element individually. Blocks are written as follows (including curly brackets): {{st.block.blockname}}
Wenn z.B. die Referenz {{st.block.paymentdetailsdiv}} auf der Seite mit den Zahlungsdetails übergeben wird, zeigt Trust Payments die Zahlungsfelder an, wenn die Seite gerendert wird.
Bestimmte st.block sind für hochgeladene HTML-Dateien erforderlich.
Klicken Sie hier, um die vollständige Liste der verfügbaren Blöcke in einer neuen Registerkarte zu öffnen.
Körperklasse
Trust Payments recommends specifying {{st.bodyclass.value}} in the class attribute of the body tag on all pages, to ensure shortcuts appear with the correct styling in the following situations:
- Wenn Sie planen, Trust Payments CSS mit Änderungen zu verwenden.
- Wenn Sie vorhaben, CSS hochzuladen, das je nach gerenderter Seite ein anderes Styling anwendet.
For example: <body class=”{{st.bodyclass.value}}”>
Bilder
Include {{stresource.<filename>}} in your HTML to reference images uploaded to your account using the MyST File Manager.
z.B. {{stresource.companylogo.gif}}
Wir empfehlen, dass Sie nur auf Bilder verweisen, die in MyST Datei-Manager gespeichert sind, und nicht auf eine externe Quelle, da der Browser des Kunden sonst möglicherweise eine Warnung anzeigt, dass die Seite nicht sicher ist.
Beispiele
Im Folgenden finden Sie Beispiele für angepasste Seiten, die die ST-Blöcke verwenden. Sie können diese Vorlagen gerne verwenden, um Ihre eigenen Seiten zu erstellen, indem Sie die Block- und Feldreferenz als Leitfaden verwenden.
Be aware that there are some mandatory blocks for each page, as described in this reference. As part of these requirements, please ensure that the blocks specified in <head> are in the same order as shown in the examples below.
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Payment choice</h2>
{{st.block.standardpaymentchoicesdiv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Change payment type</h2>
{{st.block.smallpaymentchoicesdiv}}
<form name="paymentsdetails" id="paymentsdetails" method="post" action="details">
{{st.block.hiddendiv}}
<h2>Billing details</h2>
{{st.block.billingdetailsdiv}}
<h2>Delivery details</h2>
{{st.block.deliverydetailsdiv}}
<h2>Payment details</h2>
{{st.block.paymentdetailsdiv}}
{{st.block.requirednoticediv}}
</form>
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
{{st.block.hiddendiv}}
{{st.block.orderdetailsdiv}}
<h2>3-D Secure Process</h2>
{{st.block.3dredirectdiv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Transaction response</h2>
{{st.block.transactionresponsediv}}
<h2>Billing details</h2>
{{st.block.billingresponsediv}}
<h2>Delivery details</h2>
{{st.block.deliveryresponsediv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
{{st.block.lockeddiv}}
</div>
{{st.block.footer}}
</body>
</html>
Sobald Sie Ihr Markup geschrieben und die Dateien hochgeladen haben, können Sie Ihre Änderungen aktivieren. Klicken Sie hier, um fortzufahren.
