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

# Payment button

`AfterpayPaymentButton` is a branded button that customers tap to pay with Afterpay. It shows Afterpay branding, or Clearpay branding for UK merchants. For US merchants, it shows Cash App Afterpay branding.

Before you add the button, set the merchant configuration. See [UI components](/afterpay-online-developer/guides/sdk/android-sdk/ui-components#configure-the-sdk-first).

## Add the button

#### XML

```xml
<com.afterpay.android.view.AfterpayPaymentButton
  android:id="@+id/afterpay_button"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:afterpayButtonText="checkout"
  app:afterpayStyle="default_style" />
```

#### Kotlin

```kotlin
val button = AfterpayPaymentButton(context).apply {
  buttonText = AfterpayPaymentButton.ButtonText.CHECKOUT
  style = AfterpayWidgetStyle.Default
}
container.addView(button)
```

The button scales its artwork to fit the width you give it and keeps the aspect ratio. Set the width and use `wrap_content` for the height.

The button sets a content description for screen readers, so you don't need to add one. The description always reads "Pay now with Afterpay", whatever the button text. If you use `BUY`, `CHECKOUT`, or `CONTINUE`, set `contentDescription` to match.

## Start checkout when the customer taps the button

`AfterpayPaymentButton` extends `AppCompatImageButton`. It doesn't start checkout by itself, so set a click listener that starts your checkout:

```kotlin
findViewById<AfterpayPaymentButton>(R.id.afterpay_button)
  .setOnClickListener {
    // Start checkout, for example with Built-in UI (Checkout V2).
    checkoutLauncher.launch(Afterpay.createCheckoutV2Intent(this))
  }
```

For the checkout options, see [Present checkout](/afterpay-online-developer/guides/sdk/android-sdk/present-checkout).

## Button text

Choose the text that suits the purchase. The default is `payNow` in XML, or `ButtonText.PAY` in Kotlin.

| XML `app:afterpayButtonText` | Kotlin `ButtonText` | Text             | US text       |
| ---------------------------- | ------------------- | ---------------- | ------------- |
| `payNow`                     | `PAY`               | Pay now with     | Pay with      |
| `buyNow`                     | `BUY`               | Buy now with     | Buy with      |
| `checkout`                   | `CHECKOUT`          | Checkout with    | Checkout with |
| `placeOrder`                 | `CONTINUE`          | Place order with | Continue with |

In Kotlin, the full enum name is `AfterpayPaymentButton.ButtonText`.

## Styles

Set `app:afterpayStyle` in XML or `style` in Kotlin. The default is `Default`.

| Style                                 | XML value         | Appearance |
| ------------------------------------- | ----------------- | ---------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   |            |
| `AfterpayWidgetStyle.Alt`             | `alt`             |            |
| `AfterpayWidgetStyle.MonochromeDark`  | `monochromeDark`  |            |
| `AfterpayWidgetStyle.MonochromeLight` | `monochromeLight` |            |

UK merchants see Clearpay buttons in the same color schemes. US merchants see Cash App Afterpay buttons in different color schemes. See [Styles and color schemes](/afterpay-online-developer/guides/sdk/android-sdk/ui-components#styles-and-color-schemes).

## Visibility

The button hides itself when the SDK isn't enabled for the current configuration, for example when the customer's language isn't supported. It rechecks its visibility when the configuration changes. See [When components are hidden](/afterpay-online-developer/guides/sdk/android-sdk/ui-components#when-components-are-hidden).

## Attributes and properties

| XML attribute            | Kotlin property | Type                               | Default                     |
| ------------------------ | --------------- | ---------------------------------- | --------------------------- |
| `app:afterpayButtonText` | `buttonText`    | `AfterpayPaymentButton.ButtonText` | `payNow` (`PAY`)            |
| `app:afterpayStyle`      | `style`         | `AfterpayWidgetStyle`              | `default_style` (`Default`) |