> This page is for Afterpay.

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

# Payment button

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

Before you add the button, set the merchant configuration. See [UI components](/cash-app-afterpay/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](/cash-app-afterpay/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` | US text       | Text in other regions |
| ---------------------------- | ------------------- | ------------- | --------------------- |
| `payNow`                     | `PAY`               | Pay with      | Pay Now               |
| `buyNow`                     | `BUY`               | Buy with      | Buy Now               |
| `checkout`                   | `CHECKOUT`          | Checkout with | Checkout with         |
| `placeOrder`                 | `CONTINUE`          | Continue with | Place order 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` |            |

Merchants in other regions see Afterpay or Clearpay buttons in the matching color scheme. See [Styles and color schemes](/cash-app-afterpay/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](/cash-app-afterpay/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`) |