> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# 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](/afterpay-online-developer/guides/sdk/ios-sdk/ui-components/payment-button)   | `PaymentButton`      | Start an Afterpay checkout.                                                       |
| [Lockup](/afterpay-online-developer/guides/sdk/ios-sdk/ui-components/lockup)                   | `LockupView`         | Show the Afterpay logo, for example in a list of payment methods.                 |
| [Price breakdown](/afterpay-online-developer/guides/sdk/ios-sdk/ui-components/price-breakdown) | `PriceBreakdownView` | Show the installment amounts for a price on product and cart screens.             |
| [Checkout widget](/afterpay-online-developer/guides/sdk/ios-sdk/ui-components/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](/afterpay-online-developer/guides/sdk/ios-sdk#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 Afterpay brand that merchants in Australia, New Zealand, and Canada display. UK merchants display the same components with Clearpay branding. Outside the US, you can also use `BadgeView` and `CompactBadgeView` to show the Afterpay badge.

US merchants display Cash App Afterpay branding instead. 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, 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:

| Palette      | Payment button and badge                                                | Lockup                                                           |
| ------------ | ----------------------------------------------------------------------- | ---------------------------------------------------------------- |
| `.default`   | Black, with a mint wordmark. Use it on light backgrounds.               | Mint wordmark. Use it on dark backgrounds.                       |
| `.alt`       | Mint, with a black wordmark. Use it on light or dark backgrounds.       | Black wordmark. Use it on light backgrounds.                     |
| `.darkMono`  | Black, with a white wordmark. Use it on light backgrounds.              | White wordmark. Use it on dark backgrounds.                      |
| `.lightMono` | White, 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.

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

```swift
// Always use the default palette.
paymentButton.colorScheme = .static(.default)

// Switch palettes with the system appearance.
lockupView.colorScheme = .dynamic(
  lightPalette: .alt,
  darkPalette: .default
)
```

> **Cash App Afterpay palettes in the US**
>
> The Cash App Afterpay palettes look different. In the US, `.default` is a black button with a green Cash App logo, and `.alt` is a Cash App green button. The lockup palettes are reversed: `.default` and `.darkMono` suit light backgrounds, and `.alt` and `.lightMono` suit dark backgrounds. If your app serves US and other regions, choose the lockup palette for the configured region.

## 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.