> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

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

# Price breakdown

`PriceBreakdownView` shows how a price splits into Afterpay installments, followed by the Afterpay 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 interest-free payments of \$25.00 with Afterpay".                                                |
| The amount is zero or outside your limits | The range of order amounts that Afterpay supports, with the logo first, for example "Afterpay available for orders between \$1 – \$2,000". |

The view formats amounts with the device's locale, so the currency symbol can differ between devices. For example, an Australian dollar amount shows as "\$25.00" on a device set to Australia and as "A\$25.00" on a device set to another region.

## Customize the text

### Intro text

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

```swift
priceBreakdownView.introText = .payIn
// "pay in 4 interest-free 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 `showInterestFreeText` to `false` to remove "interest-free", and set `showWithText` to `false` to remove "with". Both default to `true`. The view always leaves out "interest-free" when the configuration locale is `en_GB` or the currency is British pounds (GBP).

```swift
priceBreakdownView.showInterestFreeText = false
// "or 4 payments of $25.00 with"
```

### 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](/afterpay-online-developer/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 Afterpay badge, larger than the text. This is the default. |
| `.lockup`       | The Afterpay 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)
```

In the US, the price breakdown always shows the Cash App Afterpay lockup. There, `logoType` changes only the lockup's size: `.badge` shows a larger lockup, and `.lockup` and `.compactBadge` show a lockup that matches the text height.

## Info link

The info link at the end of the text opens a page with more information about Afterpay. 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 Afterpay. Use the `MoreInfoOptions(modalId:modalLinkStyle:)` initializer.                                              |