> 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

`AfterpayPriceBreakdown` shows how a price splits into four interest-free payments, followed by the logo and a link to more information. 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](/cash-app-afterpay/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:

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 logo has no background, so choose a style that contrasts with the color behind it.

| Style                                 | XML value         | Use on            | Appearance |
| ------------------------------------- | ----------------- | ----------------- | ---------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   | 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`.

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.

For merchants in other regions, the default is `BADGE`. With `LOCKUP`, the SDK applies only the foreground color of the color scheme.

## 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`        | `LOCKUP` in the US, `BADGE` elsewhere |
| `introText`            | None                | `AfterpayIntroText`       | `OR`                                  |
| `showInterestFreeText` | None                | `Boolean`                 | `true`                                |
| `showWithText`         | None                | `Boolean`                 | `true`                                |
| `moreInfoOptions`      | None                | `AfterpayMoreInfoOptions` | Mint theme, `CircledInfoIcon` link    |