Membayar dari notifikasi

Beberapa bisnis memerlukan kemampuan untuk melakukan pembayaran dengan cepat agar dapat memperoleh atau mendapatkan kembali akses ke layanan (misalnya: paket data seluler, tagihan rumah tangga, upgrade layanan atau pembayaran yang sebelumnya ditolak). Sering kali, bisnis memberi tahu pengguna tentang peristiwa ini di perangkat seluler mereka. Namun, untuk melakukan pembayaran sebenarnya, pengguna harus beralih konteks dan membuka formulir yang memakan waktu, yang secara signifikan mengurangi peluang untuk menyelesaikan pembayaran.

Pola ini membantu Anda menambahkan tindakan pembayaran langsung ke dalam notifikasi, sehingga pengguna dapat langsung mengambil tindakan dan melakukan pembayaran hanya dengan dua ketukan. Dalam panduan ini, Anda akan mempelajari cara membuat pengalaman serupa di aplikasi Android Anda.

Persyaratan

Panduan ini mengasumsikan integrasi Google Pay yang aktif di aplikasi Android Anda. Jika belum menambahkan integrasi, Anda dapat memulai dengan tutorial atau codelab terpandu langkah demi langkah kami.

Elemen penyusun

Menambahkan tombol Google Pay ke notifikasi Anda didasarkan pada dua blok penyusun mendasar di Android:

Tata letak notifikasi kustom

Notifikasi reguler di Android memiliki anatomi yang ditentukan dengan baik dan beradaptasi dengan berbagai konteks visual. Dengan menggunakan template standar, Anda dapat memastikan notifikasi ditampilkan dengan benar, terlepas dari orientasi, faktor bentuk, dan versi OS perangkat. Oleh karena itu, cara ini direkomendasikan untuk memberi tahu pengguna tentang peristiwa yang memerlukan perhatian mereka.

Dalam situasi ketika tata letak standar tidak memenuhi kebutuhan Anda, Anda dapat menyediakan tata letak sendiri menggunakan tata letak notifikasi kustom. Dalam panduan ini, Anda akan menggunakan tata letak kustom untuk menambahkan tombol Google Pay ke notifikasi dan memungkinkan pengguna memulai pembayaran langsung dari sana.

Aktivitas

Aktivitas membantu mengekspos fungsi kepada pengguna di aplikasi Anda. Biasanya, aktivitas memiliki antarmuka pengguna terkait, dan membentuk hierarki layar yang dapat dijelajahi di aplikasi Anda.

Saat pengguna menekan tombol Google Pay, Google akan menampilkan daftar metode pembayaran yang tersedia agar pengguna dapat menyelesaikan transaksi. Lembar pembayaran ini harus diluncurkan dari aktivitas hosting. Anda dapat menggunakan aktivitas transparan untuk menciptakan kesan bahwa sheet pembayaran ditampilkan langsung di atas notifikasi.

Menentukan tata letak untuk notifikasi Anda

Proses pembuatan tata letak untuk notifikasi sangat mirip dengan cara Anda menentukan antarmuka pengguna untuk aktivitas reguler. Notifikasi, seperti widget, menggunakan class RemoteViews untuk mengelola elemen dalam tata letak Anda. Hal ini mengurangi daftar tampilan yang didukung yang tersedia dibandingkan dengan tata letak biasa.

Untuk memulai, buat file resource tata letak di folder res/layout/ untuk menjelaskan tampilan notifikasi yang Anda inginkan. Lihat notification_account_top_up.xml dalam aplikasi contoh untuk referensi.

Gambar 1. Contoh tata letak notifikasi kustom.

Tips: Ingatlah bahwa notifikasi kustom ditampilkan bersama notifikasi lainnya. Oleh karena itu, dan untuk memberikan pengalaman terbaik kepada pengguna, notifikasi Anda harus tetap konsisten secara visual dengan notifikasi lainnya. Panduan desain material untuk notifikasi adalah referensi yang bagus untuk mempelajari lebih lanjut jenis notifikasi dan gaya terkait.

Menambahkan tombol Google Pay

Setelah tata letak Anda siap, langkah terakhir adalah menambahkan tombol Google Pay ke tata letak tersebut. Untuk melakukannya, cukup sertakan resource tombol yang sesuai ke file XML tata letak Anda dari koleksi aset Google Pay yang telah dibuat sebelumnya. Aset ini berisi sumber daya grafis untuk tombol yang beradaptasi dengan berbagai ukuran dan resolusi layar serta bahasa, dan mengikuti pedoman branding Google Pay. Anda dapat mendownload langsung dari bagian pedoman merek.

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

Sekarang, saat melihat tampilan desain tata letak, Anda dapat melihat tombol Google Pay:

Gambar 2. Contoh notifikasi kustom dengan tombol Google Pay.

Memicu notifikasi

Bergantung pada alur interaksi di aplikasi atau layanan Anda, Anda dapat mengirimkan notifikasi sebagai respons terhadap berbagai peristiwa. Pola umum adalah mengirimkan notifikasi push dari server backend Anda menggunakan layanan pesan. Jika Anda belum menambahkan fungsi push ke aplikasi Android, lihat Firebase Cloud Messaging dan tutorial yang bagus ini tentang cara memulai.

Membuat dan menyiapkan tampilan

Untuk menginisialisasi tata letak notifikasi dan tampilan yang ada di dalamnya, prosesnya sedikit berbeda dengan aktivitas biasa. Konfigurasi pembuatan tampilan dan respons terhadap interaksi pengguna secara terpisah. Setiap kali status diperbarui, Anda harus menggambar ulang notifikasi.

Pertama, buat objek RemoteViews untuk menyimpan hierarki tata letak:

Kotlin

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

Java

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

Sekarang Anda dapat menggunakan objek notificationLayout untuk membuat perubahan pada tampilan yang mendasarinya (tombol, teks, gambar, dll.), seperti mengubah gaya atau mengonfigurasinya agar merespons interaksi pengguna. Dalam contoh ini, tombol Google Pay merekam peristiwa ketuk untuk meluncurkan alur pembayaran:

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

Dalam contoh ini, Intent yang menampilkan halaman pembayaran berisi tindakan yang mengidentifikasi tujuan Intent dan menyertakan informasi tambahan, seperti harga item yang dipilih. Selain itu, Intent mengaitkan peristiwa ke tombol Google Pay, sehingga setiap kali pengguna mengetuknya, Intent akan dieksekusi dan membawa aktivitas pembayaran ke latar depan.

Menampilkan notifikasi

Setelah membuat dan mengonfigurasi notifikasi, langkah terakhir adalah menampilkannya kepada pengguna. Untuk melakukannya, buat objek notifikasi dengan parameter yang ditentukan di atas dan konfigurasi tambahan untuk menentukan perilakunya:

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

Beberapa properti dalam konfigurasi ini menunjukkan cara kerja notifikasi ini, sementara properti lainnya mungkin berbeda di aplikasi Anda berdasarkan preferensi dan kasus penggunaan Anda. Beberapa kolom tersebut adalah:

Kolom	Nilai	Deskripsi
Saluran notifikasi	NOTIFICATION_CHANNEL_ID	Mulai dari Android 8.0 (API level 26), Anda harus menetapkan semua notifikasi ke saluran. Saluran mengelompokkan notifikasi dalam topik kategoris yang dapat dikelola pengguna. Anda dapat mempelajari lebih lanjut saluran notifikasi di dokumen Android.
Tampilan konten besar kustom	notificationLayout	Di sinilah tata letak yang Anda siapkan sebelumnya terhubung ke notifikasi.
Pembatalan otomatis	false	Jika Anda membuat notifikasi interaktif (seperti yang digunakan dalam contoh ini), Anda dapat menyetel parameter auto-cancel ke false untuk memastikan bahwa notifikasi tidak ditutup secara otomatis saat pengguna menyentuh salah satu tampilan di dalamnya.
Hanya beri tahu satu kali	true	Notifikasi ini bereaksi terhadap input pengguna. Setel parameter ini ke true untuk menghindari suara, perintah, dan getaran saat notifikasi diperbarui.

Untuk mempelajari konfigurasi lain dan konsep umum seputar notifikasi, lihat bagian notifikasi kustom dan ringkasan dalam dokumentasi Android.

Terakhir, untuk memicu dan menampilkan notifikasi, gunakan metode notify untuk meneruskan objek notification yang dibuat sebelumnya:

Kotlin

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

Java

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

NOTIFICATION_ID adalah bilangan bulat arbitrer yang mengidentifikasi notifikasi dan diperlukan untuk memperbarui atau menghapusnya nanti.

Tips: Ingatlah untuk hanya menampilkan notifikasi yang informatif dan dapat ditindaklanjuti kepada pengguna Anda. Google Pay API online mengekspos permintaan isReadyToPay untuk membantu Anda mengetahui apakah pengguna dapat melakukan pembayaran dengan Google Pay.

Lakukan pembayaran

Saat pengguna mengetuk tombol Google Pay, tampilkan halaman pembayaran agar pengguna dapat memilih metode pembayaran untuk menyelesaikan transaksi. Anda dapat menggunakan Google Pay API untuk menampilkan halaman pembayaran di atas aktivitas. Karena notifikasi memulai proses pembayaran baru, buat aktivitas ini transparan untuk memberikan kesan kepada pengguna bahwa operasi selesai tanpa membuka aplikasi Anda. Lihat metode onCreate untuk aktivitas ini:

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

Seperti yang dapat Anda lihat, belum banyak yang terjadi dalam aktivitas ini. Siaran dengan konstanta intent ACTION_CLOSE_SYSTEM_DIALOGS menutup menu notifikasi. Ingatlah bahwa aktivitas ini hanya dapat diakses melalui tombol Google Pay di notifikasi, dan tanpa siaran, dialog notifikasi akan tetap terbuka.

Selain itu, satu-satunya tindakan yang diperlukan aktivitas ini adalah menampilkan halaman pembayaran, yang dimulai melalui metode showPaymentsSheet. Dari sana, cukup panggil metode loadPaymentData di Google Pay API. Lihat file PaymentTransparentActivity.java di aplikasi contoh untuk menjelajahi semua logika dalam aktivitas.

Tips: Lihat cabang notifications di repositori dengan contoh aplikasi Android untuk melihat contoh lengkap yang berfungsi dengan pola ini.