Effettuare un pagamento a partire da una notifica

Alcune attività richiedono la possibilità di effettuare pagamenti rapidamente per ottenere o riacquisire l'accesso a un servizio (ad esempio: piani dati mobili, bollette domestiche, upgrade del servizio o pagamenti precedentemente rifiutati). Spesso le attività notificano agli utenti questi eventi sui loro dispositivi mobili. Tuttavia, per eseguire un pagamento effettivo, l'utente deve cambiare contesto e navigare attraverso moduli che richiedono molto tempo, il che riduce notevolmente la possibilità di completare il pagamento.

Questo pattern ti consente di aggiungere un'azione di pagamento direttamente in una notifica, consentendo agli utenti di agire immediatamente ed effettuare pagamenti con un minimo di due tocchi. In questa guida, imparerai a creare un'esperienza simile nella tua applicazione Android.

Requisiti

Questa guida presuppone un'integrazione di Google Pay attiva nella tua applicazione Android. Se non hai ancora aggiunto l'integrazione, puoi iniziare con il nostro tutorial o con il codelab guidato passo passo.

Componenti di base

L'aggiunta del pulsante Google Pay alle notifiche si basa su due elementi fondamentali su Android:

Layout di notifica personalizzati

Le notifiche regolari su Android hanno un' anatomia ben definita che si adatta a più contesti visivi. L'utilizzo del modello standard ti aiuta a assicurarti che le notifiche vengano visualizzate correttamente indipendentemente dall'orientamento, dal fattore di forma e dalla versione del sistema operativo del dispositivo. Pertanto, è il modo consigliato per informare gli utenti di eventi che richiedono la loro attenzione.

Nei casi in cui i layout standard non soddisfano le tue esigenze, puoi fornire il tuo layout utilizzando i layout di notifica personalizzati. In questa guida utilizzerai un layout personalizzato per aggiungere un pulsante Google Pay alla notifica e consentire agli utenti di avviare un pagamento direttamente da lì.

Attività

Attività aiuta a esporre le funzionalità agli utenti nella tua applicazione. In genere, le attività hanno un'interfaccia utente associata e costituiscono la gerarchia di schermate esplorabili nella tua applicazione.

Quando l'utente preme il pulsante Google Pay, Google restituisce un elenco di metodi di pagamento disponibili per consentire agli utenti di completare la transazione. Questo foglio dei pagamenti deve essere avviato da un'attività di hosting. Puoi utilizzare un'attività trasparente per creare l'impressione che il foglio dei pagamenti venga visualizzato direttamente sopra la notifica.

Definisci un layout per la notifica

La procedura per creare il layout di una notifica è molto simile a quella per definire l'interfaccia utente per un'attività normale. Le notifiche, come i widget, utilizzano la classe RemoteViews per gestire gli elementi nel layout. In questo modo si riduce l'elenco delle visualizzazioni supportate disponibili rispetto ai layout normali.

Per iniziare, crea un file di risorse di layout nella cartella res/layout/ per descrivere l'aspetto che vuoi che abbia la notifica. Dai un'occhiata a notification_account_top_up.xml nell'applicazione di esempio per riferimento.

Figura 1. Layout di esempio di una notifica personalizzata.

Suggerimento:ricorda che le notifiche personalizzate vengono visualizzate insieme alle altre notifiche. Per questo motivo e per offrire la migliore esperienza agli utenti, è importante che la notifica rimanga visivamente coerente con il resto. La guida al material design per le notifiche è un'ottima risorsa per scoprire di più sui tipi di notifiche e sugli stili associati.

Aggiungere il pulsante Google Pay

Una volta pronto il layout, l'ultimo passaggio consiste nell'aggiungere il pulsante Google Pay. Per farlo, basta includere la risorsa pulsante appropriata nel file XML di layout dalla raccolta di asset Google Pay predefiniti. Questi asset contengono risorse grafiche per il pulsante che si adattano a più dimensioni e risoluzioni dello schermo, nonché a più lingue, e seguono le linee guida per il branding di Google Pay. Puoi scaricarli direttamente dalla sezione Linee guida per il brand.

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

Ora, quando guardi la vista struttura del layout, puoi vedere il pulsante Google Pay:

Figura 2. Esempio di notifica personalizzata con il pulsante Google Pay.

Attivare la notifica

A seconda del flusso di interazione nella tua applicazione o servizio, puoi inviare la notifica in risposta a eventi diversi. Un pattern comune consiste nell'inviare una notifica push dai server di backend utilizzando un servizio di messaggistica. Se non hai ancora aggiunto la funzionalità push alla tua applicazione Android, dai un'occhiata a Firebase Cloud Messaging e a questo ottimo tutorial su come iniziare.

Creare e configurare la vista

Per inizializzare un layout di notifica e le relative visualizzazioni contenute, la procedura funziona in modo leggermente diverso rispetto alle normali attività. Configura separatamente sia la costruzione delle visualizzazioni sia la risposta all'interazione dell'utente. Ogni volta che lo stato viene aggiornato, devi ridisegnare la notifica.

Innanzitutto, crea un oggetto RemoteViews per contenere la gerarchia del layout:

Kotlin

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

Java

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

Ora puoi utilizzare l'oggetto notificationLayout per apportare modifiche alle visualizzazioni sottostanti (pulsanti, testi, immagini e così via), ad esempio per modificarne lo stile o configurarle in modo che rispondano all'interazione dell'utente. In questo esempio, il pulsante Google Pay acquisisce gli eventi di tocco per avviare il flusso di pagamento:

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 questo caso, il Intent che mostra il foglio di pagamento contiene un'azione che identifica l'obiettivo del Intent e include informazioni aggiuntive, come il prezzo dell'articolo selezionato. Inoltre, Intent associa un evento al pulsante Google Pay, in modo che ogni volta che l'utente lo tocca, Intent venga eseguito e porti l'attività di pagamento in primo piano.

Mostra la notifica

Dopo aver creato e configurato la notifica, l'ultimo passaggio è mostrarla all'utente. Per farlo, crea un oggetto di notifica con i parametri definiti sopra e una configurazione aggiuntiva per determinare il suo comportamento:

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

Alcune proprietà di questa configurazione mostrano come funziona questa notifica, mentre altre potrebbero differire nelle tue applicazioni in base alle tue preferenze e ai tuoi casi d'uso. Alcuni di questi campi sono:

Campo	Valore	Descrizione
Canale di notifica	NOTIFICATION_CHANNEL_ID	A partire da Android 8.0 (livello API 26), devi assegnare tutte le notifiche a un canale. I canali raggruppano le notifiche in argomenti categorici che gli utenti possono gestire. Per saperne di più sui canali di notifica nella documentazione di Android.
Visualizzazione personalizzata dei contenuti di grandi dimensioni	notificationLayout	Qui il layout che hai preparato in precedenza si collega alla notifica.
Annullamento automatico	false	Se rendi interattiva la notifica (come quella utilizzata in questo esempio), puoi impostare il parametro auto-cancel su false per assicurarti che la notifica non venga chiusa automaticamente quando l'utente tocca una delle visualizzazioni al suo interno.
Avviso una sola volta	true	Questa notifica reagisce all'input dell'utente. Imposta questo parametro su true per evitare suoni, prompt e vibrazioni quando la notifica viene aggiornata.

Per scoprire di più su altre configurazioni e concetti generali relativi alle notifiche, consulta le sezioni Notifiche personalizzate e Panoramica nella documentazione di Android.

Infine, per attivare e visualizzare la notifica, utilizza il metodo notify per passare l'oggetto notification creato in precedenza:

Kotlin

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

Java

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

NOTIFICATION_ID è un numero intero arbitrario che identifica la notifica ed è necessario per aggiornarla o rimuoverla in un secondo momento.

Suggerimento:ricorda di mostrare solo le notifiche che sono informative e utili per i tuoi utenti. L'API Google Pay online espone la richiesta isReadyToPay per aiutarti a scoprire se un utente può effettuare un pagamento con Google Pay.

Effettuare il pagamento

Quando un utente tocca il pulsante Google Pay, mostra il foglio di pagamento in modo che possa selezionare un metodo di pagamento per completare la transazione. Puoi utilizzare le API Google Pay per visualizzare il foglio di pagamento sopra un'attività. Poiché la notifica avvia una nuova procedura di pagamento, rendi questa attività trasparente per dare agli utenti l'impressione che l'operazione venga completata senza aprire l'applicazione. Dai un'occhiata al metodo onCreate per questa attività:

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

Come puoi vedere, in questa attività non succede ancora molto. La trasmissione con la costante di intent ACTION_CLOSE_SYSTEM_DIALOGS chiude il menu delle notifiche. Ricorda che questa attività è accessibile solo tramite il pulsante Google Pay nella notifica e, senza la trasmissione, la finestra di dialogo della notifica rimane aperta.

A parte questo, l'unica azione richiesta da questa attività è la visualizzazione del foglio dei pagamenti, che viene avviata tramite il metodo showPaymentsSheet. Da qui, chiama semplicemente il metodo loadPaymentData nell'API Google Pay. Dai un'occhiata al file PaymentTransparentActivity.java nell'applicazione di esempio per esplorare tutta la logica dell'attività.

Suggerimento: dai un'occhiata al ramo notifications nel repository con l'applicazione Android di esempio per vedere un esempio funzionante completo con questo pattern.