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

Appearance API を使用してアプリ内統合をカスタマイズします。

# iOS

> This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/elements/appearance-api/embedded-mobile?platform=ios.

Payment Element は視覚的なカスタマイズをサポートしているため、アプリのデザインに合わせてカスタマイズできます。レイアウトの一貫性は保たれますが、[EmbeddedPaymentElement.Configuration](https://github.com/stripe/stripe-ios/blob/c7c0cfa57411d39b8f26b205b35a0793e0998fe8/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentElementConfiguration.swift#L12) オブジェクトの [appearance](https://github.com/stripe/stripe-ios/blob/c7c0cfa57411d39b8f26b205b35a0793e0998fe8/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Embedded/EmbeddedPaymentElementConfiguration.swift#L83) プロパティを使用して、色やフォントなどを変更できます。

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

```swift
var configuration = EmbeddedPaymentElement.Configuration()
// The following code creates the appearance shown in the screenshot abovevar appearance = PaymentSheet.Appearance()
appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)!
appearance.cornerRadius = 8
appearance.shadow = .disabled
appearance.borderWidth = 0
appearance.selectedBorderWidth = 2
appearance.colors.background = UIColor(red: 23/255, green: 47/255, blue: 86/255, alpha: 1)
appearance.colors.primary = UIColor(red: 199/255, green: 217/255, blue: 255/255, alpha: 1)
appearance.colors.text = .white
appearance.colors.textSecondary = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .7)
appearance.colors.componentText = .white
appearance.colors.componentPlaceholderText = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .5)
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .1)
appearance.colors.componentBackground = UIColor(red: 44/255, green: 73/255, blue: 119/255, alpha: 1)
appearance.colors.icon = .white
configuration.appearance = appearance
let embeddedPaymentElement = try await EmbeddedPaymentElement.create(/* ... */, configuration: configuration)
```

## フォント

[font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) を、任意のサイズと太さのカスタムフォントのバリアントに設定し、フォントをカスタマイズします。Mobile Payment Element では、カスタムフォントのフォントファミリーが使用されますが、サイズと太さは自動的に決定されます。

すべてのテキストのサイズを拡大縮小するには、[font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp) を設定します。フォントサイズは、この値で乗算されてから表示されます。これは、カスタムフォントがシステムフォントよりも若干大きいか小さい場合に役立ちます。

```swift
var configuration = EmbeddedPaymentElement.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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV) で定義されているカラーカテゴリーを変更することにより、色をカスタマイズします。各カラーカテゴリーは、UI の 1 つ以上のコンポーネントの色を決定します。たとえば、[primary](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) は、**支払う**ボタンと、**このカードを保存**のチェックボックスといった選択された項目の色を定義します。下の図で、各カラーカテゴリーに関連付けられた UI エレメントをご覧いただけます。
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> ダークモードをサポートするには、[init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) を使用してカスタムの UIColors を初期化します。

## 図形

フォントと色の他、Mobile Payment Element 全体で使用されている[角の半径](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp)、[境界線の幅](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp)、[シャドウ](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp)もカスタマイズできます。
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes-embedded.aebcb93e928785cd8cd4b084b0889ce8.png)

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

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

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

> より多くのカスタマイズオプションの提供が必要と思われる場合は、[お知らせください](https://github.com/stripe/stripe-ios/issues/new/choose)。

## Payment Element

Payment Element には、ラジオボタン付きのフラット、チェックマーク付きのフラット、開示アイコン付きのフラット、フローティングボタンのスタイルがあります。各スタイルには、そのスタイルに対応する固有のオプションがあります。

### ラジオ付きフラット
![ラジオ付きフラットによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-radio.bd5528bd0c06c006ea3111116c2c1e0d.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithRadio
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.radio.selectedColor = .blue // Change color of radio button when selected to blue
appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = .darkGray // Change color of radio button when unselected to darkGray

configuration.appearance = appearance
```

### チェックマーク付きフラット
![チェックマーク付きフラットによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-checkmark.c3bab5964d4bd0ae582e2d0f571c1362.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithCheckmark
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.checkmark.color = .blue // Change color of the checkmark


configuration.appearance = appearance
```

### 開示付きフラット

FlatWithDisclosure スタイルを使用する場合、`immediateAction` の行選択動作を設定する必要があります。顧客が決済方法を選択した後、選択した決済方法の行が選択された状態になっていないため、顧客を新しい画面 (Checkout のメイン画面に戻るなど) に移動します。
![開示付きフラットスタイルの埋め込み決済エレメント](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-disclosure.8df97144e27a9a98f1eb15728b763db4.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()
// The flatWithDisclosure style requires the .immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
configuration.rowSelectionBehavior = .immediateAction(didSelectPaymentOption: myHandlingFunction)

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .flatWithDisclosure
appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator
appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator
appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray
appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width
appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2
appearance.embeddedPaymentElement.row.flat.disclosure.color = .black // Change color of the disclosure icon

configuration.appearance = appearance
```

### フローティングボタン
![フローティングボタンによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-floating-button.f1fd16943b46a21fd31836ba899bd93a.png)

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.style = .floatingButton
appearance.embeddedPaymentElement.row.floating.spacing = 20 // Increase spacing
appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height

configuration.appearance = appearance
```

### 一般的な行のカスタマイズ

すべての行スタイルに適用される行プロパティをカスタマイズできます。

```swift
var configuration = EmbeddedPaymentElement.Configuration()

var appearance = PaymentSheet.Appearance.default
appearance.embeddedPaymentElement.row.additionalInsets += 1 // Increase row height by 1 point
appearance.embeddedPaymentElement.row.paymentMethodIconLayoutMargins = .init(top: 0, leading: 10, bottom: 0, trailing: 10) // Custom margins for the payment method icon (for example, the Klarna logo)
appearance.embeddedPaymentElement.row.titleFont = UIFont.systemFont(ofSize: 16, weight: .medium) // Custom font for the row title (for example, "Klarna")
appearance.embeddedPaymentElement.row.subtitleFont = UIFont.systemFont(ofSize: 14, weight: .medium) // Custom font for the row subtitle (for example, "Buy now or pay later with Klarna")
```


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/embedded-mobile?platform=android.

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

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

```kotlin
// The following code creates the appearance shown in the screenshot aboveimport androidx.compose.ui.graphics.Color

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
        ),
    ),
    embeddedAppearance = PaymentSheet.Appearance.Embedded(
        style = PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
            spacingDp = 20f,
            additionalInsetsDp = 10f
        )
    )
)

// ...

embeddedPaymentElement.configure(
    intentConfiguration = intentConfiguration,
    configuration = EmbeddedPaymentElement.Configuration.Builder(merchantName).appearance(appearance)
        .build()
)

```

## フォント

[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 = EmbeddedPaymentElement.Configuration(merchantName).Builder()
    .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-embedded.d484b1076a44aa65cf334d6d452edd7c.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)。

## Payment Element

Payment Element には、ラジオボタン付きのフラット、チェックマーク付きのフラット、開示付きのフラット、フローティングボタンのスタイルがあります。各スタイルには独自のオプションがあります。

### ラジオボタン付きフラット

ラジオボタン付きフラットスタイルを使用するには、コード例に示すように `FlatWithRadio` プロパティを設定します。
![ラジオボタン付きフラットによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-radio.c458c8cea3eb4421b1f99a212961f464.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors(
    selectedColor = Color.Yellow.toArgb(), // Change color of radio button when selected to yellow
    unselectedColor = Color.DarkGray.toArgb(), // Change color of radio button when unselected to darkGray
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### チェックマーク付きフラット

チェックマーク付きフラットスタイルを使用するには、コード例に示すように、`FlatWithCheckmark` プロパティを設定します。
![チェックマーク付きフラットによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-checkmark.c6ed2d5af6660be462e7e39e3736eb87.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors(
    checkmarkColor = Color.Blue.toArgb(), // Change color of the checkmark
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .checkmarkInsetDp(2f) // Inset the checkmark
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### 開示付きフラット

開示付きフラットスタイルを使用するには、以下のコード例のように `FlatWithDisclosure` プロパティを設定します。

FlatWithDisclosure スタイルを使用する場合、`immediateAction` の行選択動作を設定する必要があります。顧客が決済方法を選択した後、選択した決済方法の行が選択された状態になっていないため、顧客を新しい画面 (Checkout のメイン画面に戻るなど) に移動します。
![開示付きフラットスタイルの埋め込み決済エレメント](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-flat-with-disclosure.b6753b90204debcaa6b5607375ae7fc1.png)

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

// EmbeddedPaymentElement initialization

val embeddedBuilder = EmbeddedPaymentElement.Builder(
  ...,
)
  // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  .rowSelectionBehavior(EmbeddedPaymentElement.RowSelectionBehavior.immediateAction { embeddedPaymentElement ->
    // Handle the customer tapping a payment method row here
  })

...

// Configuration

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors(
    disclosureColor = Color.Blue.toArgb(), // Change color of the disclosure
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
  .appearance(appearance)
  .build()
```

### フローティングボタン

フローティングボタンスタイルを使用するには、コード例に示すように `FloatingButton` プロパティを設定します。
![フローティングボタンによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/android-embedded-floating-button.4cbe384dc61d18c8c3d053c3216e6f43.png)

```kotlin
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton.Builder()
        .additionalInsetsDp(10f) // Increase row height
        .spacingDp(20f) // Increase spacing
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```

### 一般的な行のカスタマイズ

すべての行スタイルに適用される行プロパティをカスタマイズできます。

```kotlin
@OptIn(AppearanceAPIAdditionsPreview::class)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    // Custom margins for the payment method icon (for example, the Klarna logo)
    .paymentMethodIconMargins(
      PaymentSheet.Insets(
        horizontalDp = 10f,
        verticalDp = 5f
      )
    )
    // Custom font for the row title (for example, "Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 20f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    // Custom font for the row subtitle (for example, "Buy now or pay later with Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 14f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()
```


# React Native

> This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/elements/appearance-api/embedded-mobile?platform=react-native.

Payment Element は視覚的なカスタマイズをサポートしているため、アプリのデザインに合わせてカスタマイズできます。レイアウトの一貫性は保たれますが、[EmbeddedPaymentElementConfiguration](https://github.com/stripe/stripe-react-native/blob/fcb661364030a44639a58fc378ed514093226c5c/src/types/EmbeddedPaymentElement.tsx#L98) オブジェクトの [appearance](https://github.com/stripe/stripe-react-native/blob/fcb661364030a44639a58fc378ed514093226c5c/src/types/EmbeddedPaymentElement.tsx#L132) プロパティを使用して、色やフォントなどを変更できます。

1. [フォント](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#fonts-react-native)のカスタマイズ
1. アプリに合わせて[カラー](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#colors-react-native)をカスタマイズします。
1. コーナー半径などの[形状](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#shapes-react-native)のカスタマイズ
1. [特定のコンポーネント](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md#specific-ui-components-react-native)を微調整します。
1. Payment Element のデザインをカスタマイズする
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example-embedded.dfa435ab1fbb4da0c956d77426becb2f.png)

```js
// The following code creates the appearance shown in the screenshot aboveimport { Platform } from 'react-native';
import type { AppearanceParams, EmbeddedPaymentElementConfiguration } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  font: {
    family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
    scale: 1,
  },
  shapes: {
    borderRadius: 8,
    borderWidth: 0,
    shadow: {
      color: '#000000',
      opacity: 0,
      offset: { x: 0, y: 0 },
      blurRadius: 0,
    },
  },
  colors: {
    primary: '#C7D9FF',
    background: '#172F56',
    componentBackground: '#2C4977',
    componentBorder: '#00000000',
    componentDivider: '#1AFFFFFF',
    primaryText: '#FFFFFF',
    secondaryText: '#B3FFFFFF',
    componentText: '#FFFFFF',
    placeholderText: '#80FFFFFF',
    icon: '#FFFFFF',
  },
};

// Set the appearance property on your configuration
const config: EmbeddedPaymentElementConfiguration = {
  appearance: appearance,
};
```

## フォント

[FontConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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` を設定します。フォントサイズは、この値で乗算されてから表示されます。これは、カスタムフォントがシステムフォントよりも若干大きいか小さい場合に役立ちます。

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

## カラー

[GlobalColorConfig](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#GlobalColorConfig) で定義されているカラーカテゴリーを変更して、Mobile Payment Element のカラーをカスタマイズします。各カラーカテゴリーは、UI の 1 つ以上のコンポーネントの色を決定します。たとえば、`primary` は、**支払う**ボタンと、**このカードを保存する**チェックボックスなどの選択された項目の色を定義します。下の図で、各カラーカテゴリーに関連付けられた UI エレメントをいくつかご覧いただけます。

> ダークモードをサポートするには、`light` と `dark` の両方のカラーマップを [colors (カラー)](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams) に渡します。
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-colors.2e9b577269f6771c61c7a6e068eb8980.png)

## 図形

フォントと色のほか、モバイル Payment Element 全体で使用されている[境界半径](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams)、[境界線の幅](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams)、[シャドウ](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig)もカスタマイズできます。
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

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

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

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

> より多くのカスタマイズオプションの提供が必要と思われる場合は、[お知らせください](https://github.com/stripe/stripe-react-native/issues/new/choose)。

## Payment Element

Payment Element には、ラジオボタン付きのフラット、チェックマーク付きのフラット、開示アイコン付きのフラット、フローティングボタンのスタイルがあります。各スタイルには、そのスタイルに対応する固有のオプションがあります。

### ラジオ付きフラット
![ラジオ付きフラットによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-radio.bd5528bd0c06c006ea3111116c2c1e0d.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithRadio,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        radio: {
          selectedColor: 'blue', // Change color of radio button when selected to blue
          unselectedColor: 'darkgray', // Change color of radio button when unselected to darkGray
        },
      },
    },
  },
};
```

### チェックマーク付きフラット
![チェックマーク付きフラットによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-checkmark.c3bab5964d4bd0ae582e2d0f571c1362.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithCheckmark,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        checkmark: {
          color: 'blue', // Change color of the checkmark
        },
      },
    },
  },
};
```

### 開示アイコン付きフラット
![開示アイコン付きのフラットを使用してスタイル設定された組込み型決済 Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-flat-with-disclosure.8df97144e27a9a98f1eb15728b763db4.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FlatWithDisclosure,
      additionalInsets: 10, // Increase row height
      flat: {
        bottomSeparatorEnabled: false, // Hide the bottom separator
        topSeparatorEnabled: false, // Hide the top separator
        separatorColor: 'gray', // Change the separator color to gray
        separatorInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Make separators full width
        separatorThickness: 2.0, // Increase separator thickness to 2
        disclosure: {
          color: 'black', // Change color of the disclosure
        },
      },
    },
  },
};
const newElementConfig: EmbeddedPaymentElementConfiguration = {
  appearance: appearance,
    // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  rowSelectionBehavior: {
    type: 'immediateAction',
    onSelectPaymentOption: myHandlerFunction,
  },
};
```

### フローティングボタン
![フローティングボタンによってスタイル設定された Embedded Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/ios-embedded-floating-button.f1fd16943b46a21fd31836ba899bd93a.png)

```js
import { RowStyle } from '@stripe/stripe-react-native';

const appearance: AppearanceParams = {
  embeddedPaymentElement: {
    row: {
      style: RowStyle.FloatingButton,
      additionalInsets: 10, // Increase row height
      floating: {
        spacing: 20, // Increase spacing
      },
    },
  },
};
```