Jetpack Compose Buttons for Google Pay and Google Wallet

MAY 19, 2023
Stephen McDonald Developer Programs Engineer

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.

newInGooglePay2
Figure 1: The new Google Pay button view for Android can be customized to make it more consistent with your checkout experience.

Jetpack Compose Buttons

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,
        )
    }
}

Google Wallet

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.

gwallet
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!