Styles
By default, payment UI components don’t have their own styles. You can use the predefined styles and customize them. The secured components used to display sensitive data input fields are displayed inside an iframe, that is why you can’t apply styles using CSS to them. To customize the secured components, refer to the instructions below.
Predefined styles
To apply styles included in the SDK to the components:
- Add the
@xsolla/pay-station-sdk/dist/style.cssfile containing the styles to your project build. - Add the link to styles to the HTML markup of the payment UI.
Example:
Copy
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
Applying styles to secured components
The secured components are used to enter sensitive user data. For security purposes, they are displayed on the page inside an iframe. To apply styles to these components, use the headlessCheckout.setSecureComponentStyles method.
Example:
Copy
- 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;
}
`);
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Found a typo or other text error? Select the text and press Ctrl+Enter.
