> ## 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

#### iOS Unified Checkout Customization

<Warning> \[!warning] **Beta in Progress** – The beta version is under active development and coming soon to our platform. </Warning>

<Info>You can customize the iOS 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 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.

```swift theme={"system"}
var configuration = PaymentSheet.Configuration()
configuration.appearance?.font?.base = UIFont(name: "Helvetica", size: UIFont.systemFontSize)!
configuration.allowsDelayedPaymentMethods = true
configuration.defaultBillingDetails = [
    "address": [
        "city": "San Francisco",
        "country": "US",
        "line1": "1467",
        "line2": "Harrison Street",
        "postalCode": "94122",
        "state": "California"
    ],
    "email": "johndoe@Pesaswap.io",
    "name": "John",
    "phone": "1234567890"
]
```

## 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 (e.g., 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 (e.g., 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                                |

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