Pagar desde una notificación

Algunas empresas necesitan poder hacer pagos rápidamente para obtener o recuperar el acceso a un servicio (por ejemplo, planes de datos móviles, facturas domésticas, mejoras 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 rellenar formularios que requieren mucho tiempo, lo que reduce considerablemente las probabilidades de completar el pago.

Este patrón te ayuda a añadir una acción de pago directamente en una notificación, lo que permite a los usuarios realizar acciones de inmediato y hacer pagos con solo dos toques. En esta guía, aprenderá a crear una experiencia similar en su aplicación Android.

Requisitos

En esta guía se presupone que tienes una integración activa de Google Pay en tu aplicación Android. Si aún no lo has hecho, puedes empezar con nuestro tutorial o con el codelab guiado paso a paso.

Los elementos básicos

Para añadir el botón de Google Pay a tus notificaciones, se utilizan dos elementos fundamentales en Android:

Diseños de notificaciones personalizadas

Las notificaciones normales de Android tienen una anatomía bien definida que se adapta a varios contextos visuales. Usar la plantilla estándar te ayuda a asegurarte de que tus notificaciones se muestran 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 eventos que requieren su atención.

Si los diseños estándar no se ajustan a tus necesidades, puedes proporcionar tu propio diseño mediante diseños de notificación personalizados. En esta guía, usarás un diseño personalizado para añadir un botón de Google Pay a tu notificación y permitir que los usuarios inicien un pago directamente desde ahí.

Actividades

Actividades ayuda a mostrar funciones a los usuarios de tu aplicación. Normalmente, las actividades tienen una interfaz de usuario asociada y forman la jerarquía de pantallas de tu aplicación por la que se puede navegar.

Cuando el usuario pulsa el botón de Google Pay, Google devuelve una lista de métodos de pago disponibles para que el usuario complete 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 encima de la notificación.

Definir un diseño para la notificación

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

Para empezar, crea un archivo de recursos de diseño en tu carpeta res/layout/ para describir el aspecto que quieres que tenga tu notificación. Consulta el notification_account_top_up.xml de la aplicación de ejemplo.

Imagen 1. Diseño de ejemplo de una notificación personalizada.

Nota: Recuerda que las notificaciones personalizadas se muestran junto con otras notificaciones. Por este motivo, y para ofrecer la mejor experiencia posible a los usuarios, es importante que tu notificación mantenga la coherencia visual con el resto. La guía de diseño de materiales para notificaciones es un recurso muy útil para obtener más información sobre los tipos de notificaciones y los estilos asociados.

Añadir el botón de Google Pay

Cuando el diseño esté listo, el último paso es añadir el botón de Google Pay. Para ello, solo tienes que incluir el recurso de botón adecuado en el archivo XML de diseño de la colección de recursos de Google Pay prediseñados. Estos recursos contienen recursos gráficos para el botón que se adaptan a varios tamaños y resoluciones de pantalla, así como a diferentes idiomas, y siguen las directrices de marca de Google Pay. Puedes descargarlos directamente desde la sección Directrices de 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, verás el botón de Google Pay:

Imagen 2. Notificación personalizada de ejemplo con el botón de Google Pay.

Activar la notificación

En función del flujo de interacción de tu aplicación o servicio, puedes enviar la notificación en respuesta a diferentes eventos. Un patrón habitual es enviar una notificación push desde tus servidores backend mediante un servicio de mensajería. Si aún no has añadido la función push a tu aplicación Android, consulta Firebase Cloud Messaging y este tutorial para saber cómo empezar.

Crear y configurar la vista

Para inicializar un diseño de notificación y sus vistas contenidas, el proceso funciona de forma ligeramente diferente a las actividades normales. Configura por separado tanto la creación de las vistas como la respuesta a la interacción de los usuarios. Cada vez que se actualice 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 hacer cambios en las vistas subyacentes (botones, textos, imágenes, etc.), como modificar su estilo o configurarlas para que respondan a la interacción del usuario. En este ejemplo, el botón de Google Pay registra los 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 pago contiene una acción que identifica el objetivo del Intent e incluye información adicional, como el precio del artículo seleccionado. Además, Intent asocia un evento al botón de Google Pay para que, cada vez que el usuario lo toque, Intent se ejecute y ponga en primer plano la actividad de pago.

Mostrar la notificación

Después de crear y configurar la notificación, el último paso es mostrarla al usuario. Para ello, crea 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 variar en tus aplicaciones en función de tus preferencias y casos prácticos. Algunos de estos campos son:

Campo	Valor	Descripción
Canal de notificaciones	NOTIFICATION_CHANNEL_ID	A partir de Android 8.0 (nivel de API 26), debes asignar todas las notificaciones a un canal. Los canales agrupan las notificaciones en temas categóricos que los usuarios pueden gestionar. Puedes consultar más información sobre los canales de notificaciones en la documentación de Android.
Vista de contenido grande personalizada	notificationLayout	Aquí es donde el diseño que has preparado 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 definir el parámetro auto-cancel en false para asegurarte de que la notificación no se cierre automáticamente cuando el usuario toque alguna de las vistas que contiene.
Alertar solo una vez	true	Esta notificación reacciona a las entradas del usuario. Define este parámetro como true para evitar sonidos, peticiones 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 Notificaciones personalizadas y Descripción general de la documentación de Android.

Por último, para activar y mostrar la notificación, usa el método notify para transferir el objeto notification que has creado antes:

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 eliminarla más adelante.

Consejo: Recuerda mostrar solo notificaciones que sean informativas y útiles para tus usuarios. La API online de Google Pay expone la solicitud isReadyToPay para ayudarte a determinar si un usuario puede hacer un pago con Google Pay.

Realizar el pago

Cuando un usuario toque el botón de Google Pay, muestra la hoja de pago para que pueda seleccionar un método de pago y completar la transacción. Puedes usar las APIs de Google Pay para mostrar la hoja de pago encima de 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 de 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 ocurre mucho en esta actividad. La emisión con la constante de intent ACTION_CLOSE_SYSTEM_DIALOGS cierra el menú de notificaciones. Recuerda que esta actividad solo se puede acceder a través del botón Google Pay de la notificación y que, sin la emisión, el cuadro de diálogo de la 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. A partir de ahí, solo tienes que llamar al método loadPaymentData de la API Google Pay. Echa un vistazo al archivo PaymentTransparentActivity.java de la aplicación de ejemplo para ver toda la lógica de la actividad.

Nota: Consulta la rama notifications del repositorio con la aplicación Android de ejemplo para ver un ejemplo completo de este patrón.