> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.clearpay.co.uk/_mcp/server.

# Price breakdown

`PriceBreakdownView` shows how a price splits into Clearpay installments, followed by the Clearpay badge and an info link. Use it on product and cart screens.

## Add the price breakdown

Set the merchant configuration first, then set `totalAmount` to the price:

```swift
let priceBreakdownView = PriceBreakdownView()
priceBreakdownView.totalAmount = Decimal(string: "100.00") ?? .zero
view.addSubview(priceBreakdownView)
```

The view updates when you change `totalAmount` and when the configuration changes. It hides itself when `Afterpay.enabled` is `false`.

## What the view shows

The text depends on the amount and on the minimum and maximum amounts in your configuration:

| Situation                                 | Text                                                                                                                                     |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| The amount is within your limits          | The installment amount, for example "or 4 payments of £25.00 with Clearpay".                                                             |
| The amount is zero or outside your limits | The range of order amounts that Clearpay supports, with the logo first, for example "Clearpay available for orders between £1 – £1,200". |

The view formats amounts with the device's locale, so the number format can differ between devices.

## Customize the text

### Intro text

Set `introText` to change the first word. The default is `.or`.

```swift
priceBreakdownView.introText = .payIn
// "pay in 4 payments of £25.00 with"
```

The options are `.or`, `.pay`, `.make`, `.payIn`, `.in`, and `.empty`, which removes the intro text. Each option except `.empty` has a title-case version, such as `.orTitle`, that capitalizes the first word.

### Optional words

Set `showWithText` to `false` to remove "with". It defaults to `true`.

With the `en_GB` locale or British pounds (GBP), the view never shows "interest-free", so `showInterestFreeText` has no effect.

### Fonts and colors

| Property          | Default             | Description                                                                                          |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------- |
| `fontProvider`    | The body text style | A closure that returns the font for a trait collection. Return a font that scales with Dynamic Type. |
| `textColor`       | `.label`            | The color of the text.                                                                               |
| `linkColor`       | `.secondaryLabel`   | The color of the info link.                                                                          |
| `logoColorScheme` | `.static(.default)` | The palette for the logo. See [Color schemes](/guides/sdk/ios-sdk/ui-components#color-schemes).      |

The view applies `fontProvider`, `textColor`, and `linkColor` the next time it updates its text, so set them before you set `totalAmount`.

## Logo type

`logoType` sets which logo follows the text:

| Logo type       | Logo                                                           |
| --------------- | -------------------------------------------------------------- |
| `.badge`        | The Clearpay badge, larger than the text. This is the default. |
| `.lockup`       | The Clearpay wordmark, the same height as the text.            |
| `.compactBadge` | A compact badge, the same height as the text.                  |

The lockup has a transparent background, and its `.default` palette is mint, so choose a `logoColorScheme` that contrasts with the background. On a light background, use `.alt`:

```swift
priceBreakdownView.logoType = .lockup
priceBreakdownView.logoColorScheme = .static(.alt)
```

## Info link

The info link at the end of the text opens a page with more information about Clearpay. By default, the link opens in the browser. To open it in your app instead, set a `delegate` that returns the view controller to present from:

```swift
extension ProductViewController: PriceBreakdownViewDelegate {
  func viewControllerForPresentation() -> UIViewController {
    self
  }
}

priceBreakdownView.delegate = self
```

To change the link or the information page, set `moreInfoOptions`:

```swift
priceBreakdownView.moreInfoOptions = MoreInfoOptions(
  modalTheme: .white,
  modalLinkStyle: .learnMoreText
)
```

| Option           | Values                                                                                                                                                                       |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `modalLinkStyle` | `.circledInfoIcon` (default), `.moreInfoText`, `.learnMoreText`, `.circledQuestionIcon`, `.circledLogo`, `.custom(NSMutableAttributedString)`, or `.none` to remove the link |
| `modalTheme`     | `.mint` (default) or `.white`                                                                                                                                                |
| `isCbtEnabled`   | Whether the page shows cross-border trade details. Defaults to `false`. Not every locale supports it.                                                                        |
| `modalId`        | The filename of a specific information page hosted by Clearpay. Use the `MoreInfoOptions(modalId:modalLinkStyle:)` initializer.                                              |