Estilos
Por defecto, los componentes de la interfaz de usuario de pago no tienen sus propios estilos. Puede utilizar los estilos predefinidos y personalizarlos. Los componentes seguros utilizados para mostrar campos de entrada de datos confidenciales se muestran en un iframe, por lo que no se les pueden aplicar estilos usando CSS. Para personalizar los componentes protegidos, consulte las siguientes instrucciones.
Estilos predefinidos
Para aplicar estilos incluidos en el SDK a los componentes:
- Agregue el archivo
@xsolla/pay-station-sdk/dist/style.cssque contiene los estilos a la compilación de su proyecto. - Agregue el enlace a los estilos al marcado HTML de la interfaz de pago.
Ejemplo:
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
Aplicar estilos a componentes protegidos
Los componentes protegidos se usan para introducir datos confidenciales del usuario. Por cuestiones de seguridad, se muestran en la página dentro de un iframe. Para aplicar estilos a estos componentes, emplee el método headlessCheckout.setSecureComponentStyles.
Ejemplo:
- 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;
}
`);
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
