Pay Kit Android: UI Components

Buttons

The Pay Kit SDK provides an unmanaged custom styled Button. Cash App provides Jetpack Compose components as well as View-based buttons. The buttons are an optional dependency, and must be included separately.

You can change the size of the styled buttons within certain limits.

These limits are:

• at least 34dp tall
• at least 122dp wide
• at most 54dp tall

Styles

There are four basic static styles that do not change dynamically if your app switches between light and dark mode.

The examples below show the button styles and disabled variants.

Jetpack Compose

To add the Jetpack Compose version of the CAP button, use the following implementation:

implementation "app.cash.paykit:ui-compose:X.Y.Z"

Or via Gradle version catalogs (libs.toml):

group = "app.cash.paykit", name = "ui-compose"

To use the Cash App Pay themed button:

1
@Composable
2
fun CashAppPayButton(
3
  onClick: () -> Unit,
4
  modifier: Modifier = Modifier,
5
  style: CashAppPayButtonStyle = CashAppPayButtonStyle.Default,
6
  enabled: Boolean = true,
7
)

Available CashAppPayButtonStyle styles

• Default : Polychrome (green) Cash App logo on dark background
• Alt : Dark monochrome Cash App logo on green background
• MonochromeDark : Light Cash App logo on dark background
• MonochromeLight : Dark Cash App logo on light outlined background
• Monochrome : Theme-aware monochrome style that automatically picks MonochromeDark or MonochromeLight based on the app’s current UI mode configuration.

View-based

To add the Views version of the CAP button, use the following:

implementation "app.cash.paykit:ui-views:X.Y.Z"

Or via Gradle version catalogs (libs.toml):

group = "app.cash.paykit", name = "ui-views"

To use the Cash App Pay light background button:

1
<app.cash.paykit.ui.views.CashAppPayButton
2
    style="@style/CAPButtonStyle.Default"
3
    android:layout_height="48dp"
4
    android:layout_marginTop="4dp"
5
    android:layout_width="match_parent"
6
    android:layout_marginHorizontal="8dp"
7
    />

Available CashAppPayButtonStyle styles:

• Default : Polychrome (green) Cash logo on dark background
• Alt : Dark monochrome Cash logo on green background
• MonochromeDark : Light Cash logo on dark background
• MonochromeLight : Dark Cash logo on light outlined background