Płatności z poziomu powiadomienia

Niektóre firmy wymagają możliwości szybkiego dokonywania płatności w celu uzyskania lub przywrócenia dostępu do usługi (na przykład abonamentów na mobilną transmisję danych, rachunków w gospodarstwie domowym, uaktualnień usług lub wcześniej odrzuconych płatności). Firmy często powiadamiają użytkowników o tych zdarzeniach za pomocą urządzeń mobilnych. Jednak, aby zrealizować płatność, użytkownik musi zmienić kontekst i wypełnić czasochłonne formularze, co znacznie zmniejsza szanse na zrealizowanie płatności.

Ten wzorzec pozwala dodawać działania związane z płatnościami bezpośrednio do powiadomień, umożliwiając użytkownikom natychmiastowe dokonywanie płatności nawet dwoma kliknięciami. Z tego przewodnika dowiesz się, jak utworzyć podobne środowisko w aplikacji na Androida.

Wymagania

Ten przewodnik dotyczy aktywnej integracji Google Pay z Twoją aplikacją na Androida. Jeśli nie masz jeszcze dodanej integracji, możesz skorzystać z naszego samouczka lub przewodnika krok po kroku dotyczącego programowania.

Elementy składowe

Dodanie przycisku Google Pay do powiadomień opiera się w Androidzie na 2 podstawowych elementach składowych:

Niestandardowe układy powiadomień

Zwykłe powiadomienia na Androidzie mają dobrze zdefiniowaną strukturę, która dostosowuje się do różnych kontekstów wizualnych. Użycie szablonu standardowego zapewnia prawidłowe wyświetlanie powiadomień niezależnie od orientacji, wielkości ekranu i wersji systemu operacyjnego urządzenia, dlatego jest to zalecany sposób informowania użytkowników o zdarzeniach wymagających uwagi.

Jeśli standardowe układy nie spełniają wymagań, możesz wykorzystać własny układ, korzystając z niestandardowych układów powiadomień. W tym przewodniku użyjesz układu niestandardowego, by dodać przycisk Google Pay do powiadomienia i umożliwić użytkownikom inicjowanie płatności bezpośrednio za jego pomocą.

Działania

Działania ułatwiają udostępnianie funkcji użytkownikom w aplikacji. Zazwyczaj działania są powiązane z interfejsem użytkownika i składają się na możliwą do przeglądania hierarchię ekranów w aplikacji.

Gdy użytkownik naciśnie przycisk Google Pay, Google zwraca listę dostępnych dla użytkownika form płatności pozwalających zrealizować transakcję. Ten arkusz płatności musi być uruchamiany z poziomu danego działania. Możesz użyć działania przezroczystego, by stworzyć wrażenie, że arkusz płatności wyświetla się bezpośrednio nad powiadomieniem.

Definiowanie układu powiadomienia

Proces tworzenia układu powiadomienia jest bardzo podobny do definiowania interfejsu użytkownika dla zwykłego działania. Powiadomienia, tak jak widżety, korzystają z klasy RemoteViews do zarządzania elementami układu. Zmniejsza to listę obsługiwanych dostępnych widoków w porównaniu ze zwykłymi układami.

Zacznij od utworzenia w folderze res/layout/ pliku zasobu layoutu opisującego wygląd powiadomienia. Spójrz na notification_account_top_up.xml w przykładowej aplikacji.

Rysunek 1. Przykładowy niestandardowy układ powiadomienia.

Wskazówka: pamiętaj, że niestandardowe powiadomienia pojawiają się wraz z innymi powiadomieniami. Dlatego z punktu widzenia użytkowników jest ważne, by Twoje powiadomienie było wizualnie spójne z pozostałymi. Przewodnik po stylu Material Design interfejsu dotyczący powiadomień to doskonałe źródło wiedzy o typach powiadomień i powiązanych z nimi stylach.

Dodawanie przycisku Google Pay

Ostatnim krokiem po przygotowaniu układu jest dodanie do niego przycisku Google Pay. Aby to zrobić, dodaj do pliku XML układu odpowiedni zasób przycisku ze zbioru gotowych zasobów Google Pay. Zbiór ten obejmuje zasoby graficzne dla przycisków, które dostosowują się do różnych rozmiarów i rozdzielczości ekranu oraz do języków. Są także zgodne ze wskazówkami dotyczącymi marki Google Pay. Możesz je pobrać bezpośrednio z sekcji wskazówek dotyczących marki.

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

Gdy to zrobisz, w widoku projektu układu pojawi się przycisk Google Pay:

Rysunek 2. Przykładowe niestandardowe powiadomienie z przyciskiem Google Pay.

Aktywowanie powiadomienia

W zależności od procesu interakcji w aplikacji lub usłudze możesz wysyłać powiadomienia w odpowiedzi na różne zdarzenia. Typowym wzorcem jest wysyłanie powiadomień push z serwerów backendu przy użyciu usługi do przesyłania wiadomości. Jeśli nie masz jeszcze funkcji powiadomień push w swojej aplikacji na Androida, zacznij od zapoznania się z Komunikacją w chmurze Firebase i tym świetnym samouczkiem.

Tworzenie i konfigurowanie widoku

Proces inicjowania układu powiadomień i zawartych w nim widoków przebiega nieco inaczej niż w przypadku zwykłych działań. Skonfiguruj osobno konstrukcję widoków i odpowiedź na interakcję użytkownika. Po każdej aktualizacji stanu musisz ponownie wyświetlić powiadomienie.

Najpierw utwórz obiekt RemoteViews do przechowywania hierarchii układu:

Kotlin

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

Java

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

Możesz używać obiektu notificationLayout do wprowadzania zmian w bazowych widokach (przyciski, tekst, obrazy itp.), np. aby zmodyfikować ich styl lub skonfigurować ich reakcje na interakcję użytkownika. W tym przykładzie przycisk Google Pay przechwytuje zdarzenia kliknięcia w celu uruchomienia procesu płatności:

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

W tym przypadku obiekt Intent, który wyświetla arkusz płatności, zawiera działanie identyfikujące cel obiektu Intent i obejmuje dodatkowe informacje, np. cenę wybranego elementu. Dodatkowo obiekt Intent wiąże zdarzenie z przyciskiem Google Pay, tak by po każdym kliknięciu go przez użytkownika obiekt Intent uruchamiał się i wyświetlał płatność na pierwszym planie.

Wyświetlanie powiadomienia

Ostatnim krokiem po utworzeniu i skonfigurowaniu powiadomienia jest jego wyświetlenie użytkownikowi. Aby to zrobić, utwórz obiekt powiadomienia z podanymi wyżej parametrami i dodatkową konfiguracją określającą sposób jego działania:

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

Niektóre właściwości w tej konfiguracji pokazują, jak działa powiadomienie, a inne mogą różnić się w poszczególnych aplikacjach w zależności od preferencji i przypadków użycia. Oto niektóre z tych pól:

Pole	Wartość	Opis
Kanał powiadomień	NOTIFICATION_CHANNEL_ID	Począwszy od Androida w wersji 8.0 (interfejs API na poziomie 26), musisz przypisywać wszystkie powiadomienia do kanału. Kanały grupują powiadomienia według tematów, którymi mogą zarządzać użytkownicy. Więcej informacji o kanałach powiadomień znajdziesz w dokumentacji Androida.
Niestandardowy widok dużej treści	notificationLayout	Tutaj utworzony przez Ciebie układ łączy się z powiadomieniem.
Automatyczne anulowanie	false	Jeśli skonfigurujesz powiadomienie jako interaktywne (tak jak w tym przykładzie), możesz ustawić parametr automatycznego anulowania na false, by mieć pewność, że powiadomienie nie będzie automatycznie zamykane po dotknięciu przez użytkownika dowolnego z zawartych w nim widoków.
Powiadamiaj tylko raz	true	To powiadomienie reaguje na działania użytkownika. Ustaw ten parametr na true, by uniknąć dźwięków, komunikatów i wibracji podczas aktualizacji powiadomienia.

Więcej informacji o innych konfiguracjach oraz o ogólnych pojęciach związanych z powiadomieniami znajdziesz w dokumentacji Androida w sekcji poświęconej niestandardowym powiadomieniom i w omówieniu.

Aby aktywować i wyświetlić powiadomienie, użyj metody notify do przekazania utworzonego wcześniej obiektu notification:

Kotlin

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

Java

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

Wartość NOTIFICATION_ID to dowolna liczba całkowita, która identyfikuje powiadomienie i jest konieczna do jego zaktualizowania lub późniejszego usunięcia.

Wskazówka: pamiętaj, aby wyświetlać tylko te powiadomienia, które przekazują informacje użytkownikowi i pozwalają mu na interakcję. Interfejs online Google Pay API udostępnia żądanie isReadyToPay, które ułatwia ustalenie, czy użytkownik może dokonać płatności za pomocą Google Pay.

Dokonanie płatności

Gdy użytkownik kliknie przycisk Google Pay, wyświetl arkusz płatności umożliwiający użytkownikom wybór formy płatności do realizacji transakcji. Za pomocą interfejsów API Google Pay możesz wyświetlać arkusz płatności na działaniu. Ponieważ powiadomienie rozpoczyna nowy proces płatności, ustaw to działanie jako przezroczyste, aby użytkownicy mieli wrażenie, że operacja zostaje wykonana bez otwierania aplikacji. Spójrz na metodę onCreate tego działania:

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

Jak widzisz, niewiele się jeszcze dzieje w tym działaniu. Wiadomość ze stałą intencji ACTION_CLOSE_SYSTEM_DIALOGS zamyka menu powiadomień. Pamiętaj, że to działanie jest dostępne tylko przez kliknięcie przycisku Google Pay w powiadomieniu. Bez tej wiadomości okno powiadomienia pozostaje otwarte.

Jedyne działanie, jakie trzeba oprócz tego wykonać, to wyświetlenie arkusza płatności, które jest inicjowane przez metodę showPaymentsSheet. Następnie wystarczy wywołać metodę loadPaymentData w Google Pay API. W pliku PaymentTransparentActivity.java przykładowej aplikacji możesz zapoznać się z całą logiką działania.

Wskazówka: w gałęzi notifications w repozytorium z przykładową aplikacją na Androida znajdziesz kompletny przykład działania zgodnego z tym wzorcem.