Cómo pagar desde una notificación

Algunas empresas requieren la capacidad de realizar pagos rápidamente para obtener o recuperar el acceso a un servicio (por ejemplo, planes de datos móviles, facturas de servicios domésticos, actualizaciones de servicios o pagos rechazados anteriormente). Muchas veces, las empresas notifican a los usuarios sobre estos eventos en sus dispositivos móviles. Sin embargo, para realizar un pago real, el usuario debe cambiar de contexto y navegar por formularios que consumen mucho tiempo, lo que reduce considerablemente la posibilidad de completar el pago.

Este patrón te ayuda a agregar una acción de pago directamente en una notificación, lo que permite que los usuarios realicen pagos con tan solo dos toques. En esta guía, aprenderás a crear una experiencia similar en tu aplicación para Android.

Requisitos

En esta guía, se supone que tienes una integración activa de Google Pay en tu aplicación para Android. Si aún no agregaste la integración, puedes comenzar con nuestro instructivo o el Codelab guiado paso a paso.

Los componentes básicos

Agregar el botón de Google Pay a tus notificaciones se basa en dos componentes fundamentales de Android:

Diseños de notificaciones personalizados

Las notificaciones normales en Android tienen una anatomía bien definida que se adapta a múltiples contextos visuales. Usar la plantilla estándar te ayuda a garantizar que tus notificaciones se muestren correctamente, independientemente de la orientación, el factor de forma y la versión del SO del dispositivo. Por lo tanto, es la forma recomendada de informar a los usuarios sobre los eventos que requieren su atención.

En situaciones en las que los diseños estándar no satisfacen tus necesidades, puedes proporcionar tu propio diseño con diseños de notificación personalizados. En esta guía, usarás un diseño personalizado para agregar un botón de Google Pay a tu notificación y permitir que los usuarios inicien un pago directamente desde allí.

Actividades

Las actividades ayudan a exponer la funcionalidad a los usuarios en tu aplicación. Por lo general, las actividades tienen una interfaz de usuario asociada y conforman la jerarquía de pantallas navegables en tu aplicación.

Cuando el usuario presiona el botón de Google Pay, Google devuelve una lista de las formas de pago disponibles para que los usuarios completen la transacción. Esta hoja de pagos debe iniciarse desde una actividad de alojamiento. Puedes usar una actividad transparente para crear la impresión de que la hoja de pagos se muestra directamente sobre la notificación.

Define un diseño para tu notificación

El proceso para crear el diseño de una notificación es muy similar al que se usa para definir la interfaz de usuario de una actividad normal. Al igual que los widgets, las notificaciones usan la clase RemoteViews para administrar los elementos de tu diseño. Esto reduce la lista de vistas disponibles compatibles en comparación con los diseños normales.

Para comenzar, crea un archivo de recursos de diseño en tu carpeta res/layout/ para describir cómo quieres que se vea tu notificación. Consulta el notification_account_top_up.xml en la aplicación de ejemplo como referencia.

Figura 1. Ejemplo de diseño de notificación personalizado.

Nota: Recuerda que las notificaciones personalizadas se muestran junto con otras notificaciones. Por ese motivo, y para brindarles la mejor experiencia a los usuarios, es importante que tu notificación mantenga una coherencia visual con el resto. La guía de Material Design para notificaciones es un excelente recurso para obtener más información sobre los tipos de notificaciones y los estilos asociados.

Agrega el botón de Google Pay

Una vez que tu diseño esté listo, el último paso es agregarle el botón de Google Pay. Para ello, simplemente incluye el recurso de botón adecuado en el archivo XML de diseño desde la colección de recursos prediseñados de Google Pay. Estos recursos contienen elementos gráficos para el botón que se adaptan a varios tamaños y resoluciones de pantalla, así como a diferentes idiomas, y cumplen con los lineamientos de desarrollo de la marca de Google Pay. Puedes descargarlos directamente desde la sección de lineamientos de la marca.

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

Ahora, cuando veas la vista de diseño de tu diseño, podrás ver el botón de Google Pay:

Figura 2. Ejemplo de notificación personalizada con el botón de Google Pay.

Activa la notificación

Según el flujo de interacción en tu aplicación o servicio, puedes enviar la notificación en respuesta a diferentes eventos. Un patrón común es enviar una notificación push desde tus servidores de backend con un servicio de mensajería. Si aún no agregaste la funcionalidad de envío de notificaciones push a tu aplicación para Android, consulta Firebase Cloud Messaging y este excelente instructivo sobre cómo comenzar.

Crea y configura la vista

Para inicializar un diseño de notificación y sus vistas contenidas, el proceso funciona de manera ligeramente diferente a las actividades normales. Configura la construcción de las vistas y la respuesta a la interacción del usuario por separado. Cada vez que se actualiza el estado, debes volver a dibujar la notificación.

Primero, crea un objeto RemoteViews para contener la jerarquía de diseño:

Kotlin

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

Java

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

Ahora puedes usar el objeto notificationLayout para realizar cambios en las vistas subyacentes (botones, textos, imágenes, etcétera), como modificar su estilo o configurarlas para que respondan a la interacción del usuario. En este ejemplo, el botón de Google Pay captura eventos de toque para iniciar el flujo de pago:

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

En este caso, el Intent que muestra la hoja de pagos contiene una acción que identifica el objetivo del Intent y que incluye información adicional, como el precio del elemento seleccionado. Además, el Intent asocia un evento al botón de Google Pay, de modo que, cada vez que el usuario lo presiona, el Intent se ejecuta y pone la actividad de pago en primer plano.

Cómo mostrar la notificación

Después de crear y configurar la notificación, el último paso es mostrarla al usuario. Para ello, compila un objeto de notificación con los parámetros definidos anteriormente y una configuración adicional para determinar su comportamiento:

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

Algunas propiedades de esta configuración muestran cómo funciona esta notificación, mientras que otras pueden diferir en tus aplicaciones según tus preferencias y casos de uso. Algunos de estos campos son los siguientes:

Campo	Valor	Descripción
Canal de notificaciones	NOTIFICATION_CHANNEL_ID	A partir de Android 8.0 (API nivel 26), debes asignar todas las notificaciones a un canal. Los canales agrupan las notificaciones en temas categóricos que los usuarios pueden administrar. Puedes obtener más información sobre los canales de notificación en la documentación de Android.
Vista de contenido grande personalizada	notificationLayout	Aquí es donde el diseño que preparaste antes se conecta con la notificación.
Cancelación automática	false	Si haces que tu notificación sea interactiva (como la que se usa en este ejemplo), puedes establecer el parámetro auto-cancel en false para asegurarte de que la notificación no se descarte automáticamente cuando el usuario toque cualquiera de las vistas que contiene.
Recibir alertas solo una vez	true	Esta notificación reacciona a la entrada del usuario. Establece este parámetro en true para evitar sonidos, mensajes y vibraciones cuando se actualice la notificación.

Para obtener información sobre otras configuraciones y conceptos generales relacionados con las notificaciones, consulta las secciones de notificaciones personalizadas y descripción general en la documentación de Android.

Por último, para activar y mostrar la notificación, usa el método notify para pasar el objeto notification creado anteriormente:

Kotlin

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

Java

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

El NOTIFICATION_ID es un número entero arbitrario que identifica la notificación y es necesario para actualizarla o quitarla más adelante.

Sugerencia: Recuerda solo mostrar notificaciones que sean informativas y útiles para tus usuarios. La API de Google Pay en línea expone la solicitud isReadyToPay para ayudarte a averiguar si un usuario puede realizar un pago con Google Pay.

Realizar el pago

Cuando un usuario presione el botón de Google Pay, muestra la hoja de pagos para que pueda seleccionar una forma de pago y completar la transacción. Puedes usar las APIs de Google Pay para mostrar la hoja de pagos sobre una actividad. Como la notificación inicia un nuevo proceso de pago, haz que esta actividad sea transparente para que los usuarios tengan la impresión de que la operación se completa sin abrir tu aplicación. Echa un vistazo al método onCreate para esta actividad:

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

Como puedes ver, aún no sucede mucho en esta actividad. La transmisión con la constante de intent ACTION_CLOSE_SYSTEM_DIALOGS descarta el menú de notificaciones. Recuerda que esta actividad solo se accede a través del botón de Google Pay en la notificación, y sin la transmisión, el diálogo de notificación permanece abierto.

Aparte de eso, la única acción que necesita esta actividad es mostrar la hoja de pagos, que se inicia a través del método showPaymentsSheet. Desde allí, simplemente llama al método loadPaymentData en la API de Google Pay. Consulta el archivo PaymentTransparentActivity.java en la aplicación de ejemplo para explorar toda la lógica de la actividad.

Sugerencia: Consulta la rama notifications en el repositorio con la aplicación de ejemplo para Android para ver un ejemplo de trabajo completo con este patrón.