Một số doanh nghiệp cần có khả năng thanh toán nhanh để có được hoặc lấy lại quyền truy cập vào một dịch vụ (ví dụ: gói dữ liệu di động, hoá đơn gia đình, nâng cấp dịch vụ hoặc các khoản thanh toán bị từ chối trước đó). Nhiều lần, các doanh nghiệp thông báo cho người dùng về những sự kiện này trên thiết bị di động của họ. Tuy nhiên, để thực hiện thanh toán thực tế, người dùng phải chuyển đổi bối cảnh và điều hướng qua các biểu mẫu tốn thời gian, điều này làm giảm đáng kể cơ hội hoàn tất thanh toán.
Mẫu này giúp bạn thêm hành động thanh toán trực tiếp vào một thông báo, cho phép người dùng thực hiện hành động ngay lập tức và thanh toán chỉ bằng hai lần nhấn. Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo trải nghiệm tương tự trên ứng dụng Android của mình.
Yêu cầu
Hướng dẫn này giả định rằng bạn đã tích hợp Google Pay vào ứng dụng Android. Nếu chưa thêm tính năng tích hợp, bạn có thể bắt đầu bằng hướng dẫn của chúng tôi hoặc lớp học lập trình có hướng dẫn từng bước.
Các thành phần
Việc thêm nút Google Pay vào thông báo dựa trên 2 khối cơ bản trên Android:
Bố cục thông báo tuỳ chỉnh
Thông báo thông thường trên Android có cấu trúc được xác định rõ ràng, thích ứng với nhiều ngữ cảnh trực quan. Việc sử dụng mẫu chuẩn giúp bạn đảm bảo rằng thông báo của bạn hiển thị chính xác bất kể hướng, hệ số hình dạng và phiên bản hệ điều hành của thiết bị. Do đó, đây là cách nên dùng để thông báo cho người dùng về những sự kiện cần họ chú ý.
Trong trường hợp bố cục chuẩn không đáp ứng được nhu cầu của bạn, bạn có thể cung cấp bố cục của riêng mình bằng cách sử dụng bố cục thông báo tuỳ chỉnh. Trong hướng dẫn này, bạn sẽ sử dụng một bố cục tuỳ chỉnh để thêm nút Google Pay vào thông báo và cho phép người dùng bắt đầu thanh toán ngay từ đó.
Hoạt động
Hoạt động giúp người dùng khám phá các chức năng trong ứng dụng của bạn. Thông thường, các hoạt động có một giao diện người dùng được liên kết và tạo nên hệ thống phân cấp màn hình có thể duyệt qua trong ứng dụng của bạn.
Khi người dùng nhấn nút Google Pay, Google sẽ trả về danh sách các phương thức thanh toán hiện có để người dùng hoàn tất giao dịch. Bạn phải khởi chạy trang thanh toán này từ một hoạt động lưu trữ. Bạn có thể sử dụng một hoạt động trong suốt để tạo ấn tượng rằng trang thanh toán xuất hiện ngay trên thông báo.
Xác định bố cục cho thông báo
Quy trình tạo bố cục cho một thông báo rất giống với cách bạn xác định giao diện người dùng cho một hoạt động thông thường. Giống như các tiện ích, thông báo sử dụng lớp RemoteViews để quản lý các phần tử trong bố cục. Điều này làm giảm danh sách các khung hiển thị được hỗ trợ so với bố cục thông thường.
Để bắt đầu, hãy tạo một tệp tài nguyên bố cục trong thư mục res/layout/ để mô tả cách bạn muốn thông báo xuất hiện. Hãy xem
notification_account_top_up.xml trong ứng dụng mẫu để tham khảo.
Thêm nút Google Pay
Sau khi bố cục của bạn đã sẵn sàng, bước cuối cùng là thêm nút Google Pay vào bố cục đó. Để làm việc đó, bạn chỉ cần thêm tài nguyên nút thích hợp vào tệp XML bố cục của mình trong bộ sưu tập các thành phần Google Pay được tạo sẵn. Các thành phần này chứa tài nguyên đồ hoạ cho nút thích ứng với nhiều kích thước và độ phân giải màn hình cũng như ngôn ngữ, đồng thời tuân theo nguyên tắc xây dựng thương hiệu của Google Pay. Bạn có thể tải trực tiếp các biểu tượng này trong phần nguyên tắc sử dụng thương hiệu.
<include android:id="@+id/googlePayButton" layout="@layout/buy_with_googlepay_button" android:layout_width="wrap_content" android:layout_height="48sp" />
Giờ đây, khi xem chế độ xem thiết kế của bố cục, bạn có thể thấy nút Google Pay:
Kích hoạt thông báo
Tuỳ thuộc vào luồng tương tác trong ứng dụng hoặc dịch vụ của bạn, bạn có thể gửi thông báo để phản hồi các sự kiện khác nhau. Một mẫu hình phổ biến là gửi thông báo đẩy từ máy chủ phụ trợ bằng cách sử dụng một dịch vụ nhắn tin. Nếu bạn chưa thêm chức năng đẩy vào ứng dụng Android của mình, hãy xem Giải pháp gửi thông báo qua đám mây của Firebase và hướng dẫn hữu ích này về cách bắt đầu.
Tạo và thiết lập chế độ xem
Để khởi tạo bố cục thông báo và các khung hiển thị có trong đó, quy trình này hoạt động hơi khác so với các hoạt động thông thường. Định cấu hình riêng cả cấu trúc của khung hiển thị và phản hồi đối với hoạt động tương tác của người dùng. Mỗi khi trạng thái cập nhật, bạn phải vẽ lại thông báo.
Trước tiên, hãy tạo một đối tượng RemoteViews để giữ hệ phân cấp bố cục:
Kotlin
val notificationLayout = RemoteViews(packageName, R.layout.large_notification)
Java
RemoteViews notificationLayout = new RemoteViews(packageName, R.layout.large_notification);
Giờ đây, bạn có thể sử dụng đối tượng notificationLayout để thay đổi các khung hiển thị cơ bản (nút, văn bản, hình ảnh, v.v.), chẳng hạn như sửa đổi kiểu hoặc định cấu hình các khung hiển thị đó để phản hồi hoạt động tương tác của người dùng. Trong ví dụ này, nút Google Pay sẽ ghi lại các sự kiện nhấn để khởi chạy quy trình thanh toán:
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))
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));
Trong trường hợp này, Intent hiển thị trang thanh toán có chứa một thao tác xác định mục tiêu của Intent và bao gồm thông tin bổ sung, chẳng hạn như giá của mặt hàng đã chọn. Ngoài ra, Intent sẽ liên kết một sự kiện với nút Google Pay, để bất cứ khi nào người dùng nhấn vào nút này, Intent sẽ thực thi và đưa hoạt động thanh toán lên nền trước.
Hiện thông báo
Sau khi tạo và định cấu hình thông báo, bước cuối cùng là hiển thị thông báo đó cho người dùng. Để làm như vậy, hãy tạo một đối tượng thông báo bằng các tham số được xác định ở trên và cấu hình bổ sung để xác định cách thông báo hoạt động:
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()
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();
Một số thuộc tính trong cấu hình này cho biết cách hoạt động của thông báo này, trong khi những thuộc tính khác có thể khác nhau trong các ứng dụng của bạn dựa trên lựa chọn ưu tiên và trường hợp sử dụng của bạn. Một số trường trong số này là:
| Trường | Giá trị | Mô tả |
|---|---|---|
| Kênh thông báo | NOTIFICATION_CHANNEL_ID |
Kể từ Android 8.0 (API cấp 26), bạn phải chỉ định kênh cho tất cả thông báo. Các kênh nhóm thông báo theo các chủ đề phân loại mà người dùng có thể quản lý. Bạn có thể tìm hiểu thêm về các kênh thông báo trong tài liệu Android. |
| Chế độ xem nội dung lớn tuỳ chỉnh | notificationLayout |
Đây là nơi bố cục bạn đã chuẩn bị trước đó kết nối với thông báo. |
| Tự động huỷ | false |
Nếu làm cho thông báo của bạn có tính tương tác (như thông báo được dùng trong ví dụ này), bạn có thể đặt tham số auto-cancel thành false để đảm bảo thông báo không tự động bị loại bỏ khi người dùng chạm vào bất kỳ khung hiển thị nào bên trong thông báo. |
| Chỉ cảnh báo một lần | true |
Thông báo này phản hồi hoạt động đầu vào của người dùng. Đặt tham số này thành true để tránh âm thanh, lời nhắc và chế độ rung khi thông báo cập nhật. |
Để tìm hiểu về các cấu hình khác và các khái niệm chung về thông báo, hãy xem các phần thông báo tuỳ chỉnh và tổng quan trong tài liệu Android.
Cuối cùng, để kích hoạt và hiển thị thông báo, hãy dùng phương thức notify để truyền vào đối tượng notification đã tạo trước đó:
Kotlin
NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification)
Java
NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification);
NOTIFICATION_ID là một số nguyên tuỳ ý xác định thông báo và cần thiết để cập nhật hoặc xoá thông báo đó sau này.
Thanh toán
Khi người dùng nhấn vào nút Google Pay, hãy hiện trang thanh toán để người dùng có thể chọn một phương thức thanh toán để hoàn tất giao dịch. Bạn có thể dùng Google Pay API để hiển thị trang thanh toán ở trên cùng của một hoạt động.
Vì thông báo này bắt đầu một quy trình thanh toán mới, hãy làm cho hoạt động này trở nên minh bạch để người dùng có ấn tượng rằng thao tác này hoàn tất mà không cần mở ứng dụng của bạn. Hãy xem phương thức onCreate của hoạt động này:
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() }
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(); }
Như bạn thấy, chưa có nhiều hoạt động trong ứng dụng này. Thông báo truyền tin có hằng số ý định ACTION_CLOSE_SYSTEM_DIALOGS sẽ đóng trình đơn thông báo. Hãy nhớ rằng hoạt động này chỉ truy cập thông qua nút Google Pay trong thông báo và nếu không có thông báo truyền tin, hộp thoại thông báo vẫn sẽ mở.
Ngoài ra, hoạt động này chỉ cần hiển thị trang thanh toán, được khởi tạo thông qua phương thức showPaymentsSheet. Từ đó, bạn chỉ cần gọi phương thức loadPaymentData trong Google Pay API. Hãy xem tệp PaymentTransparentActivity.java trong ứng dụng mẫu để khám phá tất cả logic trong hoạt động.