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

# Android UI components

The Afterpay Android SDK includes prebuilt views that follow the brand guidelines for each region. In the US, they render Cash App Afterpay branding.

| Component                                                                                  | Class                             | Use it to                                                                     |
| ------------------------------------------------------------------------------------------ | --------------------------------- | ----------------------------------------------------------------------------- |
| [Payment button](/cash-app-afterpay/guides/sdk/android-sdk/ui-components/payment-button)   | `AfterpayPaymentButton`           | Start checkout.                                                               |
| [Logo](/cash-app-afterpay/guides/sdk/android-sdk/ui-components/logo)                       | `AfterpayLockup`, `AfterpayBadge` | Show the brand logo, for example in a list of payment methods.                |
| [Price breakdown](/cash-app-afterpay/guides/sdk/android-sdk/ui-components/price-breakdown) | `AfterpayPriceBreakdown`          | Show the installment amount for a price, with a link to more information.     |
| [Checkout widget](/cash-app-afterpay/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](/cash-app-afterpay/guides/sdk/android-sdk#configure-the-sdk).

```kotlin
Afterpay.setConfiguration(
  minimumAmount = configuration.minimumAmount?.amount,
  maximumAmount = configuration.maximumAmount.amount,
  currencyCode = configuration.maximumAmount.currency,
  locale = Locale.US,
  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 Cash App Afterpay branding for a US merchant, and Afterpay or Clearpay branding for merchants in other regions.

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

For a US merchant, the styles map to the Cash App Afterpay color schemes:

| Style                                 | XML value         | Color scheme                     | Payment button | Logo lockup |
| ------------------------------------- | ----------------- | -------------------------------- | -------------- | ----------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   | `AfterpayCashAppDefault`         |                |             |
| `AfterpayWidgetStyle.Alt`             | `alt`             | `AfterpayCashAppAlt`             |                |             |
| `AfterpayWidgetStyle.MonochromeDark`  | `monochromeDark`  | `AfterpayCashAppMonochromeDark`  |                |             |
| `AfterpayWidgetStyle.MonochromeLight` | `monochromeLight` | `AfterpayCashAppMonochromeLight` |                |             |

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 and the logo in the price breakdown have no background. With the `Default` style, the Afterpay wordmark is white, so use `Default` on dark backgrounds. On light backgrounds, use `Alt` or `MonochromeLight`.

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.

### Other regions

For merchants outside the US, the same styles map to the Afterpay and Clearpay color schemes:

| Style             | Color scheme   |
| ----------------- | -------------- |
| `Default`         | Black on mint  |
| `Alt`             | Mint on black  |
| `MonochromeDark`  | White on black |
| `MonochromeLight` | Black on white |

## 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](/cash-app-afterpay/guides/sdk/android-sdk/ui-components/logo).
* `AfterpayPriceBreakdown` supports only the lockup logo for US merchants. See [Price breakdown](/cash-app-afterpay/guides/sdk/android-sdk/ui-components/price-breakdown).

## Docs

- [Payment Button](https://developers.cash.app/afterpay/guides/sdk/android-sdk/ui-components/payment-button.md)
- [Logo](https://developers.cash.app/afterpay/guides/sdk/android-sdk/ui-components/logo.md)
- [Price Breakdown](https://developers.cash.app/afterpay/guides/sdk/android-sdk/ui-components/price-breakdown.md)
- [Checkout Widget](https://developers.cash.app/afterpay/guides/sdk/android-sdk/ui-components/checkout-widget.md)