> 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

`AfterpayPriceBreakdown` shows how a price splits into four payments, followed by the logo and a link to more information. By default, the logo is the Clearpay badge.

Before you add the price breakdown, set the merchant configuration. The component uses it to format the amounts and to check your order limits. See [UI components](/guides/sdk/android-sdk/ui-components#configure-the-sdk-first).

## Add the price breakdown

Add the view in XML or Kotlin, then set `totalAmount` in code. The total is a `BigDecimal` and defaults to zero.

#### XML

```xml
<com.afterpay.android.view.AfterpayPriceBreakdown
  android:id="@+id/price_breakdown"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:afterpayStyle="alt" />
```

```kotlin
findViewById<AfterpayPriceBreakdown>(R.id.price_breakdown)
  .totalAmount = BigDecimal("100.00")
```

#### Kotlin

```kotlin
val breakdown = AfterpayPriceBreakdown(context).apply {
  style = AfterpayWidgetStyle.Alt
  totalAmount = BigDecimal("100.00")
}
container.addView(breakdown)
```

`app:afterpayStyle` is the only XML attribute. Set the other options in code.

The text uses your theme's `android:textColorPrimary`, and the text link uses `android:textColorSecondary`. The component sets a content description that reads out the full sentence.

## What the component shows

The content depends on the total and on the minimum and maximum order amounts in your configuration.

When the total is within your order limits, the component shows the installment amount:

When the total is below the minimum or above the maximum, the component shows the range of order amounts that you accept, with the logo first:

When you haven't set a configuration, the component hides itself.

The component refreshes when you change `totalAmount` or any other property, and when the configuration changes.

## Styles

Set `app:afterpayStyle` in XML or `style` in Kotlin to change the logo colors. The default is `Default`. The badge has its own background color. The monochrome badges have the same color as the background they're designed for, so only the wordmark stands out.

| Style                                 | XML value         | Use on                    | Appearance |
| ------------------------------------- | ----------------- | ------------------------- | ---------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   | Light or dark backgrounds |            |
| `AfterpayWidgetStyle.Alt`             | `alt`             | Light backgrounds         |            |
| `AfterpayWidgetStyle.MonochromeDark`  | `monochromeDark`  | Dark backgrounds          |            |
| `AfterpayWidgetStyle.MonochromeLight` | `monochromeLight` | Light backgrounds         |            |

On a dark background, also use a theme whose `android:textColorPrimary` is light, so the text stays legible.

## Logo type

`logoType` sets which logo appears in the sentence. It takes an `AfterpayLogoType`: `LOCKUP`, `BADGE`, or `COMPACT_BADGE`.

The default is `BADGE`. With `LOCKUP`, the SDK applies only the foreground color of the color scheme, so the logo has no background. Choose a style that contrasts with the background, as for the [logo lockup](/guides/sdk/android-sdk/ui-components/logo#lockup-styles).

## Intro text

`introText` sets the word or words before the installment amount. It takes an `AfterpayIntroText` and defaults to `OR`.

| Value          | Renders as    |
| -------------- | ------------- |
| `OR`           | or            |
| `OR_TITLE`     | Or            |
| `MAKE`         | make          |
| `MAKE_TITLE`   | Make          |
| `PAY`          | pay           |
| `PAY_TITLE`    | Pay           |
| `IN`           | in            |
| `IN_TITLE`     | In            |
| `PAY_IN`       | pay in        |
| `PAY_IN_TITLE` | Pay in        |
| `EMPTY`        | No intro text |

```kotlin
breakdown.introText = AfterpayIntroText.MAKE_TITLE
```

## Optional words

`showWithText` shows "with" before the logo. It's a `Boolean` and defaults to `true`.

```kotlin
breakdown.showWithText = false
```

With `Locale.UK` or British pounds (GBP), the SDK never shows "interest-free", so `showInterestFreeText` has no effect.

## More information link

Tapping the link at the end of the sentence opens a page with more information about Clearpay inside your app. Configure the link with `moreInfoOptions`, which takes an `AfterpayMoreInfoOptions`.

`AfterpayMoreInfoOptions` has two constructors:

* `AfterpayMoreInfoOptions(modalTheme, isCbtEnabled, modalLinkStyle)`: all parameters are optional.
  * `modalTheme`: an `AfterpayModalTheme`, either `MINT` (default) or `WHITE`.
  * `isCbtEnabled`: whether the page shows cross-border trade details. Defaults to `false`. Not every combination of locale and cross-border trade has a page.
  * `modalLinkStyle`: the link style. See [Link styles](#link-styles).
* `AfterpayMoreInfoOptions(modalId, modalLinkStyle)`:
  * `modalId`: the filename, without the `.html` extension, of a page hosted at `https://static.afterpay.com/modal/`.
  * `modalLinkStyle`: optional. The link style.

With the first constructor, the SDK picks the page for the configured locale and the customer's language.

```kotlin
breakdown.moreInfoOptions = AfterpayMoreInfoOptions(
  modalTheme = AfterpayModalTheme.WHITE,
)
```

### Link styles

`modalLinkStyle` takes an `AfterpayModalLinkStyle`. The default is `CircledInfoIcon`.

| Value                 | Link                             |
| --------------------- | -------------------------------- |
| `CircledInfoIcon`     | A circled "i" character          |
| `MoreInfoText`        | The underlined text "More Info"  |
| `LearnMoreText`       | The underlined text "Learn More" |
| `CircledQuestionIcon` | A circled question mark icon     |
| `CircledLogo`         | A small circled Clearpay logo    |
| `Custom`              | Content that you provide         |
| `None`                | No link                          |

```kotlin
breakdown.moreInfoOptions = AfterpayMoreInfoOptions(
  modalLinkStyle = AfterpayModalLinkStyle.LearnMoreText,
)
```

To use your own link content, call `AfterpayModalLinkStyle.Custom.setContent` with a `CharSequence` before you set the options:

```kotlin
val content = SpannableStringBuilder().apply {
  append("Tap ")
  append("here", StyleSpan(Typeface.BOLD), SPAN_EXCLUSIVE_EXCLUSIVE)
}
AfterpayModalLinkStyle.Custom.setContent(content)

breakdown.moreInfoOptions = AfterpayMoreInfoOptions(
  modalLinkStyle = AfterpayModalLinkStyle.Custom,
)
```

`Custom` is a single shared object, so its content applies to every price breakdown that uses it.

## Attributes and properties

| Property               | XML attribute       | Type                      | Default                            |
| ---------------------- | ------------------- | ------------------------- | ---------------------------------- |
| `totalAmount`          | None                | `BigDecimal`              | `0`                                |
| `style`                | `app:afterpayStyle` | `AfterpayWidgetStyle`     | `Default`                          |
| `logoType`             | None                | `AfterpayLogoType`        | `BADGE`                            |
| `introText`            | None                | `AfterpayIntroText`       | `OR`                               |
| `showInterestFreeText` | None                | `Boolean`                 | `true`                             |
| `showWithText`         | None                | `Boolean`                 | `true`                             |
| `moreInfoOptions`      | None                | `AfterpayMoreInfoOptions` | Mint theme, `CircledInfoIcon` link |