Die iframe wird verwendet, um das Zahlungsformular auf Ihrer Kasse anzuzeigen.
Dieses Styling der iframe kann durch Einfügen von styles: {} in der Konfiguration, die an ST, wie im folgenden Beispiel gezeigt:
<html>
<head>
</head>
<body>
<div id="st-notification-frame"></div>
<form id="st-form" action="https://www.example.com" method="POST">
<div id="st-card-number" class="st-card-number"></div>
<div id="st-expiration-date" class="st-expiration-date"></div>
<div id="st-security-code" class="st-security-code"></div>
<button type="submit" id="st-form__submit" class="st-form__submit">
Pay securely
</button>
</form>
<script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
styles: {
'background-color-input': '#309D76',
'font-size-label': '18px',
'color-input': '#FFF'
}
});
st.Components();
})();
</script>
</body>
</html>
Das obige Beispiel kann verwendet werden, um ein Kassenformular ähnlich wie das folgende zu erstellen:
Klicken Sie auf das Bild zum Vergrößern
Die folgenden Eigenschaften können verwendet werden, um die iframe:
| Attribut | Beschreibung |
| Zur Gestaltung des Wrappers, der die Eingabe enthält: | |
| space-inset-wrapper | Jede Karteneingabe ist in einem Wrapper enthalten. Diese Eigenschaft legt die Polsterung für die Hülle fest. |
| So gestalten Sie den Körper der iframe: | |
| background-color-body | Legen Sie die Hintergrundfarbe von iframe fest. |
| color-body | Legen Sie die Farbe des iframe Körpers fest. |
| font-size-body | Legen Sie die Schriftgröße für den iframe body fest. |
| line-height-body | Legen Sie die Höhe der iframe Körperlinie fest. |
| space-inset-body | Legen Sie den Abstand für den Körpereinzug (Polsterung) fest. |
| space-outset-body | Legen Sie den Abstand zwischen den Zeilen fest (Rand). |
| So gestalten Sie die Eingabe: | |
| background-color-input | Legen Sie die Hintergrundfarbe der Eingabe fest. |
| border-color-input | Legen Sie die Farbe des Eingaberahmens fest. |
| border-radius-input | Legen Sie den Radius des Eingaberahmens fest. |
| border-size-input | Legen Sie die Größe des Eingaberahmens fest. |
| box-shadow-input | Setzt einen Box-Shadow auf jede Karteneingabe, die von der Bibliothek gerendert wird. Diese Eigenschaft verhält sich genauso wie der CSS-Box-Shadow. |
| color-input | Stellen Sie die Eingangsfarbe ein. |
| farbeingabe-platzhalter | Legt die Farbe des Eingabeplatzhalters für jedes von der Bibliothek gerenderte Karteneingabeetikett fest. Die Eigenschaft kann Farbnamen und hexadezimale Werte akzeptieren. |
| font-family-input | Legt die Schriftfamilie für jede Karteneingabe fest, die von der Bibliothek wiedergegeben wird. Dies gilt für den Platzhaltertext der Eingabe und den eingegebenen Text. |
| font-family-input-error | Legt die Schriftfamilie für jede Karteneingabe fest, die von der Bibliothek wiedergegeben wird wenn ein Fehler auftritt. Dies gilt für den Platzhaltertext der Eingabe und den eingegebenen Text. |
| font-size-input | Legen Sie die Größe der Eingabeschrift fest. |
| line-height-input | Stellen Sie die Höhe der Eingabezeile ein. |
| Outline-Eingabe |
Legen Sie den Umriss außerhalb des Rahmens der Karteneingabe fest. z.B. "5px gepunktet grün" |
| space-inset-input | Legen Sie den Abstand zwischen den Einschüben (Padding) fest. |
| space-outset-input | Legen Sie den Abstand zwischen den Eingängen fest (Rand). |
| Zur Gestaltung der Eingabe, wenn ein Fehler aufgetreten ist: | |
| background-color-input-error | Legen Sie die Farbe des Eingabehintergrunds fest, wenn ein Fehler auftritt. |
| border-color-input-error | Legen Sie die Farbe des Eingaberahmens fest, wenn ein Fehler auftritt. |
| border-radius-input-error | Legen Sie den Radius des Eingaberahmens für den Fall fest, dass ein Fehler auftritt. |
| border-size-input-error | Legen Sie die Größe des Eingaberahmens fest, wenn ein Fehler auftritt. |
| color-input-error | Legen Sie die Eingangsfarbe für das Auftreten eines Fehlers fest. |
| font-size-input-error | Legen Sie die Größe der Eingabeschrift fest, wenn ein Fehler auftritt. |
| line-height-input-error | Legen Sie die Höhe der Eingabezeile fest, wenn ein Fehler auftritt. |
| space-inset-input-error | Legen Sie den Abstand zwischen den Eingaben fest, wenn ein Fehler auftritt. |
| space-outset-input-error | Legen Sie den Abstand zwischen den Eingängen (Rand) fest, wenn ein Fehler auftritt. |
| So gestalten Sie das Etikett: | |
| Hintergrundfarbe-Etikett |
Legt die Hintergrundfarbe für jedes von der Bibliothek gerenderte Karteneingabeetikett fest. Die Eigenschaft kann Farbnamen und hexadezimale Werte akzeptieren. |
| color-asterisk | Legt die Farbe des Sternchens neben jeder Karteneingabebeschriftung fest, die von der Bibliothek gerendert wird. Die Eigenschaft kann Farbnamen und hexadezimale Werte akzeptieren. |
| color-label | Legen Sie die Farbe des Etiketts fest. |
| display-asterisk |
Legt die Sichtbarkeit des Sternchens neben jeder Karteneingabebeschriftung fest, die von der Bibliothek gerendert wird. Die Eigenschaft akzeptiert einen booleschen Wert und ist standardmäßig auf true eingestellt. Bei der Einstellung true werden die Sternchen angezeigt. Bei der Einstellung false werden die Sternchen nicht angezeigt. |
| display-label |
Hier können Sie festlegen, wie ein Etikett auf dem Bildschirm angezeigt wird. |
| font-family-label |
Legt die Schriftfamilie für jedes von der Bibliothek gerenderte Karteneingabeetikett fest. |
| font-size-label |
Legen Sie die Schriftgröße des Etiketts fest. |
| font-weight-label |
Legt die Schriftstärke für jedes von der Bibliothek gerenderte Karteneingabeetikett fest. Die Eigenschaft kann die folgenden Werte annehmen:
Wenn kein Wert angegeben wird, setzt die Bibliothek den Standardwert für das Gewicht. |
| line-height-label | Legen Sie die Höhe der Etikettenlinie fest. |
| max-width-label | Legt eine maximale Breite für das Beschriftungselement fest. |
| position-unten-etikett | Diese Eigenschaft verhält sich genauso wie die CSS-Eigenschaft "bottom", wenn die Position des Elements relativ ist. Wenn Sie diese Eigenschaft festlegen, wird der untere Rand des Karteneingabefelds über/unter seine normale Position verschoben. |
| position-links-label | Diese Eigenschaft verhält sich genauso wie die CSS-Eigenschaft "left", wenn die Position des Elements relativ ist. Wenn Sie diese Eigenschaft festlegen, wird die untere Kante der Karteneingabebeschriftung nach links/rechts von ihrer normalen Position verschoben. |
| position-rechts-etikett |
Diese Eigenschaft verhält sich genauso wie die CSS-Eigenschaft "right", wenn die Elementposition relativ ist. Wenn Sie diese Eigenschaft festlegen, wird die untere Kante der Karteneingabebeschriftung nach links/rechts von ihrer normalen Position verschoben. |
| position-top-label | Diese Eigenschaft verhält sich genauso wie die CSS-Eigenschaft "top", wenn die Position des Elements relativ ist. Wenn Sie diese Eigenschaft festlegen, wird der untere Rand des Karteneingabefelds über/unter seine normale Position verschoben. |
| text-align-label |
Richten Sie den Beschriftungstext aus:
|
| text-transform-label |
Legen Sie das Gehäuse für den Etikettentext fest:
|
| Breite-Etikett |
Festlegen einer bestimmten Breite für das Beschriftungselement |
| So gestalten Sie die Validierungsmeldung: | |
| hintergrundfarbe-nachricht | Legt die Hintergrundfarbe für Validierungsmeldungen fest, die von der Bibliothek wiedergegeben werden. Die Eigenschaft kann Farbnamen und hexadezimale Werte akzeptieren. |
| font-family-message | Legen Sie die Schriftfamilie für die von der Bibliothek wiedergegebenen Eingabevalidierungsmeldungen fest. |
| font-size-message | Stellen Sie die Schriftgröße der Nachricht ein. |
| line-height-message | Legen Sie die Höhe der Nachrichtenzeile fest. |
| Zum Gestalten der Nachricht, wenn ein Fehler aufgetreten ist: | |
| color-error | Legen Sie die Farbe der Meldung fest, die bei Auftreten eines Fehlers erscheinen soll. |
| So positionieren Sie die Eingabebeschriftung links von der Eingabe: | |
| isLinedUp | Setzen Sie diesen Wert auf true, um das Etikett links von der Kartennummerneingabe zu positionieren. |
