CCC-129: Add Compose support for Cash App Pay Button#164
Conversation
Move existing View-based components into their own module. Create a Compose-based implementation of our Cash App Pay Button.
| implementation(platform(libs.compose.bom)) | ||
| implementation(libs.compose.foundation) | ||
| implementation(libs.compose.material) | ||
| implementation(libs.compose.ui) |
There was a problem hiding this comment.
This should be an api dep since Modifier is exposed in public API
There was a problem hiding this comment.
Compose runtime should also be an api dep since we expose a Composer (automatically added by the compiler plugin to @Composable functions) in public API
There was a problem hiding this comment.
Looks like you updated the Compose UI dep, but missed adding the Compose runtime dep
There was a problem hiding this comment.
Pull request overview
This PR moves the Cash App Pay button from the core SDK into separate optional modules to reduce the SDK's footprint and provide Compose support. The button is now available as either a View-based implementation (ui-views) or a Jetpack Compose implementation (ui-compose).
Changes:
- Extracted the View-based
CashAppPayButtonfrom the core module into a newui-viewsmodule with updated package name fromapp.cash.paykit.core.uitoapp.cash.paykit.ui.views - Created a new
ui-composemodule providing a Compose equivalent with the same style variants (Default, Alt, MonochromeDark, MonochromeLight) - Updated build configuration to support Compose, including adding Compose BOM, Slack's compose-lints, and ktlint configuration for Composable functions
Reviewed changes
Copilot reviewed 24 out of 33 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| settings.gradle.kts | Added ui-views and ui-compose modules to the project |
| gradle/libs.versions.toml | Added Compose dependencies (BOM, compose-lints) and updated junitAndroidx version; moved version pinning comment to apply to all plugin versions |
| build.gradle.kts | Added imports and ktlint configuration to ignore function naming for Composable annotations |
| logging/build.gradle.kts | Removed redundant kotlin jvmToolchain block |
| core/build.gradle.kts | Removed comment about dependency version pinning (now in libs.versions.toml) |
| core/api/core.api | Removed CashAppPayButton from public API |
| ui-views/build.gradle.kts | New module configuration for View-based button |
| ui-views/src/main/java/.../CashAppPayButton.kt | Moved button implementation with package name changed to app.cash.paykit.ui.views |
| ui-views/src/main/res/ | Moved button resources (drawables, styles, strings) with trailing newlines added |
| ui-views/api/ui-views.api | New API file for ui-views module |
| ui-compose/build.gradle.kts | New module configuration for Compose button with Compose plugin and dependencies |
| ui-compose/src/main/java/.../CashAppPayButton.kt | New Compose button implementation matching View-based button's behavior |
| ui-compose/src/main/java/.../CashAppPayButtonStyle.kt | Enum defining button style variants |
| ui-compose/src/main/res/ | Button resources for Compose module (drawables, strings) |
| ui-compose/lint.xml | Lint configuration allowing Material 2 ripple API |
| ui-compose/api/ui-compose.api | New API file for ui-compose module |
| CHANGELOG.md | Documented breaking change and new Compose dependency |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| modifier = modifier | ||
| .defaultMinSize(minHeight = 48.dp) | ||
| .height(48.dp) | ||
| .fillMaxWidth() |
There was a problem hiding this comment.
The fillMaxWidth() modifier is applied after the user-provided modifier, which means it will override any width constraints the user tries to set. This limits flexibility compared to the View-based button where width can be controlled via XML attributes. Consider removing fillMaxWidth() or applying it before the user modifier (e.g., modifier.fillMaxWidth().then(modifier)) to allow developers to constrain the width if needed. Alternatively, document this behavior clearly in the KDoc.
| modifier = modifier | |
| .defaultMinSize(minHeight = 48.dp) | |
| .height(48.dp) | |
| .fillMaxWidth() | |
| modifier = Modifier | |
| .defaultMinSize(minHeight = 48.dp) | |
| .height(48.dp) | |
| .fillMaxWidth() | |
| .then(modifier) |
There was a problem hiding this comment.
This is intentional
| .defaultMinSize(minHeight = 48.dp) | ||
| .height(48.dp) |
There was a problem hiding this comment.
The defaultMinSize(minHeight = 48.dp) followed immediately by height(48.dp) is redundant. The explicit height modifier will override the minimum height constraint. Consider removing defaultMinSize since the fixed height already achieves the desired size constraint.
There was a problem hiding this comment.
This is intentional
Use `Button` instead of `Box` which is a better fit as it handles many of the things we were trying to achieve out of the box
The public API signature includes androidx.compose.ui.Modifier and androidx.compose.runtime.Composer types from the Compose libraries.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
drewhamilton
left a comment
There was a problem hiding this comment.
Would be great to follow this up with Paparazzi tests!
Co-authored-by: Drew Hamilton <drewh@squareup.com>
Co-authored-by: Drew Hamilton <drewh@squareup.com>
What
Up until now our SDK bundled unmanaged styled Cash App Pay buttons, that were part of the main SDK's library. This change does 2 things:
Notes:
compose-lints(Slack's Compose lint rules) for better code qualityProof
I've separately updated the Dev App to showcase these (separate PR to follow), adding that video here for reference of what these changes look like and as proof everything works as expected.
cap-sdk-compose-v2.mp4