iOS UI components

The Afterpay iOS SDK includes prebuilt UIKit views that follow Afterpay brand guidelines. Use them to show Afterpay on product, cart, and checkout screens.

Component	View	Use it to
Payment button	`PaymentButton`	Start an Afterpay checkout.
Lockup	`LockupView`	Show the Afterpay logo, for example in a list of payment methods.
Price breakdown	`PriceBreakdownView`	Show the installment amounts for a price on product and cart screens.
Checkout widget	`WidgetView`	Show the customer’s payment schedule, and update it when the order total changes.

Set the configuration first

The components read the merchant configuration that you set with Afterpay.setConfiguration(_:). Set it before you display any component. For details, see Configure the SDK.

LockupView, PriceBreakdownView, and WidgetView hide themselves when Afterpay.enabled is false, for example when the customer’s language isn’t supported in the configured region. PaymentButton doesn’t hide itself; it only blanks its artwork, so set paymentButton.isHidden = !Afterpay.enabled. Check Afterpay.enabled before you show your own Afterpay content, such as a heading or a payment method row, so that you don’t leave empty space.

Branding

The SDK chooses the brand from the configuration locale:

Locale	Brand
`en_US`	Cash App Afterpay
`en_AU`, `en_CA`, `fr_CA`, `en_NZ`	Afterpay
`en_GB`	Clearpay

This guide shows the Cash App Afterpay brand that US merchants display. In the US, the SDK displays the Cash App Afterpay lockup in place of the badge. BadgeView and CompactBadgeView aren’t supported for the Cash App Afterpay brand and stay hidden.

Color schemes

Set the colorScheme of a payment button or lockup, or the logoColorScheme of a price breakdown, to one of four palettes:

Palette	Payment button	Lockup	Use it on
`.default`	Black button, green Cash App logo	Green logo, black text	Light backgrounds. This is the default.
`.alt`	Cash App green button, black logo	Green logo, white text	Dark backgrounds
`.darkMono`	Black button, white logo	Black logo and text	Light backgrounds
`.lightMono`	White button, black logo	White logo and text	Dark backgrounds

Checkout with Afterpay button, default palette

Checkout with Afterpay button, alt palette

Checkout with Afterpay button, darkMono palette

Checkout with Afterpay button, lightMono palette

Use a static palette, or let the component switch palettes with light and dark mode:

// Always use the default palette.
paymentButton.colorScheme = .static(.default)
// Switch palettes with the system appearance.
lockupView.colorScheme = .dynamic(
  lightPalette: .default,
  darkPalette: .alt
)

Accessibility

The components set accessibility labels with the brand name. The price breakdown updates its text size and colors when the trait collection changes, so it supports Dynamic Type and dark mode.