Google Pay と Google ウォレットの Jetpack Compose ボタン

5月 19, 2023
Stephen McDonald Developer Programs Engineer

先日、Android の新しい Google Pay ボタンビューがリリースされました。ここには、最新の Material 3 デザイン原則、ダークモードとライトモードのバージョン、新しいカスタマイズ機能など、さまざまな新機能が含まれています。

newInGooglePay2
図 1: Android の新しい Google Pay ボタンビューは、一貫性のあるご購入手続きエクスペリエンスを実現するためのカスタマイズが可能。

Jetpack Compose ボタン

Jetpack Compose デベロッパーは、新しいオープンソース ライブラリ compose-pay-button で新しい Google Pay ボタンを利用できます。Jetpack Compose は、Kotlin 言語でユーザー インターフェースを構築できる Android の最新ツールキットです。この新しいライブラリを使うと、これまでより少ないコードで Android アプリに Google Pay ボタンを実装できます。

簡単な例を見てみましょう。次に示すのは、典型的な Jetpack Compose UI に Google Pay ボタンを追加したものです。このボタンは、Jetpack Compose 修飾子を指定することでカスタマイズでき、さまざまなラベル（この例では [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 ウォレット

さらに、Google ウォレット向けのライブラリ compose-wallet-button もリリースしています。このライブラリは、Google Pay ボタンと同様の API を提供しますが、Google ウォレット デベロッパー サイトで公開されているものと同じボタンアセットがバンドルされており、基本形と縮小形の両方が含まれています。

gwallet
図 2： 新しいライブラリでは、Google ウォレット ボタンの基本形と縮小形の両方が利用可能。

早速始めてみたい方は、compose-pay-button と compose-wallet-button の GitHub リポジトリをご覧ください。ライブラリの詳細や、Android アプリに追加する方法を確認できます。

投稿先:
前へ
次へ