Price breakdown

PriceBreakdownView shows how a price splits into Clearpay installments, followed by the Clearpay 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 number format can differ between devices.

Customize the text

Intro text

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

priceBreakdownView.introText = .payIn
// "pay in 4 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 showWithText to false to remove “with”. It defaults to true.

With the en_GB locale or British pounds (GBP), the view never shows “interest-free”, so showInterestFreeText has no effect.

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)

Info link

The info link at the end of the text opens a page with more information about Clearpay. 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
)