Elements Appearance API

Element は、サイトに合わせてデザインをカスタマイズできます

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

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

// 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> にコピーして、フォントファイルの名前 (小文字、英数字のみ) を使用します。モバイルの Payment Element では、カスタムフォントのフォントファミリーが使用されますが、サイズと太さは自動的に決定されます。

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

const { error } = await initPaymentSheet({
 ...
 appearance: {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },
});

色

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

注

ダークモードをサポートするには、light と dark の両方のカラーマップを colors (カラー) に渡します。

形状

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

特定の UI コンポーネント

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

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

注

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