Payer depuis une notification

Certaines entreprises ont besoin de pouvoir effectuer des paiements rapidement pour obtenir ou rétablir l'accès à un service (par exemple, des forfaits de données mobiles, des factures de services publics, des mises à niveau de services ou des paiements précédemment refusés). Souvent, les entreprises informent les utilisateurs de ces événements sur leurs appareils mobiles. Toutefois, pour effectuer un paiement, l'utilisateur doit changer de contexte et parcourir des formulaires qui prennent beaucoup de temps, ce qui réduit considérablement les chances de finaliser le paiement.

Ce modèle vous aide à ajouter une action de paiement directement dans une notification, ce qui permet aux utilisateurs d'agir immédiatement et d'effectuer des paiements en deux gestes seulement. Dans ce guide, vous allez apprendre à créer une expérience similaire dans votre application Android.

Conditions requises

Ce guide suppose que vous avez intégré Google Pay à votre application Android. Si vous n'avez pas encore ajouté l'intégration, vous pouvez commencer avec notre tutoriel ou notre atelier de programmation guidé pas à pas.

Éléments de base

L'ajout du bouton Google Pay à vos notifications repose sur deux éléments de base sur Android :

Mises en page de notification personnalisées

Les notifications régulières sur Android ont une anatomie bien définie qui s'adapte à plusieurs contextes visuels. L'utilisation du modèle standard vous permet de vous assurer que vos notifications s'affichent correctement, quels que soient l'orientation, le facteur de forme et la version de l'OS de l'appareil. C'est donc la méthode recommandée pour informer les utilisateurs des événements qui nécessitent leur attention.

Si les mises en page standards ne répondent pas à vos besoins, vous pouvez fournir votre propre mise en page à l'aide des mises en page de notification personnalisées. Dans ce guide, vous allez utiliser une mise en page personnalisée pour ajouter un bouton Google Pay à votre notification et permettre à vos utilisateurs de lancer un paiement directement à partir de là.

Activités

Les activités permettent de présenter des fonctionnalités aux utilisateurs dans votre application. En règle générale, les activités sont associées à une interface utilisateur et constituent la hiérarchie d'écrans parcourable de votre application.

Lorsque l'utilisateur appuie sur le bouton Google Pay, Google renvoie une liste des modes de paiement disponibles pour que l'utilisateur puisse finaliser la transaction. Cette feuille de paiement doit être lancée à partir d'une activité hôte. Vous pouvez utiliser une activité transparente pour donner l'impression que la feuille de paiement s'affiche directement au-dessus de la notification.

Définir une mise en page pour votre notification

Le processus de création de la mise en page d'une notification est très similaire à celui de définition de l'interface utilisateur d'une activité régulière. Comme les widgets, les notifications utilisent la classe RemoteViews pour gérer les éléments de votre mise en page. Cela réduit la liste des vues compatibles par rapport aux mises en page standards.

Pour commencer, créez un fichier de ressources de mise en page dans votre dossier res/layout/ afin de décrire l'apparence de votre notification. Examinez le notification_account_top_up.xml dans l'exemple d'application pour référence.

Figure 1. Exemple de mise en page d'une notification personnalisée.

Remarque : N'oubliez pas que les notifications personnalisées s'affichent à côté des autres notifications. Pour cette raison, et pour offrir la meilleure expérience possible aux utilisateurs, il est important que votre notification reste visuellement cohérente avec le reste. Le guide Material Design pour les notifications est une excellente ressource pour en savoir plus sur les types de notifications et les styles associés.

Ajouter le bouton Google Pay

Une fois votre mise en page prête, la dernière étape consiste à y ajouter le bouton Google Pay. Pour ce faire, il vous suffit d'inclure la ressource de bouton appropriée dans le fichier XML de votre mise en page à partir de la collection d'éléments Google Pay prédéfinis. Ces ressources contiennent des éléments graphiques pour le bouton qui s'adaptent à plusieurs tailles et résolutions d'écran, ainsi qu'à différentes langues. Elles respectent également les consignes relatives à l'image de marque Google Pay. Vous pouvez les télécharger directement depuis la section Consignes relatives à la marque.

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

À présent, lorsque vous examinez la vue Conception de votre mise en page, vous pouvez voir le bouton Google Pay :

Figure 2. Exemple de notification personnalisée avec le bouton Google Pay.

Déclencher la notification

Selon le flux d'interaction dans votre application ou service, vous pouvez envoyer la notification en réponse à différents événements. Une approche courante consiste à envoyer une notification push depuis vos serveurs de backend à l'aide d'un service de messagerie. Si vous n'avez pas encore ajouté de fonctionnalité de notification push à votre application Android, consultez Firebase Cloud Messaging et ce tutoriel pour savoir comment vous lancer.

Créer et configurer la vue

Pour initialiser une mise en page de notification et les vues qu'elle contient, le processus fonctionne légèrement différemment des activités régulières. Configurez séparément la construction des vues et la réponse à l'interaction de l'utilisateur. Chaque fois que l'état est mis à jour, vous devez redessiner la notification.

Commencez par créer un objet RemoteViews pour contenir la hiérarchie de mise en page :

Kotlin

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

Java

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

Vous pouvez désormais utiliser l'objet notificationLayout pour modifier les vues sous-jacentes (boutons, textes, images, etc.), par exemple pour modifier leur style ou les configurer pour qu'elles répondent à l'interaction de l'utilisateur. Dans cet exemple, le bouton Google Pay capture les événements d'appui pour lancer le flux de paiement :

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

Dans ce cas, le Intent qui affiche la feuille de paiement contient une action qui identifie l'objectif du Intent et inclut des informations supplémentaires, comme le prix de l'article sélectionné. De plus, Intent associe un événement au bouton Google Pay. Ainsi, chaque fois que l'utilisateur appuie dessus, Intent s'exécute et met l'activité de paiement au premier plan.

Afficher la notification

Une fois la notification créée et configurée, la dernière étape consiste à l'afficher à l'utilisateur. Pour ce faire, créez un objet de notification avec les paramètres définis ci-dessus et une configuration supplémentaire pour déterminer son comportement :

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

Certaines propriétés de cette configuration montrent comment fonctionne cette notification, tandis que d'autres peuvent différer dans vos applications en fonction de vos préférences et de vos cas d'utilisation. Voici quelques-uns de ces champs :

Champ	Valeur	Description
Canal de notification	NOTIFICATION_CHANNEL_ID	Sous Android 8.0 (niveau d'API 26) et versions ultérieures, vous devez attribuer toutes les notifications à un canal. Les canaux regroupent les notifications dans des catégories que les utilisateurs peuvent gérer. Pour en savoir plus sur les canaux de notification, consultez la documentation Android.
Vue grand format personnalisée	notificationLayout	C'est ici que la mise en page que vous avez préparée précédemment est associée à la notification.
Annulation automatique	false	Si vous rendez votre notification interactive (comme celle utilisée dans cet exemple), vous pouvez définir le paramètre auto-cancel sur false pour vous assurer que la notification n'est pas automatiquement fermée lorsque l'utilisateur appuie sur l'une des vues qu'elle contient.
Alerter une seule fois	true	Cette notification réagit aux entrées utilisateur. Définissez ce paramètre sur true pour éviter les sons, les invites et les vibrations lors de la mise à jour de la notification.

Pour en savoir plus sur les autres configurations et les concepts généraux concernant les notifications, consultez les sections Notifications personnalisées et Présentation de la documentation Android.

Enfin, pour déclencher et afficher la notification, utilisez la méthode notify pour transmettre l'objet notification créé précédemment :

Kotlin

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

Java

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

NOTIFICATION_ID est un entier arbitraire qui identifie la notification et est nécessaire pour la mettre à jour ou la supprimer ultérieurement.

Conseil : N'oubliez pas de n'afficher que les notifications informatifs et exploitables à vos utilisateurs. L'API Google Pay en ligne expose la requête isReadyToPay pour vous aider à déterminer si un utilisateur peut effectuer un paiement avec Google Pay.

Effectuer le paiement

Lorsqu'un utilisateur appuie sur le bouton Google Pay, affichez la feuille de paiement pour qu'il puisse sélectionner un mode de paiement pour finaliser la transaction. Vous pouvez utiliser les API Google Pay pour afficher la feuille de paiement au-dessus d'une activité. Étant donné que la notification lance un nouveau processus de paiement, rendez cette activité transparente pour donner aux utilisateurs l'impression que l'opération se termine sans ouvrir votre application. Examinez la méthode onCreate pour cette activité :

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

Comme vous pouvez le constater, il ne se passe pas grand-chose dans cette activité pour le moment. La diffusion avec la constante d'intention ACTION_CLOSE_SYSTEM_DIALOGS ferme le menu de notifications. N'oubliez pas que cette activité n'est accessible que via le bouton Google Pay dans la notification. Sans la diffusion, la boîte de dialogue de notification reste ouverte.

À part cela, la seule action dont cette activité a besoin est d'afficher la feuille de paiement, qui est lancée par la méthode showPaymentsSheet. À partir de là, il vous suffit d'appeler la méthode loadPaymentData dans l'API Google Pay. Consultez le fichier PaymentTransparentActivity.java dans l'exemple d'application pour explorer toute la logique de l'activité.

Conseil : Consultez la branche notifications du dépôt avec l'exemple d'application Android pour voir un exemple de fonctionnement complet avec ce modèle.