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. |
| font-size-label | Legen Sie die Schriftgröße des Etiketts fest. |
| display-label | Hier können Sie festlegen, wie ein Etikett auf dem Bildschirm angezeigt wird. |
| line-height-label | Legen Sie die Höhe der Etikettenlinie fest. |
| text-align-label |
Richten Sie den Beschriftungstext aus:
|
| text-transform-label |
Setzen Sie das Etikett Testgehäuse:
|
| 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. |
