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

May 20, 2023

1

Hyperlink copied to clipboard

Posted by Stephen McDonald, Developer Applications Engineer

We just lately launched a new Google Pay button view on Android which brings a variety of recent options, akin to the newest Materials 3 design ideas, 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 will be personalized to make it extra constant together 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 fashionable 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 a wide range 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 the same API to the Google Pay button, however as an alternative bundles the identical button property obtainable on the Google Pockets developer website, 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? Try the GitHub repositories for each compose-pay-button and compose-wallet-button the place you may study extra in regards to the libraries and the way to add them to your Android apps!

Supply hyperlink