> This page is for Afterpay.

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

# Price breakdown

`PriceBreakdownView` shows how a price splits into Afterpay installments, followed by the Afterpay logo 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, for example "Afterpay available for orders between \$1 – \$4,000". |

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

```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](/cash-app-afterpay/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 size

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

```swift
priceBreakdownView.logoType = .lockup
```

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