> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

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

# Android UI components

The Android SDK includes prebuilt views that follow Clearpay brand guidelines. With a UK configuration, they show Clearpay branding.

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

```kotlin
Afterpay.setConfiguration(
  minimumAmount = configuration.minimumAmount?.amount,
  maximumAmount = configuration.maximumAmount.amount,
  currencyCode = configuration.maximumAmount.currency,
  locale = Locale.UK,
  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. With `Locale.UK` (`en-GB`), the components show Clearpay branding.

## 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 UK merchants, the styles look like this:

| Style                                 | XML value         | Payment button | Logo lockup |
| ------------------------------------- | ----------------- | -------------- | ----------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   |                |             |
| `AfterpayWidgetStyle.Alt`             | `alt`             |                |             |
| `AfterpayWidgetStyle.MonochromeDark`  | `monochromeDark`  |                |             |
| `AfterpayWidgetStyle.MonochromeLight` | `monochromeLight` |                |             |

The default style is `Default`.

> **Info**
>
> The logo lockup has no background. With the `Default` style, the 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.

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

For UK merchants, the supported customer language is English. For example, the components hide themselves on a device set to French, unless you pass `consumerLocale = Locale.ENGLISH`.