スタイル
デフォルトでは、決済UIコンポーネントには独自のスタイルがありません。定義済みスタイルを使用してカスタマイズすることができます。機密データの入力フィールドを表示するために使用される保護されたコンポーネントは、iframe内に表示されます。セキュリティで保護されたコンポーネントをカスタマイズするには、以下の説明を参照してください。
定義済みのスタイル
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を押します。
