Стили
По умолчанию у компонентов платежного интерфейса нет собственных стилей. Вы можете использовать предустановленные стили и кастомизировать их. Защищенные компоненты, которые используются, чтобы отображать поля для ввода чувствительных данных, выводятся внутри iframe, поэтому к ним нельзя применить стили через CSS. Чтобы кастомизировать защищенные компоненты, изучите инструкцию ниже.
Предустановленные стили
Чтобы применить к компонентам стили, встроенные в SDK:
- Добавьте файл со стилями
@xsolla/pay-station-sdk/dist/style.cssв сборку вашего проекта. - Добавьте ссылку на стили в HTML-разметку платежного интерфейса.
Пример:
- html
1<html>
2 <head>
3 ...
4 <link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
5 </head>
6 ...
7</html>
Применение стилей к защищенным компонентам
Защищенные компоненты служат для ввода чувствительных данных пользователей. В целях безопасности они выводятся на странице внутри iframe. Чтобы применить стили к этим компонентам, используйте метод headlessCheckout.setSecureComponentStyles.
Пример:
- typescript
1await headlessCheckout.setSecureComponentStyles(`
2 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
3
4 input {
5 padding: 12px;
6 border: 1px solid grey;
7 border-radius: 8px;
8 font-family: 'Roboto', sans-serif;
9 font-size: 14px;
10 outline: none;
11 }
12 `);
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
