# Customise appearance

Customise your mobile integration with the Appearance API.

# Android


The [mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) supports visual customisation, which allows you to match the design of your app. The layout stays consistent, but you can modify colours, fonts, and more by creating your [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) object with an [appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378) object.

1. Start by customising the [font](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
2. Customise [colours](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) to match your app
3. Customise [shapes](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) like corner radius
4. Fine-tune [specific components](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 aboveval 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
   )
)

```

## Fonts

Customise the font by setting [typography.fontResId](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) to your custom font’s resource ID. The mobile Payment Element uses the font family of your custom font, but determines sizes and weights itself.

To increase or decrease the size of text, set [typography.sizeScaleFactor](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378). Stripe multiplies font sizes by this value before displaying them. This setting is useful if your custom font is slightly larger or smaller than the system font.

```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()
```

## Colours

Customise the colours in the mobile Payment Element by modifying the colour categories defined in [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html). Each colour category determines the colour of one or more components in the UI. For example, [primary](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) defines the colour of the **Pay** button and selected items like the **Save this card** tickbox. Refer to the diagram below to see some of the UI elements associated with each colour category.

> To support dark mode, set [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). You can effectively disable dark mode by setting [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) to the same value as [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)

## Shapes

In addition to customising fonts and colours, you can also customise the [corner radius](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) and [border width](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) used throughout the mobile Payment Element by setting [appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378).
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png)

## Specific UI components

The sections above describe customisation options that affect the mobile Payment Element broadly, across multiple UI components. We also provide customisation options specifically for the primary button (for example, the **Pay** button). Refer to [Appearance.PrimaryButton](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) for the full list of customisation options.

Customisation options for specific UI components take precedence over other values. For example, `appearance.primaryButton.shapes.cornerRadius` overrides the value of `appearance.shapes.cornerRadius`.

> If you have ideas for additional customisation options, [let us know](https://github.com/stripe/stripe-android/issues/new/choose).