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="<CDN_DOMAIN>"></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>
Ersetzen Sie <CDN_DOMAIN> mit einer unterstützten Domäne. Klicken Sie hier für eine vollständige Liste.
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 |
| 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. |
| color-input | Stellen Sie die Eingangsfarbe ein. |
| font-size-input | Legen Sie die Größe der Eingabeschrift fest. |
| line-height-input | Stellen Sie die Höhe der Eingabezeile ein. |
| 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: | |
| 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-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. |
| text-align-label |
Richten Sie den Beschriftungstext aus:
|
| text-transform-label |
Legen Sie das Gehäuse für den Etikettentext fest:
|
| Zur Gestaltung der Nachricht: | |
| 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. |
