Некоторым компаниям требуется возможность быстро совершать платежи для получения или возобновления доступа к услуге (например, для оплаты тарифов мобильной связи, счетов за коммунальные услуги, обновления услуг или ранее отклоненных платежей). Компании часто уведомляют пользователей о таких событиях на их мобильных устройствах. Однако для осуществления фактического платежа пользователю приходится переключаться между контекстами и заполнять трудоемкие формы, что значительно снижает вероятность завершения платежа.
Этот шаблон позволяет добавлять платёжное действие непосредственно в уведомление , позволяя пользователям мгновенно выполнять действия и совершать платежи всего двумя нажатиями. В этом руководстве вы узнаете, как реализовать аналогичный интерфейс в вашем приложении для Android.
Требования
Это руководство предполагает наличие активной интеграции Google Pay в вашем Android-приложении. Если вы ещё не интегрировали Google Pay, вы можете начать с нашего руководства или пошаговой работы .
Строительные блоки
Добавление кнопки Google Pay к вашим уведомлениям основано на двух основных принципах работы Android:
Пользовательские макеты уведомлений
Обычные уведомления на Android имеют чётко прописанную структуру , которая адаптируется к различным визуальным контекстам. Использование стандартного шаблона гарантирует корректное отображение уведомлений независимо от ориентации, форм-фактора и версии ОС устройства, поэтому этот способ уведомления рекомендуется использовать для информирования пользователей о событиях, требующих их внимания.
Если стандартные макеты вам не подходят, вы можете создать собственный макет, используя пользовательские макеты уведомлений . В этом руководстве вы научитесь использовать пользовательский макет, чтобы добавить кнопку Google Pay в уведомление и позволить пользователям совершать платежи непосредственно из него.
Деятельность
Действия помогают предоставить пользователям доступ к функциональным возможностям вашего приложения. Как правило, действия имеют связанный с ними пользовательский интерфейс и формируют иерархию экранов, доступных для просмотра в вашем приложении.
Когда пользователь нажимает кнопку Google Pay, Google возвращает список доступных способов оплаты для завершения транзакции. Этот лист оплаты должен быть открыт из хостинг-активности. Вы можете использовать прозрачную активность, чтобы создать впечатление, что лист оплаты отображается непосредственно поверх уведомления.
Определите макет для вашего уведомления
Процесс создания макета уведомления очень похож на определение пользовательского интерфейса для обычного действия. Уведомления, как и виджеты, используют класс RemoteViews для управления элементами макета. Это сокращает список поддерживаемых представлений по сравнению с обычными макетами.
Для начала создайте файл ресурсов макета в папке res/layout/ , чтобы описать, как должно выглядеть ваше уведомление. Для справки взгляните на файл notification_account_top_up.xml в примере приложения.
Добавьте кнопку Google Pay
После того, как макет готов, последний шаг — добавить в него кнопку Google Pay. Для этого просто добавьте соответствующий ресурс кнопки в XML-файл макета из коллекции готовых ресурсов Google Pay. Эти ресурсы содержат графические ресурсы для кнопки, которые адаптируются к различным размерам экрана, разрешениям и языкам, а также соответствуют рекомендациям по брендингу Google Pay. Вы можете скачать их непосредственно из раздела рекомендаций по брендингу .
<include android:id="@+id/googlePayButton" layout="@layout/buy_with_googlepay_button" android:layout_width="wrap_content" android:layout_height="48sp" />
Теперь, взглянув на дизайн вашего макета, вы увидите кнопку Google Pay:
Запустить уведомление
В зависимости от схемы взаимодействия в вашем приложении или сервисе вы можете отправлять уведомления в ответ на различные события. Распространенный подход — отправка push-уведомлений с внутренних серверов через службу обмена сообщениями. Если вы ещё не добавили функцию push-уведомлений в своё Android-приложение, ознакомьтесь с Firebase Cloud Messaging и этим отличным руководством по началу работы.
Создать и настроить представление
Инициализация макета уведомления и содержащихся в нём представлений происходит несколько иначе, чем при обычной работе. Настройте как построение представлений, так и реакцию на взаимодействие с пользователем отдельно. При каждом обновлении состояния необходимо перерисовывать уведомление.
Сначала создайте объект RemoteViews для хранения иерархии макета:
Котлин
val notificationLayout = RemoteViews(packageName, R.layout.large_notification)
Ява
RemoteViews notificationLayout = new RemoteViews(packageName, R.layout.large_notification);
Теперь вы можете использовать объект notificationLayout для внесения изменений в базовые представления (кнопки, тексты, изображения и т. д.), например, для изменения их стиля или настройки для реагирования на взаимодействие с пользователем. В этом примере кнопка Google Pay перехватывает события нажатия для запуска процесса оплаты:
Котлин
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))
Ява
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));
В этом случае Intent , отображающее страницу оплаты, содержит действие, которое определяет цель Intent и включает дополнительную информацию, например, цену выбранного товара. Кроме того, Intent связывает событие с кнопкой Google Pay, чтобы при каждом нажатии пользователем оно выполнялось и выводило платежную Intent на передний план.
Показать уведомление
После создания и настройки уведомления последний шаг — показать его пользователю. Для этого создайте объект уведомления с указанными выше параметрами и дополнительной конфигурацией, определяющей его поведение:
Котлин
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()
Ява
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();
Некоторые свойства в этой конфигурации показывают, как работает это уведомление, в то время как другие могут отличаться в ваших приложениях в зависимости от ваших предпочтений и вариантов использования. Некоторые из этих полей:
| Поле | Ценить | Описание |
|---|---|---|
| Канал уведомлений | NOTIFICATION_CHANNEL_ID | Начиная с Android 8.0 (уровень API 26), все уведомления необходимо назначать каналу. Каналы группируют уведомления по категориям, которыми могут управлять пользователи. Подробнее о каналах уведомлений см. в документации Android . |
| Пользовательский просмотр большого контента | notificationLayout | Здесь подготовленный вами ранее макет подключается к уведомлению. |
| Автоматическая отмена | false | Если вы сделаете свое уведомление интерактивным (как в этом примере), вы можете задать параметру автоматической отмены значение false чтобы гарантировать, что уведомление не будет автоматически закрыто, когда пользователь коснется любого из представлений внутри него. |
| Оповещение только один раз | true | Это уведомление реагирует на действия пользователя. Установите этот параметр в true , чтобы отключить звуки, подсказки и вибрацию при обновлении уведомления. |
Чтобы узнать о других конфигурациях и общих концепциях уведомлений, ознакомьтесь с разделами «Настраиваемые уведомления» и «Обзор» в документации Android.
Наконец, чтобы вызвать и отобразить уведомление, используйте метод notify для передачи ранее созданного объекта notification :
Котлин
NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification)
Ява
NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification);
NOTIFICATION_ID — это произвольное целое число, которое идентифицирует уведомление и необходимо для его обновления или удаления в дальнейшем.
Сделайте оплату
Когда пользователь нажимает кнопку Google Pay, отображайте страницу оплаты, чтобы пользователи могли выбрать способ оплаты для завершения транзакции. Вы можете использовать API Google Pay для отображения страницы оплаты поверх действия . Поскольку уведомление запускает новый процесс оплаты, сделайте это действие прозрачным, чтобы у пользователей сложилось впечатление, что операция завершается без открытия вашего приложения. Взгляните на метод onCreate для этого действия:
Котлин
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() }
Ява
@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(); }
Как видите, в этом действии пока ничего особенного не происходит. Трансляция с константой намерения ACTION_CLOSE_SYSTEM_DIALOGS закрывает меню уведомлений. Помните, что это действие работает только через кнопку Google Pay в уведомлении, и без трансляции диалоговое окно уведомления остаётся открытым.
Кроме этого, единственное действие, которое требуется этому действию, — это отображение листа платежей, которое инициируется методом showPaymentsSheet . После этого просто вызовите метод loadPaymentData в API Google Pay. Взгляните на файл PaymentTransparentActivity.java в примере приложения, чтобы изучить всю логику действия.