May 19, 2023
We recently released a new Google Pay button view on Android which brings a range of new features, such as the latest Material 3 design principles, dark and light themed versions, and other new customization capabilities.
 |
| Figure 1: The new Google Pay button view for Android can be customized to make it more consistent with your checkout experience. |
We've now made the new Google Pay button available to Jetpack Compose developers with a new open source library compose-pay-button. Jetpack Compose is Android’s modern toolkit for building user interfaces when using the Kotlin language, and with this new library you can implement the Google Pay button in your Android apps with even less code than before.
Let's look at a quick example. Here you can see a typical Jetpack Compose UI, with the Google Pay button added. The button accepts a Jetpack Compose modifier for customization, and supports a variety of labels, in this case "Book with Google Pay".
setContent {
Column() {
PayButton(
onClick = { println("Button clicked") },
allowedPaymentMethods = "<JSON serialized allowedPaymentMethods>",
modifier = Modifier.width(300.dp),
type = ButtonType.PAY_BOOK,
)
}
} |
Lastly, we've also released a corresponding library for Google Wallet, compose-wallet-button. The library provides a similar API to the Google Pay button, but instead bundles the same button assets available on the Google Wallet developer site, including both regular and condensed versions.
 |
| Figure 2: Both regular and condensed versions of the Google Wallet button are available in the new library. |
Ready to get started? Check out the GitHub repositories for both compose-pay-button and compose-wallet-button where you can learn more about the libraries and how to add them to your Android apps!
Posted by Stephen McDonald, Developer Programs Engineer