Price breakdown

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

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.

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 size

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

priceBreakdownView.logoType = .lockup

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
)