Skip to navigation
SDKiOS SDK

iOS UI components

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

ComponentViewUse it to
Payment buttonPaymentButtonStart a Clearpay checkout.
LockupLockupViewShow the Clearpay logo, for example in a list of payment methods.
Price breakdownPriceBreakdownViewShow the installment amounts for a price on product and cart screens.
Checkout widgetWidgetViewShow 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 Clearpay 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. With the en_GB locale, the components show Clearpay branding. You can also use BadgeView and CompactBadgeView to show the Clearpay badge.

Color schemes

Set the colorScheme of a payment button, lockup, or badge, or the logoColorScheme of a price breakdown, to one of four palettes. The payment button and badges have a colored background, and the lockup has a transparent background, so the same palette can suit different backgrounds:

PalettePayment button and badgeLockup
.defaultBlack, with a mint wordmark. Use it on light backgrounds.Mint wordmark. Use it on dark backgrounds.
.altMint, with a black wordmark. Use it on light or dark backgrounds.Black wordmark. Use it on light backgrounds.
.darkMonoBlack, with a white wordmark. Use it on light backgrounds.White wordmark. Use it on dark backgrounds.
.lightMonoWhite, with a black wordmark and no border. Use it on dark backgrounds.Black wordmark, the same as .alt. Use it on light backgrounds.

.default is the default palette for every component.

Black Checkout with Clearpay button with a mint wordmark, default palette Mint Checkout with Clearpay button with a black wordmark, alt palette Black Checkout with Clearpay button with a white wordmark, darkMono palette White Checkout with Clearpay button with a black wordmark on a black background, 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: .alt,
  darkPalette: .default
)

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.