Über eine Benachrichtigung bezahlen

Einige Unternehmen benötigen die Möglichkeit, schnell Zahlungen zu leisten, um Zugriff auf einen Dienst zu erhalten oder wiederzuerlangen, z. B. bei Mobilfunkdatentarifen, Haushaltsrechnungen, Dienst-Upgrades oder zuvor abgelehnten Zahlungen. Oft werden Nutzer von Unternehmen auf ihren Mobilgeräten über diese Ereignisse benachrichtigt. Um eine tatsächliche Zahlung auszuführen, muss der Nutzer jedoch den Kontext wechseln und zeitaufwendige Formulare durchlaufen, was die Wahrscheinlichkeit, dass die Zahlung abgeschlossen wird, erheblich verringert.

Mit diesem Muster können Sie eine Zahlungsaktion direkt in eine Benachrichtigung einfügen. Nutzer können dann sofort Maßnahmen ergreifen und Zahlungen mit nur zwei Tippvorgängen ausführen. In diesem Leitfaden erfahren Sie, wie Sie eine ähnliche Funktion in Ihrer Android-App erstellen.

Voraussetzungen

In diesem Leitfaden wird davon ausgegangen, dass Sie Google Pay in Ihre Android-Anwendung integriert haben. Wenn Sie noch keine Integration hinzugefügt haben, können Sie mit unserem Tutorial oder dem detaillierten Codelab beginnen.

Die Bausteine

Das Hinzufügen der Google Pay-Schaltfläche zu Ihren Benachrichtigungen basiert auf zwei grundlegenden Bausteinen unter Android:

Benutzerdefinierte Benachrichtigungslayouts

Reguläre Benachrichtigungen unter Android haben eine klar definierte Anatomie, die sich an verschiedene visuelle Kontexte anpasst. Wenn Sie die Standardvorlage verwenden, werden Ihre Benachrichtigungen unabhängig von der Ausrichtung, dem Formfaktor und der Betriebssystemversion des Geräts korrekt angezeigt. Daher ist dies die empfohlene Methode, um Nutzer über Ereignisse zu informieren, die ihre Aufmerksamkeit erfordern.

Wenn Standardlayouts Ihren Anforderungen nicht entsprechen, können Sie mit benutzerdefinierten Benachrichtigungslayouts ein eigenes Layout bereitstellen. In diesem Leitfaden verwenden Sie ein benutzerdefiniertes Layout, um Ihrer Benachrichtigung eine Google Pay-Schaltfläche hinzuzufügen. So können Ihre Nutzer direkt über die Benachrichtigung eine Zahlung starten.

Aktivitäten

Aktivitäten helfen Ihnen, Ihren Nutzern Funktionen in Ihrer Anwendung zu präsentieren. Aktivitäten haben in der Regel eine zugehörige Benutzeroberfläche und bilden die durchsuchbare Hierarchie von Bildschirmen in Ihrer Anwendung.

Wenn der Nutzer auf die Google Pay-Schaltfläche tippt, gibt Google eine Liste der verfügbaren Zahlungsmethoden zurück, mit denen der Nutzer die Transaktion abschließen kann. Dieses Zahlungsblatt muss über eine Hosting-Aktivität gestartet werden. Mit einer transparenten Aktivität können Sie den Eindruck erwecken, dass das Zahlungsblatt direkt über der Benachrichtigung angezeigt wird.

Layout für die Benachrichtigung definieren

Das Erstellen des Layouts für eine Benachrichtigung ähnelt sehr dem Definieren der Benutzeroberfläche für eine reguläre Aktivität. Benachrichtigungen verwenden wie Widgets die Klasse RemoteViews, um Elemente in Ihrem Layout zu verwalten. Dadurch wird die Liste der unterstützten Ansichten im Vergleich zu regulären Layouts reduziert.

Erstellen Sie zuerst eine Layoutressourcendatei im Ordner res/layout/, um festzulegen, wie Ihre Benachrichtigung aussehen soll. Sehen Sie sich die notification_account_top_up.xml in der Beispielanwendung an.

Abbildung 1. Beispiel für das Layout einer benutzerdefinierten Benachrichtigung

Tipp:Benutzerdefinierte Benachrichtigungen werden zusammen mit anderen Benachrichtigungen angezeigt. Aus diesem Grund und um Nutzern die bestmögliche Erfahrung zu bieten, ist es wichtig, dass Ihre Benachrichtigung optisch mit den anderen Benachrichtigungen übereinstimmt. Der Material Design-Leitfaden für Benachrichtigungen ist eine gute Ressource, um mehr über Arten von Benachrichtigungen und zugehörige Stile zu erfahren.

Google Pay-Button hinzufügen

Wenn Ihr Layout fertig ist, müssen Sie im letzten Schritt die Google Pay-Schaltfläche hinzufügen. Dazu müssen Sie nur die entsprechende Schaltflächenressource aus der Sammlung der vorgefertigten Google Pay-Assets in Ihre Layout-XML-Datei einfügen. Diese Assets enthalten grafische Ressourcen für die Schaltfläche, die sich an verschiedene Bildschirmgrößen und ‑auflösungen sowie Sprachen anpassen und den Google Pay-Branding-Richtlinien entsprechen. Sie können sie direkt im Bereich Markenrichtlinien herunterladen.

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

Wenn Sie sich jetzt die Designansicht Ihres Layouts ansehen, sehen Sie den Google Pay-Button:

Abbildung 2. Beispiel für eine benutzerdefinierte Benachrichtigung mit dem Google Pay-Button.

Benachrichtigung auslösen

Je nach Interaktionsablauf in Ihrer Anwendung oder Ihrem Dienst können Sie die Benachrichtigung als Reaktion auf verschiedene Ereignisse senden. Ein gängiges Muster ist das Senden einer Push-Benachrichtigung von Ihren Back-End-Servern über einen Messaging-Dienst. Wenn Sie Ihrer Android-App noch keine Push-Funktion hinzugefügt haben, sehen Sie sich Firebase Cloud Messaging und diese Anleitung an.

Ansicht erstellen und einrichten

Die Initialisierung eines Benachrichtigungslayouts und der darin enthaltenen Ansichten funktioniert etwas anders als bei regulären Aktivitäten. Sie können sowohl die Erstellung der Ansichten als auch die Reaktion auf Nutzerinteraktionen separat konfigurieren. Jedes Mal, wenn sich der Status ändert, müssen Sie die Benachrichtigung neu zeichnen.

Erstellen Sie zuerst ein RemoteViews-Objekt, das die Layouthierarchie enthält:

Kotlin

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

Java

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

Sie können jetzt das notificationLayout-Objekt verwenden, um Änderungen an den zugrunde liegenden Ansichten (Schaltflächen, Text, Bilder usw.) vorzunehmen, z. B. um ihren Stil zu ändern oder sie so zu konfigurieren, dass sie auf Nutzerinteraktionen reagieren. In diesem Beispiel werden mit der Google Pay-Schaltfläche Tippereignisse erfasst, um den Zahlungsablauf zu starten:

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

In diesem Fall enthält das Intent, in dem das Zahlungsformular angezeigt wird, eine Aktion, die den Zweck des Intent angibt und zusätzliche Informationen wie den Preis des ausgewählten Artikels enthält. Außerdem wird mit Intent ein Ereignis mit der Google Pay-Schaltfläche verknüpft. Wenn der Nutzer also darauf tippt, wird Intent ausgeführt und die Zahlungsaktivität in den Vordergrund gerückt.

Benachrichtigung anzeigen

Nachdem Sie die Benachrichtigung erstellt und konfiguriert haben, müssen Sie sie dem Nutzer anzeigen. Erstellen Sie dazu ein Benachrichtigungsobjekt mit den oben definierten Parametern und einer zusätzlichen Konfiguration, um das Verhalten festzulegen:

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

Einige Eigenschaften in dieser Konfiguration zeigen, wie diese Benachrichtigung funktioniert. Andere können sich in Ihren Anwendungen je nach Ihren Einstellungen und Anwendungsfällen unterscheiden. Beispiele für diese Felder:

Feld	Wert	Beschreibung
Benachrichtigungskanal	NOTIFICATION_CHANNEL_ID	Ab Android 8.0 (API-Ebene 26) müssen Sie alle Benachrichtigungen einem Kanal zuweisen. In Channels werden Benachrichtigungen in kategorische Themen gruppiert, die Nutzer verwalten können. Weitere Informationen zu Benachrichtigungschannels in der Android-Dokumentation
Benutzerdefinierte Ansicht mit großen Inhalten	notificationLayout	Hier wird das zuvor vorbereitete Layout mit der Benachrichtigung verknüpft.
Automatische Kündigung	false	Wenn Sie Ihre Benachrichtigung interaktiv gestalten (wie in diesem Beispiel), können Sie den Parameter „auto-cancel“ auf false setzen, damit die Benachrichtigung nicht automatisch geschlossen wird, wenn der Nutzer eine der Ansichten darin berührt.
Nur einmal benachrichtigen	true	Diese Benachrichtigung reagiert auf Nutzereingaben. Legen Sie diesen Parameter auf true fest, um Töne, Aufforderungen und Vibrationen zu vermeiden, wenn die Benachrichtigung aktualisiert wird.

Weitere Informationen zu anderen Konfigurationen und allgemeinen Konzepten rund um Benachrichtigungen finden Sie in der Android-Dokumentation in den Abschnitten Benutzerdefinierte Benachrichtigungen und Übersicht.

Verwenden Sie schließlich die Methode notify, um die Benachrichtigung auszulösen und anzuzeigen. Übergeben Sie dazu das zuvor erstellte notification-Objekt:

Kotlin

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

Java

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

NOTIFICATION_ID ist eine beliebige Ganzzahl, die die Benachrichtigung identifiziert und erforderlich ist, um sie später zu aktualisieren oder zu entfernen.

Tipp:Denken Sie daran, dass Sie Ihren Nutzern nur Benachrichtigungen anzeigen sollten, die informativ und umsetzbar sind. Die Google Pay Online API stellt die isReadyToPay-Anfrage zur Verfügung, mit der Sie herausfinden können, ob ein Nutzer mit Google Pay bezahlen kann.

Ausführen der Zahlung

Wenn ein Nutzer auf die Google Pay-Schaltfläche tippt, zeigen Sie das Zahlungsblatt an, damit er eine Zahlungsmethode auswählen kann, um die Transaktion abzuschließen. Mit den Google Pay APIs können Sie das Zahlungsblatt über einer Aktivität anzeigen. Da durch die Benachrichtigung ein neuer Zahlungsvorgang gestartet wird, sollte diese Aktivität transparent sein, damit Nutzer den Eindruck haben, dass der Vorgang abgeschlossen wird, ohne dass Ihre Anwendung geöffnet werden muss. Sehen Sie sich die Methode onCreate für diese Aktivität an:

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

Wie Sie sehen, passiert in dieser Aktivität noch nicht viel. Der Broadcast mit der Intent-Konstanten ACTION_CLOSE_SYSTEM_DIALOGS schließt das Benachrichtigungsmenü. Denken Sie daran, dass auf diese Aktivität nur über die Google Pay-Schaltfläche in der Benachrichtigung zugegriffen wird. Ohne den Broadcast bleibt der Benachrichtigungsdialog geöffnet.

Ansonsten muss in dieser Aktivität nur das Zahlungsformular angezeigt werden, was über die Methode showPaymentsSheet initiiert wird. Rufen Sie dann einfach die Methode loadPaymentData in der Google Pay API auf. Sehen Sie sich die Datei PaymentTransparentActivity.java in der Beispielanwendung an, um die gesamte Logik in der Aktivität zu sehen.

Tipp:Im Repository mit der Android-Beispielanwendung finden Sie im notifications-Branch ein vollständiges funktionierendes Beispiel für dieses Muster.