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
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</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
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;
}
`);
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
