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

# Android UI components

The Afterpay Android SDK includes prebuilt views that follow the brand guidelines for each region. This guide shows the Afterpay branding that merchants in Australia, New Zealand, and Canada display.

| Component                                                                                          | Class                             | Use it to                                                                     |
| -------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------- |
| [Payment button](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/payment-button)   | `AfterpayPaymentButton`           | Start checkout.                                                               |
| [Logo](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/logo)                       | `AfterpayLockup`, `AfterpayBadge` | Show the brand logo, for example in a list of payment methods.                |
| [Price breakdown](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/price-breakdown) | `AfterpayPriceBreakdown`          | Show the installment amount for a price, with a link to more information.     |
| [Checkout widget](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/checkout-widget) | `AfterpayWidgetView`              | Show the payment schedule for an order, and update it when the total changes. |

All components are in the `com.afterpay.android.view` package. You can add any of them in an XML layout or create them in Kotlin. You must initialize the checkout widget in code.

## Configure the SDK first

The components read your merchant configuration to choose the brand, language, currency format, and order limits. Call `Afterpay.setConfiguration` before you inflate or create any component. For details, see [Configure the SDK](/afterpay-online-developer/guides/sdk/android-sdk#configure-the-sdk).

```kotlin
Afterpay.setConfiguration(
  minimumAmount = configuration.minimumAmount?.amount,
  maximumAmount = configuration.maximumAmount.amount,
  currencyCode = configuration.maximumAmount.currency,
  locale = Locale("en", "AU"),
  environment = AfterpayEnvironment.SANDBOX,
)
```

> **Set the configuration before you create views**
>
> Each component resolves its color scheme for the configured locale when you create it or set its style. When the configuration changes, the payment button rechecks its visibility and the price breakdown refreshes its text, but neither changes its color scheme. The logo views and the checkout widget don't update. To avoid views that show the wrong brand or stay hidden, set the configuration first.

## How the SDK chooses the brand

The SDK picks the brand from the `locale` you pass to `Afterpay.setConfiguration`. This is your merchant region, not the device locale.

| Configured locale                  | Brand             |
| ---------------------------------- | ----------------- |
| `en-US`                            | Cash App Afterpay |
| `en-AU`, `en-NZ`, `en-CA`, `fr-CA` | Afterpay          |
| `en-GB`                            | Clearpay          |

You don't select the brand directly. The same layout renders Afterpay branding for merchants in Australia, New Zealand, and Canada, Clearpay branding for UK merchants, and Cash App Afterpay branding for US merchants.

## Styles and color schemes

The payment button, logo views, and price breakdown each have a `style` property of type `AfterpayWidgetStyle`, and an equivalent `app:afterpayStyle` XML attribute. The checkout widget doesn't have a style. The style is semantic: the SDK maps it to the color scheme for the configured locale.

Outside the US, the styles map to the Afterpay and Clearpay color schemes:

| Style                                 | XML value         | Color scheme           | Payment button | Logo lockup |
| ------------------------------------- | ----------------- | ---------------------- | -------------- | ----------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   | `AfterpayBlackOnMint`  |                |             |
| `AfterpayWidgetStyle.Alt`             | `alt`             | `AfterpayMintOnBlack`  |                |             |
| `AfterpayWidgetStyle.MonochromeDark`  | `monochromeDark`  | `AfterpayWhiteOnBlack` |                |             |
| `AfterpayWidgetStyle.MonochromeLight` | `monochromeLight` | `AfterpayBlackOnWhite` |                |             |

The default style is `Default`. The color schemes are internal to the SDK, so you select them only through `style` or `app:afterpayStyle`.

> **Info**
>
> The logo lockup has no background. With the `Default` style, the Afterpay wordmark is black, so use `Default` or `MonochromeLight`, which looks the same, on light backgrounds. On dark backgrounds, use `Alt` or `MonochromeDark`.

Set the style in XML:

```xml
<com.afterpay.android.view.AfterpayPaymentButton
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:afterpayStyle="alt" />
```

Or in Kotlin:

```kotlin
paymentButton.style = AfterpayWidgetStyle.Alt
```

Declare the `app` namespace, `xmlns:app="http://schemas.android.com/apk/res-auto"`, on the root element of your layout.

### US merchants

For US merchants, the same styles map to the Cash App Afterpay color schemes:

| Style             | Color scheme                     | Payment button                              | Logo lockup                                                     |
| ----------------- | -------------------------------- | ------------------------------------------- | --------------------------------------------------------------- |
| `Default`         | `AfterpayCashAppDefault`         | Black, with a green Cash App icon           | Green Cash App icon and a white wordmark, for dark backgrounds  |
| `Alt`             | `AfterpayCashAppAlt`             | Cash App green, with black text             | Green Cash App icon and a black wordmark, for light backgrounds |
| `MonochromeDark`  | `AfterpayCashAppMonochromeDark`  | Black, with white text                      | White, for dark backgrounds                                     |
| `MonochromeLight` | `AfterpayCashAppMonochromeLight` | White with a black outline, with black text | Black, for light backgrounds                                    |

The lockup guidance is reversed in the US: `Default` suits dark backgrounds and `Alt` suits light backgrounds. If your app serves US and other regions, choose the lockup style for the configured region.

## When components are hidden

A component hides itself, by setting its visibility to `View.GONE`, when the SDK isn't enabled for the current configuration. The SDK tracks this internally as `Afterpay.enabled`, which isn't part of the public API. The SDK is enabled only when both of these are true:

* You set a configuration with `Afterpay.setConfiguration` or `Afterpay.setConfigurationV3`.
* The customer's language is supported in your merchant region.

The SDK takes the customer's language from the `consumerLocale` you pass to `setConfiguration`. If you don't pass one, it uses the device's default locale.

| Merchant region            | Supported customer languages |
| -------------------------- | ---------------------------- |
| US                         | English                      |
| Canada                     | English, French              |
| Australia, New Zealand, UK | English                      |

For example, a US merchant's components hide themselves on a device set to Spanish, unless you pass `consumerLocale = Locale.ENGLISH`.

Some components also have rules of their own:

* `AfterpayBadge` is always hidden for US merchants, because Cash App Afterpay branding uses the lockup instead. See [Logo](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/logo).
* `AfterpayPriceBreakdown` supports only the lockup logo for US merchants. See [Price breakdown](/afterpay-online-developer/guides/sdk/android-sdk/ui-components/price-breakdown).