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.

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.

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

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

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.

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.

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.

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

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

Link styles

modalLinkStyle takes an AfterpayModalLinkStyle. The default is CircledInfoIcon.

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

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

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