Software Development

Jetpack Compose Buttons for Google Pay and Google Pockets — Google for Builders Weblog

May 31, 2023
CT Team


Hyperlink copied to clipboard


Posted by Stephen McDonald, Developer Applications Engineer

We lately launched a new Google Pay button view on Android which brings a variety of latest options, comparable to the most recent Materials 3 design rules, darkish and lightweight themed variations, and different new customization capabilities.

Image of the new Google Pay button view for Android
Determine 1: The brand new Google Pay button view for Android may be personalized to make it extra constant along with your checkout expertise.

Jetpack Compose Buttons

We have now made the brand new Google Pay button obtainable to Jetpack Compose builders with a brand new open supply library compose-pay-button. Jetpack Compose is Android’s trendy toolkit for constructing person interfaces when utilizing the Kotlin language, and with this new library you may implement the Google Pay button in your Android apps with even much less code than earlier than.

Let’s take a look at a fast instance. Right here you may see a typical Jetpack Compose UI, with the Google Pay button added. The button accepts a Jetpack Compose modifier for personalization, and helps quite a lot of labels, on this case “Guide with Google Pay”.

setContent {
Column() {
PayButton(
onClick = { println("Button clicked") },
allowedPaymentMethods = "<JSON serialized allowedPaymentMethods>",
modifier = Modifier.width(300.dp),
sort = ButtonType.PAY_BOOK,
)
}
}

Google Pockets

Lastly, we have additionally launched a corresponding library for Google Pockets, compose-wallet-button. The library offers an identical API to the Google Pay button, however as an alternative bundles the identical button belongings obtainable on the Google Pockets developer web site, together with each common and condensed variations.

Image of the regular (left) and condensed (right) versions of the Google Wallet button
Determine 2: Each common and condensed variations of the Google Pockets button can be found within the new library.

Able to get began? Take a look at the GitHub repositories for each compose-pay-button and compose-wallet-button the place you may be taught extra in regards to the libraries and the best way to add them to your Android apps!

Leave a Reply

Your email address will not be published. Required fields are marked *