> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

Customize your Android Unified checkout

<Info>You can customize the Android Unified Checkout to support your checkout context and brand guidelines by changing fonts, colors, shapes and layouts. </Info>

Create a `PaymentSheet.Configuration` object with an `appearance` object in order to be able to match the design of your app.

## Fonts

Set `typography.fontResId` to your custom font's resource ID to customize your font. Set a `typography.sizeScaleFactor` multiplier to increase or decrease the font size:

```kotlin theme={"system"}
val appearance = PaymentSheet.Appearance(
  typography = PaymentSheet.Typography(10.0f, R.font.MY_FONT)
)
```

## Colors

Modify the color categories in `PaymentSheet.Colors` to customize the colors on the mobile payment sheet as follows:

| Color Category     | Usage                                                                          |
| ------------------ | ------------------------------------------------------------------------------ |
| `appBarIcon`       | Color used for icons in the payment page ex: close (x) button                  |
| `component`        | Background color of inputs, tabs and other components                          |
| `componentBorder`  | Border color for inputs, tabs and other components                             |
| `componentDivider` | Color for divider lines used inside inputs, tabs and other components          |
| `error`            | Color for error messages to the user on the payment page                       |
| `onComponent`      | Color of text and other elements inside components                             |
| `onSurface`        | Color for items appearing on the surface of the payment page, Ex: text prompts |
| `placeholderText`  | Color for input fields placeholder text                                        |
| `primary`          | The primary color to be used across the payment page                           |
| `subtitle`         | Color of secondary text like prompts for input fields                          |
| `surface`          | Color of the payment page                                                      |

## Shapes

Modify the corner radius and border width used across the payment page using `appearance.shapes`.

| Shape Category        | Usage                                                                                       |
| --------------------- | ------------------------------------------------------------------------------------------- |
| `borderStrokeWidthDp` | Width of the border used across input fields, tabs and other components of the payment page |
| `cornerRadiusDp`      | Corner radius of the input fields, tabs and other components                                |

## Next Steps

Now you can test the payments on your app and go-live!