Plătește dintr-o notificare

Unele companii necesită posibilitatea de a efectua plăți rapid pentru a obține sau a recâștiga accesul la un serviciu (de exemplu: abonamente de date mobile, facturi casnice, upgrade-uri de servicii sau plăți refuzate anterior). De multe ori, companiile notifică utilizatorii despre aceste evenimente pe dispozitivele lor mobile. Cu toate acestea, pentru a efectua o plată efectivă, utilizatorul trebuie să schimbe contextul și să navigheze prin formulare care consumă mult timp, ceea ce reduce considerabil șansa de a finaliza plata.

Acest model vă ajută să adăugați o acțiune de plată direct într-o notificare , permițând utilizatorilor să acționeze imediat și să efectueze plăți cu doar două atingeri. În acest ghid, veți învăța cum să creați o experiență similară în aplicația dvs. Android.

Cerințe

Acest ghid presupune o integrare activă cu Google Pay în aplicația dvs. Android. Dacă nu ați adăugat încă integrarea, puteți începe cu tutorialul nostru sau cu laboratorul de codare pas cu pas .

Blocurile de construcție

Adăugarea butonului Google Pay la notificări se bazează pe două elemente fundamentale pe Android:

Aspecte de notificare personalizate

Notificările obișnuite pe Android au o anatomie bine definită care se adaptează la contexte vizuale multiple. Utilizarea șablonului standard vă ajută să vă asigurați că notificările sunt afișate corect, indiferent de orientare, factorul de formă și versiunea sistemului de operare al dispozitivului și, prin urmare, este modalitatea recomandată de a informa utilizatorii despre evenimentele care necesită atenția lor.

În situațiile în care machetele standard nu corespund nevoilor dvs., puteți oferi propriul machet folosind machete de notificare personalizate . În acest ghid, veți utiliza un machet personalizat pentru a adăuga un buton Google Pay la notificare și a permite utilizatorilor dvs. să inițieze o plată direct de acolo.

Activități

Activitățile ajută la expunerea funcționalității utilizatorilor din aplicație. De obicei, activitățile au o interfață utilizator asociată și alcătuiesc ierarhia răsfoibilă a ecranelor din aplicație.

Când utilizatorul apasă butonul Google Pay, Google returnează o listă de metode de plată disponibile pentru ca utilizatorii să finalizeze tranzacția. Această foaie de plăți trebuie lansată dintr-o activitate de găzduire. Puteți utiliza o activitate transparentă pentru a crea impresia că foaia de plăți este afișată direct deasupra notificării.

Definiți un aspect pentru notificarea dvs.

Procesul de creare a layout-ului pentru o notificare este foarte similar cu modul în care definiți interfața utilizator pentru o activitate obișnuită. Notificările, la fel ca widget-urile, utilizează clasa RemoteViews pentru a gestiona elementele din layout-ul dvs. Acest lucru reduce lista de vizualizări acceptate disponibile în comparație cu layout-urile obișnuite.

Pentru început, creați un fișier de resurse de aspect în folderul res/layout/ pentru a descrie cum doriți să arate notificarea. Consultați fișierul notification_account_top_up.xml din aplicația exemplu pentru referință.

Figura 1. Exemplu de aspect de notificare personalizată.

Sfat: Rețineți că notificările personalizate se afișează alături de alte notificări. Din acest motiv și pentru a oferi cea mai bună experiență utilizatorilor, este important ca notificarea dvs. să rămână consistentă vizual cu restul. Ghidul de design material pentru notificări este o resursă excelentă pentru a afla mai multe despre tipurile de notificări și stilurile asociate.

Adăugați butonul Google Pay

După ce aspectul este gata, ultimul pas este să adăugați butonul Google Pay. Pentru a face acest lucru, includeți pur și simplu resursa corespunzătoare pentru buton în fișierul XML al aspectului din colecția de elemente Google Pay predefinite. Aceste elemente conțin resurse grafice pentru buton care se adaptează la mai multe dimensiuni și rezoluții de ecran, precum și la mai multe limbi și respectă instrucțiunile de branding Google Pay. Le puteți descărca direct din secțiunea de instrucțiuni de branding .

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

Acum, când te uiți la vizualizarea design a layout-ului tău, poți vedea butonul Google Pay:

Figura 2. Exemplu de notificare personalizată cu butonul Google Pay.

Activează notificarea

În funcție de fluxul de interacțiune din aplicația sau serviciul dvs., puteți trimite notificarea ca răspuns la diferite evenimente. Un model comun este emiterea unei notificări push de la serverele backend utilizând un serviciu de mesagerie. Dacă nu ați adăugat încă funcționalitate push în aplicația dvs. Android, aruncați o privire la Firebase Cloud Messaging și la acest tutorial excelent despre cum să începeți.

Creați și configurați vizualizarea

Pentru a inițializa un layout de notificare și vizualizările conținute în acesta, procesul funcționează puțin diferit față de activitățile obișnuite. Configurați separat atât construcția vizualizărilor, cât și răspunsul la interacțiunea utilizatorului. De fiecare dată când starea se actualizează, trebuie să redesenați notificarea.

Mai întâi, creați un obiect RemoteViews pentru a conține ierarhia layout-ului:

Kotlin

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

Java

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

Acum puteți utiliza obiectul notificationLayout pentru a face modificări la vizualizările subiacente (butoane, texte, imagini etc.), cum ar fi pentru a le modifica stilul sau a le configura să răspundă la interacțiunea utilizatorului. În acest exemplu, butonul Google Pay capturează evenimente de atingere pentru a lansa fluxul de plată:

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

În acest caz, Intent care afișează foaia de plată conține o acțiune care identifică obiectivul Intent și include informații suplimentare, cum ar fi prețul articolului selectat. De asemenea, Intent asociază un eveniment butonului Google Pay, astfel încât, de fiecare dată când utilizatorul îl atinge, Intent se execută și aduce activitatea de plată în prim-plan.

Afișează notificarea

După ce creați și configurați notificarea, ultimul pas este să o afișați utilizatorului. Pentru a face acest lucru, construiți un obiect de notificare cu parametrii definiți mai sus și configurații suplimentare pentru a determina cum se comportă:

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

Unele proprietăți din această configurație arată cum funcționează această notificare, în timp ce altele pot diferi în aplicațiile dvs., în funcție de preferințe și cazurile de utilizare. Unele dintre aceste câmpuri sunt:

Domeniu	Valoare	Descriere
Canal de notificare	NOTIFICATION_CHANNEL_ID	Începând cu Android 8.0 (nivelul API 26), trebuie să atribuiți toate notificările unui canal. Canalele grupează notificările în subiecte categorice pe care utilizatorii le pot gestiona. Puteți afla mai multe despre canalele de notificare în documentația Android .
Vizualizare personalizată pentru conținut mare	notificationLayout	Aici se conectează la notificare aspectul pe care l-ați pregătit anterior.
Anulare automată	false	Dacă faceți notificarea interactivă (cum ar fi cea utilizată în acest exemplu), puteți seta parametrul auto-cancel la false pentru a vă asigura că notificarea nu este închisă automat atunci când utilizatorul atinge oricare dintre vizualizările din interiorul acesteia.
Alertă o singură dată	true	Această notificare reacționează la comenzile utilizatorului. Setați acest parametru la true pentru a evita sunetele, solicitările și vibrațiile atunci când notificarea se actualizează.

Pentru a afla despre alte configurații și concepte generale legate de notificări, consultați secțiunile de notificări personalizate și prezentare generală din documentația Android.

În cele din urmă, pentru a declanșa și afișa notificarea, utilizați metoda notify pentru a transmite obiectul notification creat anterior:

Kotlin

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

Java

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

NOTIFICATION_ID este un număr întreg arbitrar care identifică notificarea și este necesar pentru a o actualiza sau a o elimina ulterior.

Sfat: Nu uitați să afișați doar notificări informative și utile utilizatorilor dvs. API-ul online Google Pay expune solicitarea isReadyToPay pentru a vă ajuta să aflați dacă un utilizator poate efectua o plată cu Google Pay.

Efectuați plata

Când un utilizator atinge butonul Google Pay, afișați foaia de plată, astfel încât utilizatorii dvs. să poată selecta o metodă de plată pentru a finaliza tranzacția. Puteți utiliza API-urile Google Pay pentru a afișa foaia de plată deasupra unei activități . Deoarece notificarea inițiază un nou proces de plată, faceți această activitate transparentă pentru a oferi utilizatorilor impresia că operațiunea se finalizează fără a deschide aplicația. Consultați metoda onCreate pentru această activitate:

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

După cum puteți vedea, nu se întâmplă mare lucru în această activitate încă. Transmisiunea cu constanta de intenție ACTION_CLOSE_SYSTEM_DIALOGS închide meniul de notificări. Rețineți că această activitate se accesează doar prin butonul Google Pay din notificare și, fără transmisie, caseta de dialog de notificare rămâne deschisă.

În afară de asta, singura acțiune necesară pentru această activitate este afișarea foii de plăți, care se inițiază prin metoda showPaymentsSheet . De acolo, pur și simplu apelați metoda loadPaymentData în API-ul Google Pay. Consultați fișierul PaymentTransparentActivity.java din aplicația exemplu pentru a explora toată logica activității.

Sfat: Aruncați o privire la ramura notifications din repozitoriu cu aplicația Android exemplu pentru a vedea un exemplu complet funcțional cu acest model.