Styles
Par défaut, les composants de l’interface utilisateur pour les paiements ne possèdent pas de style propre. Vous pouvez utiliser les styles prédéfinis et les personnaliser. Les composants sécurisés, utilisés pour les champs de saisie de données sensibles, s’affichent dans un iframe, ce qui empêche l’application de styles via CSS. Pour personnaliser les composants sécurisés, reportez-vous aux instructions de ci-dessous.
Styles prédéfinis
Pour appliquer les styles inclus dans le SDK aux composants :
- Ajoutez le fichier
@xsolla/pay-station-sdk/dist/style.csscontenant les styles à votre projet. - Ajoutez le lien vers les styles au balisage HTML de l'interface de paiement.
Exemple :
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
Appliquer des styles aux composants sécurisés
Les composants sécurisés sont utilisés pour la saisie des données sensibles de l’utilisateur. Pour des raisons de sécurité, ils s’affichent sur la page à l’intérieur d’un iframe. Pour appliquer des styles à ces composants, utilisez la méthode headlessCheckout.setSecureComponentStyles.
Exemple :
- 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;
}
`);
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.
