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

Mobile Payment Element では、ビジュアルのカスタマイズが可能なため、アプリのデザインに合わせて調整できます。レイアウトは変更できませんが、initPaymentSheet() を呼び出すときに appearance パラメーターを含めて、カラーやフォントなどを変更できます。

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

// The following code creates the appearance shown in the screenshot above
const customAppearance = {
 font: {
   family:
     Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
 },
 shapes: {
   borderRadius: 12,
   borderWidth: 0.5,
 },
 primaryButton: {
   shapes: {
    borderRadius: 20,
   },
 },
 colors: {
   primary: '#fcfdff',
   background: '#ffffff',
   componentBackground: '#f3f8fa',
   componentBorder: '#f3f8fa',
   componentDivider: '#000000',
   primaryText: '#000000',
   secondaryText: '#000000',
   componentText: '#000000',
   placeholderText: '#73757b',
 },
};

const { error } = await initPaymentSheet({
 ...
 appearance: customAppearance,
});

フォント

FontConfig を font に渡し、family を設定して、フォントをカスタマイズします。iOS では、family の値には Font Book にある「PostScript 名」を指定する必要があります。Android では、.ttf ファイルまたは .otf ファイルを android/app/src/main/assets/font/<your-font> から android/app/src/main/res/font/<your-font> にコピーして、フォントファイルの名前 (小文字、英数字のみ) を使用します。Mobile Payment Element では、カスタムフォントのフォントファミリーが使用されますが、サイズと太さは自動的に決定されます。

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

...
const appearance: AppearanceParams = {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },

カラー

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

形状

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

特定の UI コンポーネント

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

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