Stile
Standardmäßig haben die Komponenten des Zahlungsportals keine eigenen Stile. Sie können jedoch die vordefinierten Stile verwenden und diese anpassen. Die sichernden Komponenten dienen der Anzeige von Feldern, in den sensible Daten einzugeben sind. Sie werden in einem iframe dargestellt, weshalb es nicht möglich ist, Stile mithilfe von CSS auf die Komponenten anzuwenden. Wie Sie die sichernden Komponenten anpassen, erfahren Sie in der Anleitung weiter unten.
Vordefinierte Stile
So wenden Sie im SDK enthaltene Stile auf die Komponenten an:
- Fügen Sie die Datei
@xsolla/pay-station-sdk/dist/style.cssmit den Stilen Ihrem Projekt hinzu. - Fügen Sie dem HTML-Markup des Zahlungsportals den Link zu den Stilen hinzu.
Beispiel:
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
Stile auf sichernde Komponenten anwenden
Die sichernden Komponenten kommen bei der Eingabe sensibler Nutzerdaten zum Einsatz. Aus Sicherheitsgründen werden sie auf der Seite in einem iframe angezeigt. Verwenden Sie die Methode headlessCheckout.setSecureComponentStyles, um Stile auf diese Komponenten anzuwenden.
Beispiel:
- typescript
await headlessCheckout.setSecureComponentStyles(`
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
input {
padding: 12px;
border: 1px solid grey;
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
outline: none;
}
`);
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
