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