Стили
По умолчанию у компонентов платежного интерфейса нет собственных стилей. Вы можете использовать предустановленные стили и кастомизировать их. Защищенные компоненты, которые используются, чтобы отображать поля для ввода чувствительных данных, выводятся внутри iframe, поэтому к ним нельзя применить стили через CSS. Чтобы кастомизировать защищенные компоненты, изучите инструкцию ниже.
Предустановленные стили
Чтобы применить к компонентам стили, встроенные в SDK:
- Добавьте файл со стилями
@xsolla/pay-station-sdk/dist/style.cssв сборку вашего проекта. - Добавьте ссылку на стили в HTML-разметку платежного интерфейса.
Пример:
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
Применение стилей к защищенным компонентам
Защищенные компоненты служат для ввода чувствительных данных пользователей. В целях безопасности они выводятся на странице внутри iframe. Чтобы применить стили к этим компонентам, используйте метод headlessCheckout.setSecureComponentStyles.
Пример:
- 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;
}
`);
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
