Estilos
Por padrão, a interface de pagamento não possui seus próprios estilos. Você pode usar os estilos pré-definidos e personalizá-los. Os componentes protegidos usados para exibir os campos de entrada dos dados sensíveis são exibidos dentro de um iframe, e é por isso que não é possível aplicar estilos usando linguagem CSS a eles. Para personalizar os componentes seguros, consulte as instruções abaixo.
Estilos pré-definidos
Para aplicar estilos inclusos no SDK aos componentes:
- Adicione o arquivo
@xsolla/pay-station-sdk/dist/style.csscontendo os estilos à compilação do seu projeto. - Adicione o link aos estilos à marcação HTML da interface de pagamento.
Exemplo:
- html
1<html>
2 <head>
3 ...
4 <link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
5 </head>
6 ...
7</html>
Aplicando estilos a componentes seguros
Os componentes seguros são usados para inserir dados sensíveis do usuário. Por motivos de segurança, eles são exibidos na página dentro de um iframe. Para aplicar estilos a esses componentes, use o método headlessCheckout.setSecureComponentStyles.
Exemplo:
- 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 `);
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
