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

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

# Android


[mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) は視覚的なカスタマイズをサポートしており、アプリのデザインに合わせてカスタマイズできます。レイアウトの一貫性は保たれますが、[appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378) オブジェクトと [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) オブジェクトを作成することで、色やフォントなどを変更できます。

1. 最初に[フォント](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)をカスタマイズします。
2. アプリに合わせて[カラー](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android)をカスタマイズします。
3. 角の半径などの[形状](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android)をカスタマイズします。
4. [特定のコンポーネント](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-android)を微調整します。
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example.acf584a69eb99f47fe0b5ffab24818b8.png)

```kotlin
// The following code creates the appearance shown in the screenshot above
val appearance = PaymentSheet.Appearance(
   colorsLight = PaymentSheet.Colors(
       primary = Color(red = 36, green = 36, blue = 47),
       surface = Color.White,
       component = Color(red = 243, green = 248, blue = 245),
       componentBorder = Color.Transparent,
       componentDivider = Color.Black,
       onComponent = Color.Black,
       subtitle = Color.Black,
       placeholderText = Color(red = 115, green = 117, blue = 123),
       onSurface = Color.Black,
       appBarIcon = Color.Black,
       error = Color.Red,
   ),
   shapes = PaymentSheet.Shapes(
       cornerRadiusDp = 12.0f,
       borderStrokeWidthDp = 0.5f
   ),
   typography = PaymentSheet.Typography.default.copy(
       fontResId = R.font.avenir_next
   ),
   primaryButton = PaymentSheet.PrimaryButton(
      shape = PaymentSheet.PrimaryButtonShape(
         cornerRadiusDp = 20f
      ),
   )
)

// ...

paymentSheet.presentWithPaymentIntent(
   clientSecret,
   PaymentSheet.Configuration(
       merchantDisplayName = merchantName,
       appearance = appearance
   )
)

```

## フォント

[typography.fontResId](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) をカスタムフォントのリソース ID に設定し、フォントをカスタマイズします。モバイルの Payment Element ではカスタムフォントのフォントファミリーが使用されますが、サイズと太さは自動的に決定されます。

テキストのサイズを拡大縮小するには、[typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378) を設定します。Stripe は、フォントサイズを表示する前に、この値をフォントサイズにかけます。この設定は、カスタムフォントがシステムフォントよりもわずかに大きいか小さい場合に便利です。

```kotlin
val appearance = PaymentSheet.Appearance(
    // …
    typography = PaymentSheet.Typography.default.copy(
        sizeScaleFactor = 1.15f, // Increase the size of all text by 1.15x
        fontResId = R.font.myFont,
    ),
)
val configuration = PaymentSheet.Configuration.Builder("Example, Inc.")
    // …
    .appearance(appearance)
    .build()
```

## カラー

モバイルの Payment Element で、[PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html) で定義されているカラーカテゴリーを変更して、色をカスタマイズします。各カラーカテゴリーは、UI の 1 つ以上のコンポーネントの色を決定します。たとえば、[primary](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) は、**支払う**ボタンと、**このカードを保存**のチェックボックスといった選択された項目の色を定義します。下の図で、各カラーカテゴリーに関連付けられた UI エレメントをご覧いただけます。

> ダークモードに対応するには、[appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) を設定します。[appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) を [appearance.colorsLight](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#2092498352%2FProperties%2F2002900378) と同じ値に設定することで、ダークモードを効果的に無効にすることができます
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-colors.413c76aaf01a54c25478cb8d7532c7e7.png)

## 形状

フォントとカラーをカスタマイズするだけでなく、[appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378) を設定することで、Mobile Payment Element 全体で使用される[コーナー半径](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378)と[枠線の幅](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378)もカスタマイズできます。
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png)

## 特定の UI コンポーネント

上記のセクションでは、複数の UI コンポーネントにわたりモバイル Payment Element に広く影響を与えるカスタマイズオプションについて説明しています。また、1 次ボタン (たとえば、**支払う**ボタン) 専用のカスタマイズオプションも提供しています。カスタマイズオプションの詳細なリストについては、[Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) をご覧ください。

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

> その他のカスタマイズオプションのアイデアがございましたら、[お知らせください](https://github.com/stripe/stripe-android/issues/new/choose)。