> 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

`AfterpayPriceBreakdown` shows how a price splits into four interest-free payments, followed by the logo and a link to more information. By default, the logo is the Afterpay badge, or the Clearpay badge for UK merchants. For US merchants, it shows the Cash App Afterpay lockup.

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](/afterpay-online-developer/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         |            |

For US merchants, the logo is the Cash App Afterpay lockup, which has no background. Use `Default` or `MonochromeDark` on dark backgrounds, and `Alt` or `MonochromeLight` on 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`.

Outside the US, the default is `BADGE`, and all three values are supported. 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](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/logo#lockup-styles).

For US merchants, the default is `LOCKUP`, and it's the only supported value.

> **Use the lockup for US merchants**
>
> With a US configuration, setting `logoType` to `BADGE` or `COMPACT_BADGE` throws an `IllegalStateException` in the sandbox environment. In production, the component hides itself instead.

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

Two `Boolean` properties control optional words in the sentence. Both default to `true`.

* `showInterestFreeText`: shows "interest-free" before the word payments. The SDK always leaves out this word for UK merchants and when the configured currency is British pounds (GBP).
* `showWithText`: shows "with" before the logo.

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

## More information link

Tapping the link at the end of the sentence opens a page with more information about Afterpay 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 Afterpay 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`, or `LOCKUP` in the US     |
| `introText`            | None                | `AfterpayIntroText`       | `OR`                               |
| `showInterestFreeText` | None                | `Boolean`                 | `true`                             |
| `showWithText`         | None                | `Boolean`                 | `true`                             |
| `moreInfoOptions`      | None                | `AfterpayMoreInfoOptions` | Mint theme, `CircledInfoIcon` link |