Price breakdown

PriceBreakdownView shows how a price splits into Afterpay installments, followed by the Afterpay badge 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:

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:

The view formats amounts with the device’s locale, so the currency symbol can differ between devices. For example, an Australian dollar amount shows as “$25.00” on a device set to Australia and as “A$25.00” on a device set to another region.

Customize the text

Intro text

Set introText to change the first word. The default is .or.

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. The view always leaves out “interest-free” when the configuration locale is en_GB or the currency is British pounds (GBP).

priceBreakdownView.showInterestFreeText = false
// "or 4 payments of $25.00 with"

Fonts and colors

The view applies fontProvider, textColor, and linkColor the next time it updates its text, so set them before you set totalAmount.

Logo type

logoType sets which logo follows the text:

The lockup has a transparent background, and its .default palette is mint, so choose a logoColorScheme that contrasts with the background. On a light background, use .alt:

priceBreakdownView.logoType = .lockup
priceBreakdownView.logoColorScheme = .static(.alt)

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

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:

extension ProductViewController: PriceBreakdownViewDelegate {
  func viewControllerForPresentation() -> UIViewController {
    self
  }
}
priceBreakdownView.delegate = self

To change the link or the information page, set moreInfoOptions:

priceBreakdownView.moreInfoOptions = MoreInfoOptions(
  modalTheme: .white,
  modalLinkStyle: .learnMoreText
)