样式
默认情况下，支付UI组件没有自己的样式。您可以使用预定义样式并进行自定义。用于显示敏感数据输入字段的受保护组件在iframe内显示，因此无法通过CSS对它们应用样式。要自定义安全组件，请参考下方说明。
预定义样式
要将SDK中包含的样式应用到组件:
- 将包含样式的
@xsolla/pay-station-sdk/dist/style.css文件添加到您的项目编译版本中。 - 在支付UI的HTML标记中添加样式链接。
示例：
Copy
- html
<html>
<head>
...
<link rel="stylesheet" href="@xsolla/pay-station-sdk/dist/style.css" />
</head>
...
</html>
为受保护组件应用样式
受保护组件用于输入敏感的用户数据。出于安全考虑，它们以在iframe内部显示的方式显示在页面上。要为这些组件应用样式，请使用headlessCheckout.setSecureComponentStyles方法。
示例：
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;
}
`);
本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
