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

Appearance API を使用してモバイルの実装をカスタマイズします。

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

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

var configuration = PaymentSheet.Configuration()
// The following code creates the appearance shown in the screenshot above
var appearance = PaymentSheet.Appearance()
appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)!
appearance.cornerRadius = 12
appearance.shadow = .disabled
appearance.borderWidth = 0.5
appearance.colors.background = .white
appearance.colors.primary = UIColor(red: 36/255, green: 36/255, blue: 47/255, alpha: 1)
appearance.colors.textSecondary = .black
appearance.colors.componentPlaceholderText = UIColor(red: 115/255, green: 117/255, blue: 123/255, alpha: 1)
appearance.colors.componentText = .black
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 195/255, green: 213/255, blue: 200/255, alpha: 1)
appearance.colors.componentBackground = UIColor(red: 243/255, green: 248/255, blue: 250/247, alpha: 1)
appearance.primaryButton.cornerRadius = 20
configuration.appearance = appearance
let paymentSheet = PaymentSheet(/* ... */, configuration: configuration)

フォント

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

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

var configuration = PaymentSheet.Configuration()
configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize)
configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x

カラー

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

注

ダークモードをサポートするには、init(dynamicProvider:) を使用してカスタムの UIColors を初期化します。

形状

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

特定の UI コンポーネント

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

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

注

より多くのカスタマイズオプションの提供が必要と思われる場合は、お知らせください。