通知からのお支払い

企業によっては、サービス（例: モバイルデータプラン、家計費の請求書、サービスアップグレード、以前承認されなかったお支払いなど）の利用または再開のために、迅速な支払いを要求することがあります。多くの場合、企業はモバイルデバイスでこのようなイベントについてユーザーに通知します。しかし、実際に支払いを行うためには、ユーザーはコンテキストを切り替えたり、時間のかかるフォームを操作したりしなければならず、支払いを完了できないケースが多くあります。

通知からのお支払いでは、支払いアクションを通知内に直接追加できるため、ユーザーはすぐにアクションを起こし、わずか 2 回のタップでお支払いを完了ができます。このガイドでは、Android アプリで同様のエクスペリエンスを作成する方法について説明します。

要件

このガイドでは、Android アプリに有効な Google Pay が統合されていることを前提としています。まだ統合を行っていない場合は、チュートリアルまたはスタートガイド Codelab からすぐに始められます。

構成要素

通知に Google Pay ボタンを追加する方法は、Android の基本的な 2 つの構成要素に基づいています。

カスタム通知レイアウト

通常の Android の通知は、複数の視覚的コンテキストに適応するよう明確に定義された構造を持っています。標準テンプレートを使用すると、画面の向き、フォームファクタ、デバイスの OS バージョンにかかわらず通知が正しく表示されるため、ユーザーの注意を引く必要のあるイベントを通知する方法として推奨されます。

標準レイアウトがニーズに合わない場合は、カスタム通知レイアウトを使用して独自のレイアウトを提供できます。このガイドでは、カスタムレイアウトを使用して通知に Google Pay ボタンを追加し、ユーザーが通知から直接お支払いを開始できるようにします。

アクティビティ

アクティビティは、アプリケーションの機能をユーザーに公開するのに役立ちます。通常、アクティビティには関連付けられたユーザーインターフェースがあり、アプリ内の画面の閲覧可能な階層を構成しています。

ユーザーが Google Pay ボタンをタップすると、取引を完了するために使用可能なお支払い方法のリストが Google から返されます。この支払いシートは、ホスティングアクティビティから開始される必要があります。支払いシートが通知の上部に表示されるようにするには、透明なアクティビティを使用します。

通知のレイアウトを定義する

通知のレイアウトを作成するプロセスは、通常のアクティビティのユーザーインターフェースを定義する方法とよく似ています。通知では、ウィジェットと同様に、レイアウト内の要素を管理するには RemoteViews クラスを使用します。そのため、通常のレイアウトと比べると、使用可能なサポートされているビューは少なくなります。

まず、res/layout/ フォルダにレイアウトリソースファイルを作成して、通知の外観を記述します。サンプルアプリケーションの notification_account_top_up.xml を参照してください。

Google Pay ボタンを追加する

レイアウトが完成したら、最後に Google Pay ボタンを追加します。これは、事前にビルドされた Google Pay で使用できるアセットの中から、レイアウトの XML ファイルに適切なボタンリソースを含めるだけで実施できます。これらのアセットには、さまざまな画面サイズや解像度、言語に対応し、Google Pay のブランドの取り扱いガイドラインを遵守したボタンのグラフィックリソースが含まれています。ブランドの取り扱いガイドラインセクションから直接ダウンロードできます。

<include
  android:id="@+id/googlePayButton"
  layout="@layout/buy_with_googlepay_button"
  android:layout_width="wrap_content"
  android:layout_height="48sp" />

これで、レイアウトのデザインビューに Google Pay ボタンが表示されます。

通知をトリガーする

アプリケーションやサービスのインタラクションフローによって、さまざまなイベントに対応して通知を送ることができます。一般的なパターンは、メッセージサービスを使用してバックエンドサーバーからプッシュ通知を発行することです。Android アプリにプッシュ機能を追加していない場合は、Firebase Cloud Messaging とその利用方法に関するチュートリアルをご覧ください。

ビューを作成して設定する

通知レイアウトとそれに含まれるビューを初期化する手順は、通常のアクティビティとは若干異なります。ビューの構造とユーザーインタラクションに対する応答を個別に設定します。状態が更新されるたびに、通知を変更する必要があります。

まず、レイアウトの階層を保持する RemoteViews オブジェクトを作成します。

Kotlin

    val notificationLayout = RemoteViews(packageName, R.layout.large_notification)
Notifications.kt

Java

    RemoteViews notificationLayout = new RemoteViews(packageName, R.layout.large_notification);
Notifications.java

これで、notificationLayout オブジェクトを使用して、基本的なビュー（ボタン、テキスト、画像など）を変更し、スタイルの変更やユーザーインタラクションに応答する構成が可能になります。この例では、Google Pay ボタンは、支払いフローを開始するためにタップイベントをキャプチャします。

Kotlin

    val selectOptionIntent = Intent(context, PaymentNotificationIntentService::class.java)
      selectOptionIntent.action = ACTION_SELECT_PREFIX + option
      notificationLayout.setOnClickPendingIntent(buttonId, PendingIntent.getService(
              context, 0, selectOptionIntent, PendingIntent.FLAG_UPDATE_CURRENT))Notifications.kt

Java

    Intent payIntent = new Intent(context, PaymentTransparentActivity.class);
    payIntent.setAction(ACTION_PAY_GOOGLE_PAY);
    payIntent.putExtra(OPTION_PRICE_EXTRA, OPTION_PRICE_CENTS.get(selectedOption));
    notificationLayout.setOnClickPendingIntent(
        R.id.googlePayButton, pendingIntentForActivity(context, payIntent));Notifications.java

この場合、支払いシートを表示する Intent には、Intent の目的を識別するアクションと、選択したアイテムの価格などの追加情報が含まれています。また、Intent を使用してイベントを Google Pay ボタンに関連付け、ユーザーがタップするたびに Intent が実行され、支払いアクティビティがフォアグラウンドに表示されます。

通知を表示する

通知を作成して設定したら、最後にユーザーに通知を表示します。そのためには、上記で定義したパラメータと動作を指定するための追加の設定を使用して、通知オブジェクトをビルドします。

Kotlin

    val notification = NotificationCompat.Builder(context, NOTIFICATION_CHANNEL_ID)
            .setSmallIcon(R.mipmap.ic_launcher)
            .setContentTitle(context.getString(R.string.notification_title))
            .setContentText(context.getString(R.string.notification_text))
            .setCustomBigContentView(notificationLayout)
            .setPriority(NotificationCompat.PRIORITY_DEFAULT)
            .setAutoCancel(false)
            .setOnlyAlertOnce(true)
            .build()Notifications.kt

Java

    Notification notification = new NotificationCompat.Builder(context, NOTIFICATION_CHANNEL_ID)
        .setSmallIcon(R.mipmap.ic_launcher)
        .setContentTitle(context.getString(R.string.notification_title))
        .setContentText(context.getString(R.string.notification_text))
        .setCustomBigContentView(notificationLayout)
        .setPriority(NotificationCompat.PRIORITY_DEFAULT)
        .setAutoCancel(false)
        .setOnlyAlertOnce(true)
        .build();Notifications.java

この設定の一部のプロパティは、この通知がどのように機能するかを示していますが、その他のプロパティは、ユーザーの設定や使用場面に応じてアプリケーションで異なる場合があります。フィールドの一部を以下に示します。

フィールド	値	説明
通知チャンネル	`NOTIFICATION_CHANNEL_ID`	Android 8.0（API レベル 26）以降では、すべての通知をチャンネルに割り当てる必要があります。チャンネルを使用して、ユーザーが管理できるカテゴリ別に通知をグループ化します。詳しくは、Android のドキュメントの通知チャンネルをご覧ください。
カスタムのビッグコンテンツビュー	`notificationLayout`	ここで、事前に作成したレイアウトを通知に接続します。
自動キャンセル	`false`	通知をインタラクティブなものにする場合（この例で使用されているように）、自動キャンセルパラメータを `false` に設定することで、ユーザーがその中のいずれかのビューに触れても、通知が自動的に非表示にならないようにできます。
アラートは 1 回のみ	`true`	この通知はユーザー入力に応答します。このパラメータを `true` に設定すると、通知の更新時に音声、メッセージの表示、バイブレーションが無効になります。

通知に関するその他の設定や一般的な概念については、Android のドキュメントのカスタム通知と概要をご覧ください。

最後に、通知をトリガーし表示するには、notify メソッドを使用して、前の手順で作成した notification オブジェクトを渡します。

Kotlin

    NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification)
Notifications.kt

Java

    NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification);Notifications.java

NOTIFICATION_ID は通知を識別する任意の整数であり、後で更新または削除する必要があります。

ヒント: 有益で対応が可能な通知のみを表示してください。Google Pay オンライン API では、ユーザーが Google Pay でのお支払いが可能かを確認するために isReadyToPay リクエストを公開しています。

お支払い

ユーザーが Google Pay ボタンをタップすると、支払いシートが表され、ユーザーはお支払い方法を選択して取引を完了できます。Google Pay API を使用して、アクティビティの上部に支払いシートを表示できます。通知によって新しい支払いプロセスが開始されるため、アクティビティを透明にすることで、ユーザーにアプリケーションを開かずに操作が完了したような印象を与えます。このアクティビティの onCreate メソッドをご覧ください。

Kotlin

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Dismiss the notification UI if the activity was opened from a notification
    if (Notifications.ACTION_PAY_GOOGLE_PAY == intent.action) {
      sendBroadcast(Intent(Intent.ACTION_CLOSE_SYSTEM_DIALOGS))
    }

    // Initialise the payments client
    startPayment()
  }PaymentTransparentActivity.kt

Java

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Dismiss the notification UI if the activity was opened from a notification
    if (Notifications.ACTION_PAY_GOOGLE_PAY.equals(getIntent().getAction())) {
      sendBroadcast(new Intent(Intent.ACTION_CLOSE_SYSTEM_DIALOGS));
    }

    // Initialise the payments client
    startPayment();
  }PaymentTransparentActivity.java

ご覧のとおり、このアクティビティではまだあまり何も発生していません。インテント定数 ACTION_CLOSE_SYSTEM_DIALOGS が指定されたブロードキャストでは、通知メニューが表示されません。このアクティビティは通知に表示される Google Pay ボタンからのみアクセス可能であり、ブロードキャストがなければ通知ダイアログは開いたままになります。

そのほかに、このアクティビティに必要なアクションは、showPaymentsSheet メソッドによって起動する支払いシートを表示することです。次に、Google Pay API の loadPaymentData メソッドを呼び出します。サンプルアプリケーションの PaymentTransparentActivity.java ファイルで、アクティビティ内のすべてのロジックを確認してください。

ヒント: サンプル Android アプリを含むリポジトリの notifications ブランチで、このパターンを使用した完全な動作例をご覧ください。