デザインをカスタマイズする

Mobile Payment Element では、ビジュアルのカスタマイズが可能なため、アプリのデザインに合わせて調整できます。レイアウトは変更できませんが、PaymentSheet.Configuration オブジェクトで appearance (デザイン) プロパティを使用して、カラーやフォントなどを変更できます。

1. 最初にフォントをカスタマイズします。
2. アプリに合わせてカラーをカスタマイズします。
3. 角の半径などの形状をカスタマイズします。
4. 特定のコンポーネントを微調整します。

フォント

font.base を、任意のサイズと太さのカスタムフォントのバリアントに設定し、フォントをカスタマイズします。Mobile Payment Element では、カスタムフォントのフォントファミリーが使用されますが、サイズと太さは自動的に決定されます。

すべてのテキストのサイズを拡大縮小するには、font.sizeScaleFactor を設定します。フォントサイズは、この値で乗算されてから表示されます。これは、カスタムフォントがシステムフォントよりも若干大きいか小さい場合に役立ちます。

カラー

モバイルの Payment Element で、Appearance.Colors で定義されているカラーカテゴリーを変更することにより、色をカスタマイズします。各カラーカテゴリーは、UI の 1 つ以上のコンポーネントの色を決定します。たとえば、primary は、支払うボタンと、このカードを保存のチェックボックスといった選択された項目の色を定義します。下の図で、各カラーカテゴリーに関連付けられた UI エレメントをご覧いただけます。

形状

フォントと色の他、Mobile Payment Element 全体で使用されている角の半径、境界線の幅、シャドウもカスタマイズできます。

特定の UI コンポーネント

上記のセクションでは、複数の UI コンポーネントにわたり Mobile Payment Element に広く影響を与えるカスタマイズオプションについて説明しています。また、1 次ボタン (たとえば、支払うボタン) 専用のカスタマイズオプションも提供しています。カスタマイズオプションの詳細なリストについては、Appearance.PrimaryButton をご覧ください。

一部の UI コンポーネントのカスタマイズオプションは、他の値よりも優先されます。たとえば、appearance.primaryButton.cornerRadius は、appearance.cornerRadius の値を上書きします。